문제

나의 Vite Vue3 프로젝트에는 두 개의 path가 있다.

• /
• /mypage

이 프로젝트를 build한 후 http-server를 통해 localhost:8080 서버를 켰다.

// 서버 실행방법
// 참고) dist에 build된 파일이 들어있다.
$ npx http-server dist

우선 내부 router.push('/mypage') 와 같은 함수를 통한 페이지 전환은 잘 동작한다. 그리고, 주소창에 http://localhost:8080으로 path가 '/'인 곳에도 잘 접근된다.

그런데!

주소창에 http://localhost:8080/mypage를 입력했더니 접근이 되지 않는 현상(Failed to load resource: the server responded with a status of 404 ())이 발생했다. 이 문제를 해결해보고자 한다. 🧐

탐구

구글링과 함께 아래와 같이 탐구해보았다.

• 우선, vue는 SPA이다. 따라서 하나의 entry point(index.html)를 갖고 있고, 페이지 요청시 index.html와 js, css를 실행하여 요청한 페이지를 그려넣는다.

• child path('localhost:8080/mypage')로 요청했을 경우 index.html을 불러오는게 아니라 다른 html을 찾고있기때문에 404NOT FOUND가 발생하는 것이라고 추측한다.

이 문제가 맞다면, 다른 html 파일을 추가해주면 정상동작이 될 것이다.

// 기존 파일구조
dist
ㄴ index.html

// 임시로 변경한 파일구조
dist
ㄴ index.html
ㄴ mypage
	ㄴindex.html

임시로 변경한 파일구조와 같이 파일을 생성하여 서버를 실행시킨 후, child path('localhost:8080/mypage')에 접근하니 mypage에 있는 index.html을 불러오는 것을 확인했다. 즉, child path('localhost:8080/mypage')의 요청이 엄한 곳으로 가고있다는 것이다.

문제점 파악이 되었다. 그럼 이제 해야할 것은 모든 요청을 index.html 로 보내기 이다.

근데, 왜 router.push로 이동은 잘 되는 것일까?
router.push는 index.html 내부에서 동작하는 함수이다. 따라서 서버에 새롭게 요청하는것이 아니라 그저 함수를 실행시키고 route의 path를 변경시키는 것 뿐이다.
-> 답변이 엉성한 느낌이 있는데 좋은 설명이 있다면 알려주세요 🥺

해결

proxy를 사용하여 localhost:8080으로 오는 요청을 모두 dist/index.html로 보내면 되는것이다! 즉, vue의 코드를 바꿀것이 아니라 서버설정을 바꿔야하는 것.

아래처럼 http-server를 실행시키면 모든 서버를 localhost:8080으로 보내준다고 한다. 아래와 같이 서버를 실행시키니 동작이 아주 잘 된다. 😊

npx http-server --proxy http://localhost:8080?

만약 Vite를 사용하면서 다른 서버를 사용하고 있다면 이 문서를 참고하자!

여담

• 이 현상을 파악하기 위해서 다음과 같은 키워드로 구글링했다.

  • vue build router not working
  • vue build Failed to load resource: the server responded with a status of 404 ()
  • vue http-server index.html
  • 나처럼 검색할 사람을 위해 제목은 내가 검색한 대로 지었다. 😉

• 나의 해결책으로 해결되지 않았다면, router가 history 모드인지 확인해보자.

참고

• https://forum.vuejs.org/t/vue-router-does-not-work-in-production-build/76848
• https://stackoverflow.com/questions/69143139/how-do-i-configure-http-server-for-history-mode-in-vue-js-2