문제
나의 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 모드인지 확인해보자.
