[Spring Boot] Vue.js 연동 - 404 에러 핸들링

저번 포스팅에서 Vue에서 npm run build를 통해 Spring Boot 폴더에 정적파일로 넣는 것을 해봤다. 그렇게 서버 빌드까지 아무 이상이 없을줄 알았는데 아니었다. Vue에서 페이지 이동하거나 새로고침 하는 등 여러 경우에 404에러가 뜨는 것이다. 저번에는 메인 페이지만 서버에 띄워보는 것에서 끝내서, 페이지 이동 같은건 전혀 생각하지 못했다.. 그것도 router로 이동한 경우는 되고 href로 이동한 경우는 안 되고 router로 이동했다고 해도 뒤로가기 하면 404가 뜨고..

아무튼 블로그를 보고 해결하였고, 아직 정확한 이유나 원리는 잘 모른다..
다른 블로그 보고 application.properties에

spring.mvc.throw-exception-if-no-handler-found=true
spring.web.resources.add-mapping=false
spring.mvc.static-path-pattern=/static/**
spring.web.resources.static-locations=classpath:static/

이거를 추가했다가 안 되어서 위 블로그 방법을 찾은건데, 하마터면 이거를 추가해서 더 해결을 못할 뻔 했다. 위의 블로그대로만 별도의 Controller를 만들고, Error는 index.html로 보낼 수 있도록 처리하니까 우리가 예상하는 대로 잘 동작하였다.

import lombok.extern.slf4j.Slf4j;
import org.springframework.boot.web.servlet.error.ErrorController;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
@Slf4j
public class CustomErrorController implements ErrorController {

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