1. 문제 발생 상황
Vue.js로 프로젝트를 개발하면서 createWebHistory 모드를 사용하여 페이지를 구현하였고, Vercel을 이용하여 배포하였습니다. 배포된 페이지에서 url을 수정하여 특정 페이지로 직접 접근할 때 404 오류가 발생하는 문제를 겪게 되었습니다. 이 글에서는 Vercel을 이용해 Vue.js 애플리케이션을 배포할 때 발생하는 404 오류를 해결하는 방법을 알아보겠습니다.
2. 문제 원인
Vue Router의 createWebHistory 모드는 HTML5 History API를 사용하여 페이지 라우팅을 관리합니다. 이 모드를 사용하면 URL에 해시(#)가 포함되지 않으므로 더 깔끔한 URL 구조를 가질 수 있습니다. 하지만 배포된 애플리케이션에서 특정 URL로 직접 접근하면 서버는 해당 파일을 찾을 수 없다고 생각하여 404 오류를 반환하게 됩니다. 이는 서버가 모든 경로를 애플리케이션의 진입점으로 리다이렉트하지 않기 때문입니다.
3. 해결 방법
이 문제를 해결하려면 서버가 모든 경로 요청을 index.html로 리다이렉트하도록 설정해야 합니다. Vercel을 사용하고 있으므로 프로젝트 루트 디렉토리에 vercel.json 파일을 생성하여 다음과 같이 설정할 수 있습니다.
{
"rewrites": [
{ "source": "/(.*)", "destination": "/" }
]
}- 설정 방법
-
프로젝트 루트 디렉토리 확인
먼저, 프로젝트 루트 디렉토리를 확인합니다. 일반적으로
package.json파일이 위치한 곳이 루트 디렉토리입니다.your-project/ ├── src/ │ ├── components/ │ ├── views/ │ └── ... ├── public/ │ ├── index.html │ └── ... ├── .gitignore ├── package.json ├── vercel.json └── ... -
vercel.json 파일 생성
프로젝트 루트 디렉토리에
vercel.json파일을 생성하고, 아래와 같이 내용을 작성합니다.{ "rewrites": [ { "source": "/(.*)", "destination": "/" } ] } -
배포
설정이 완료되었다면 Vercel에 프로젝트를 배포합니다. 이제 모든 경로 요청이
index.html로 리다이렉트되어 Vue Router의createWebHistory모드가 올바르게 동작합니다.
4. 결론
Vue.js 애플리케이션을 Vercel에 배포할 때 createWebHistory 모드를 사용하면 SEO에 유리한 깔끔한 URL 구조를 유지할 수 있습니다. 하지만 직접 URL로 접근할 때 404 오류가 발생할 수 있다는 점을 주의해야 합니다. 이 문제는 vercel.json 파일을 통해 간단히 해결할 수 있으므로, 설정 방법을 잘 숙지하여 원활한 배포를 진행하시기 바랍니다.
출처
