[spring + vue.js] SPA 새로고침 404에러

문제상황

SPA(Single Page Application)는 말 그대로 단일 페이지에 동적으로 내용을 변경하여 웹 페이지를 구성한다. SPA의 모든 경로는 결국 단일 페이지(index.html)로 향하게 되어있기 때문에 다른 경로에서 새로고침을 한다면 그 경로로 GET 요청을 보내는 것과 같기 때문에 404 해당 경로를 찾을 수 없는 에러가 발생한다.

 

즉, vue.js에서 라우팅을 통해 페이지 이동을 하지 않고 브라우저 주소 창에 직접 경로를 입력하거나 새로고침을 하면 에러가 발생한다는 뜻이다. 예를들어 http://localhost:8080/host경로를 뷰의 라우팅 기법을 쓰면 /host에 매핑되는 컴포넌트(페이지)를 가져와 화면에 띄운다. 하지만 위의 경로를 주소창에 직접 입력하거나 저 경로에서 새로고침을 하면 GET http://localhost:8080/host 요청이 서버로 넘어가게 된다.

 

해당 GET 요청을 받은 spring은 URI 매핑을 통해 요청을 처리하고 어떤 view를 반환해 페이지를 띄우려할텐데, SPA 개발에서는 index.html 페이지 이외의 페이지를 띄우지 않는다.

 

해결방법

이 문제의 해결방법은 404 에러가 발생했을 때 이동되는 /error 경로를 spirng에서 매핑하여 index.html 단일 페이지로 이동시켜주면 된다.

1. "/error" 와 index.html 매핑해주기

import org.springframework.boot.web.servlet.error.ErrorController;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ErrorPageController implements ErrorController {

    @GetMapping("/error")
    public String redirectRoot(){
        return "index.html";
    }
}

위에서 설명한 이유로 에러가 발생되어 /error 경로로 이동했을 때 매핑해주는 컨트롤러를 생성한다. @GetMapping을 통해 /error 경로를 매핑해주고 index.html 를 리턴해 단일 페이지로 이동시켜준다. 여기서 주의할 점은 컨트롤러에서 반환하는 뷰는 resource/templates 경로에 있는 파일이다. 스프링 부트에서 기본으로 설정되어있고 위의 코드처럼 return "index"를 반환하면 resource/templates 경로에 있는 index 란 이름의 .html 파일을 찾도록 설정되어있다.

 

만약 vue.js에서 빌드한 파일(index.html)이 spring resource경로의 templates이 아닌 다른 경로에 있다면 설정을 바꿔줘야 한다. 참고로 나의 경우는 아래와 같은 환경이다. spring 프로젝트 안에 vue 프로젝트를 넣어 연동시켰고, vue 프로젝트를 빌드하면 spring 프로젝트 아래 src/main/resources/static에 저장되도록 설정했다. (스프링부트 내장 서버에서 vue.js 결과물이 실행되도록 하기 위해) 즉, 서버 위에서 새로고침을 했을 때 화면에 나타나야하는 파일은 templates이 아닌 static 경로에 있다!

spring + vue.js

2. Spring boot Thymeleaf 경로 설정

위에서 한 것처럼 컨트롤러로 index.html로 매핑했는데도 404에러가 뜬다면 index.html파일을 못찾았을 확률이 크다. 컨트롤러가 반환하는 뷰파일을 /templates에서 찾는 이유는 spring에서 많이 사용하는 템플릿 문법인 타임리프(Thymeleaf) 설정이 그렇게 되어있기 때문이다. (타임리프를 spring 플젝 설정할때 내가 선택했나..? 기억 삭제쓰) 즉 /templates이 아닌 /static에서 index.html을 찾도록 변경해보자. spring 프로젝트에서 application.yml 파일에서 수정해주면 된다.

spring:
  thymeleaf:
    prefix: classpath:static/ # 원하는 경로로 설정!
    cache: false          # 새로고침 시 적용

끝 -.-