Vue 톰캣배포시 경로 설정 문제

제 경우에는 Vue.js를 사용하면서 프로젝트를 진행했었고, 이를 배포하여 톰캣에서 수행했을 때, 기존 npm run serve를 수행하여 localhost에서 작업을 했을 때와는 다른 결과를 불러일으키는 부분이 있었습니다.

제 검색스킬이 부족햇을 수도 있지만, 당시에 검색했을때에는 Vue만의 문제점은 아닌것같았는데, Vue가 아닌 React 라던가 Angular를 사용할때에도 이런 문제가 발생하는지는 모르겠습니다.

---

현상

처음 이 현상을 느꼈던것은 vue프로젝트에 팝업창을 만들어놓고 개발중에 작동하는지 테스트를 완료하고 톰캣에 배포했을때 발생하였습니다.
당시에 개발환경이 SpringBoot에 vue를 올려서 사용중이였는데, 톰캣배포를 수행하니 팝업창을 띄울 때 WhiteLabel페이지가 나왔었습니다.
더 문제였던것은 기존에 npm run serve를 통해 개발환경에서는 잘되던 브라우저의 새로고침기능 역시 작동하지 않았다는건데..

시도

처음엔, 그리고 한동안은 그저 vue Router의 설정 문제라고만 생각했었습니다.
그래서 열심히 Path를 수정해보고, vue.config.js의 publicPath를 수정해보고 해봤지만 해결되지는 않았습니다.
router의 공식홈페이지 https://router.vuejs.org/kr/guide/essentials/history-mode.html#%EC%84%9C%EB%B2%84-%EC%84%A4%EC%A0%95-%EC%98%88%EC%A0%9C를 보게되면 위와같은 방식으로 해결 할 수 있다고 하지만, 이거로는 잘 모르겠었습니다. 결론적으로는 저게 맞는 방법이였지만, 좀더 찾아봤었죠.

목표는 한가지입니다. Vue와 같은 싱글 페이지 어플리케이션의 경우에는 이미 알고있으시겠지만, 간단히 하자면 하나의 페이지를 불러오고 어플리케이션의 사용중에서 페이지의 이동시 필요한 데이터만을 가져오고, 이를 이용해 페이지의 내부를 수정해서 보여주는 방식입니다.
결과적으로, 새로고침이되었든, 에러페이지가 되었든, 하나의 페이지만을 보여주어야합니다.

방법 1. web.xml설정

https://m.blog.naver.com/PostView.nhn?blogId=reinstate10&logNo=221066646290&proxyReferer=https:%2F%2Fwww.google.com%2F
제가 본 글은 아니지만 이분과 같은 방법이였던것 같습니다.
가장 간단한 방법이라고 생각되는데 WEB-INF의 web.xml의 error-page지정을 통해 기존의 404에러 발생시에 vue의 index.html로 명시적으로 이동시켜주는 방식입니다.

<web-app>
  <error-page>
    <error-code>404</error-code>
    <location>/public/index.html</location><!-- index.html위치-->
  </error-page>
</web-app>

문제는 해결되었습니다.
하지만, F12 개발자모드를 열었을때의 계속해서 보여지는 에러코드는 마음에 들지 않습니다.

방법 2. tomcat설정 변경. rewrite.config

https://datajoy.tistory.com/116제가 읽어보고 해결방법을 찾았던 블로그입니다.
이제보니 https://idlecomputer.tistory.com/351?category=791974여기도 동일한 방식으로 이야기 해주시는거 같아요.

결론적으로는 router공식 홈페이지에서의 안내가 맞지만, apache에서의 rewrite를 톰캣에 맞게 재구성했다고 보시면 될것같습니다.
대략적으로 보자면, 요청이 이루어졌을 때, 톰캣의 설정에 따라서 존재하는 페이지라면 수행하고, 없다면 특정 url로 이동시키는 명령이 됩니다.
제경우에는 npm run build수행시에 만들어지는 dist라는 이름을 아무생각없이 사용하고있습니다만,

RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/dist/(.*) /dist/index.html

저의 경우에는 C:\apache-tomcat-8.5.58\conf\Catalina\localhost에 위와같은 내용의 rewrite.config를 사용하고있습니다.
아니지, 테스트에서는 위와같이 사용했고 실무에서는 소스 내에 포함시키는 방식으로 사용중에 있으며, 방법1에서의 개발자모드에서 콘솔에보여지는 오류와 같이 신경쓰이는 현상은 발생하지 않았습니다.

---

꽤 오래 삽질을 했던거같아요 저는, 다른 분들은 안하셨으면 좋겠습니다..