[vue-router] SPA 방식 애플리케이션 운영 시 주의사항

[vue-router] SPA 방식 애플리케이션 운영 시 주의사항

---

Vue를 Single Page Application 방식으로 애플리케이션을 작성하고 운영할 때 백엔드 서버 애플리케이션에 올려서 사용하니 한가지 문제를 만나게 되었다.

바로 URL을 통해 GET 통신으로 특정 페이지화면으로 접근하면 404 에러가 발생하는 것이다.

Vue-router 레퍼런스를 찾아보니 아래와 같은 내용을 찾을 수 있었다.

https://router.vuejs.org/kr/guide/essentials/history-mode.html

레퍼런스에서는 nginx나 apahce, node.js 등은 다루고 있으나 Spring boot(tomcat과 같은 서블릿 컨테이너 서버)는 언급하고 있지 않았다.

문제사항

---

1. vue-router 모듈을 import하여 라우트를 정의하는 js 파일을 연다.

2. 그리고 아래와 같이 모드를 히스토리로 설정한다.

그리고 뷰 프로젝트를 빌드하여 Spring boot 프로젝트의 정적 자원을 관리하는 경로에 빌드된 파일들을 넣어준다.

3. Spring boot 애플리케이션을 실행시키고 화면에 접속해보자.

화면 내의 라우터 링크로 구현된 a태그를 클릭하면 URL이 전환되며 컴포넌트 화면이 정상적으로 화면에 불러와진다.

4. 그러나, 특정 화면을 호출하는 URL을 직접 작성하고 접근해보면 아래와 같이 404 에러가 발생한다. 

(login 화면에 접속하고 새로고침을 눌러도 404가 발생한다.)

해결방법

---

1. 패키지에서 컨트롤러를 하나 생성하자.

2. 컨트롤러에서 ErrorController 인터페이스를 상속하여 커스텀 에러 컨트롤러를 작성한다.

getErrorPath()를 오버라이딩하여 구현하고, 404가 발생하여 Error가 발생하는 경우 index.html 템플릿으로 이동시키도록 처리해준다.

이와 같이 에러 컨트롤러를 커스텀하여 구현하고 확인해보면 문제가 해결됨을 알 수 있는데, 그 이유는 다음과 같다.

화면에서 a링크를 누르면 뷰 라우터로 인하여 페이지 전환없이 컴포넌트 영역만 치환하여 표현(Client Side Rendering)하기 때문에 마치 URL을 이동한 것 처럼 보인다.

그러나 URL을 직접 입력하여 접근할 경우 페이지를 서버로 요청하고 응답을 받아 렌더링(Server Side Rendering)을 하게 된다.

이 때 서버에서는 요청받은 링크에 대해 정의한 매핑 정보가 없기 때문에 전달 해줘야 할 템플릿(html) 정보가 없으므로 자동 설정에 의하여 "/error"를 반환시킨다.

참고 사이트 : 

https://handcoding.tistory.com/196