배경1. vue 프로젝트를 github pages를 통해 myurl.com에 배포를 했다
배경2. vue router를 사용하여 myurl.com/posts 페이지가 있다
배경3. vue router의 history모드는 createWebHistory를 사용한다
myurl.com에서 myurl.com/posts로 이동하는 기능은 정상적으로 동작한다. 만약 여기서 이동한 상태에서 새로고침을 하거나, 주소창에 직접 myurl.com/posts를 사용한다면?
동작하지않는다!!!!!ㅜㅜ 물론 localhost에서 돌렸을 경우에는 정상적으로 동작한다.
이유는 history의 모드가 createWebHistory이기 때문이다
history 모드
webHistory
createWebHistory를 사용하여 /posts를 접속하게되면
Request URL을 보면 /posts로 되어있고 이는 즉, 서버에게 /posts의 자원을 달라고 요청한 것인데 서버는 /posts를 /posts/index.html을 인식하고 이를 찾으려하지만 없기때문에 404 에러가 나타난다.
반대로 history를 hash모드로 하는 경우에는 다르다.(createWebHashHistory)
webHashHistory
/posts로 요청할 경우 url은 /#/posts로 바뀐다. 그리고..
위 이미지를 보면 Request URL에서 끝에 아무것도 붙지않고 /로 되어있는 것을 확인할 수 있다. 이는 서버에게 /index.html 를 요청한 것이다.
우리는 npm build를 통해 vue프로젝트를 github에 올리거나 git action을 통해 npm build자동화를 통해 정적파일을 만들어 배포한다.
이 때 만들어지는 정적파일은 /dist폴더이며 이 안에는 index.html이 포함되어있다. 서버는 /를 dist기준으로 생각하고 dist/index.html을 찾아서 실행시킨다.
즉, webHistory를 사용하는 경우에는 Request URL이 /posts이므로 서버는 /posts/index.html를 찾으려하지만 실제로 /dist/posts/에는 index.html이 없기때문에 404 에러가 나타난다.
물론 서버에서 이러한 router url이 가능하도록 설정할 수있다. 하지만 github pages는 이를 지원하지않는다.
이를 지원하는 vercel서버나 router.vue.js공식사이트-server configureations를 참고해야한다
참고자료: Vue3 완벽 마스터: 기초부터 실전까지 - “실전편”
댓글 쓰기