[SpringBoot + Vue.js] 새로고침 에러

Reference

• https://gilu-world.tistory.com/m/107
• https://stackoverflow.com/questions/62436379/how-to-replace-errorcontroller-deprecated-function-on-spring-boot
• https://okky.kr/article/633285?note=1802555

신입 프로젝트를 하는 중에 배포를 맡았다.
서버에 war 파일을 올리고 만든 홈페이지를 테스트를 하는데 문제 없이 잘 돌아갔다.

문제

그런데,
새로고침을 하거나 url 주소를 직접 입력하면 다음과 같은 에러가 났다.

sprign boot 와 Vue를 이용해 배포를 했더니 404 에러가 났다.

원인

error가 난 원인은 다음과 같다.
SPA(Single Page Application)에서는 모든 주소가 index.html을 바라본다.
Vue 같은 경우 npm run build를 하면 하나의 index.html 파일과 여러 개의 js파일이 생성된다.

해결책

따라서 404에러를 해결하기 위해서는 서버단에서 다음과 같이 설정을 해줘야 한다.
SPA에서 모든 주소가 index.html을 바라보기 때문에
error 발생 시 캐치해서 index.html을 바라보게 하도록 하면 된다.

spring boot의 내장 인터페이스인 ErrorController 상속해 에러 발생 시 index.html로 이동시켜줄 controller를 구현한다.

@Controller
public class CustomErrorController implements ErrorController {
    // error path를 꼭 "/error" 로 하자!
	private final String ERROR_PATH = "/error";

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

    @Override
    public String getErrorPath(){
        return ERROR_PATH;
    }
}

오버라이드 하는 getErrorPath의 경우 Spring.2.3.X 버전부터 사라졌다고 한다.

• 참고

  https://stackoverflow.com/questions/62436379/how-to-replace-errorcontroller-deprecated-function-on-spring-boot

getErrorPath를 제거하거나 @Override 어도테이션을 제거한 후 null을 리턴하게해 사용하면 된다.

@Controller
public class CustomErrorController implements ErrorController {
    // error path를 꼭 "/error" 로 하자!
	private final String ERROR_PATH = "/error";

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

    public String getErrorPath(){
        return null;
    }
}