Vite로 제작한 프로젝트를, vercel로 배포 후, lighthouse 테스트를 진행하던 도중, 메인 페이지(루트)는 제대로 뜨지만, 서브 페이지로 바로 접속을 시도하거나, 새로고침을 할 시에는 404 에러가 발생했다.
에러가 발생한 이유는, Vercel은 정적 웹 사이트 호스팅을 위한 도구이다. 그리고 내 프로젝트는 Vite(+React), 즉 SPA이기 때문에, 클라이언트 측에서 라우팅을 진행한다. 따라서 정적 웹 사이트 호스팅을 하는 Vercel은, 이러한 SPA의 경로를 인식하지 못해서 발생하게 된다. 따라서 프로젝트 상에서 존재하는 경로일지라도, Vercel은 존재하지 않는다고 판단하기 때문에 404 에러를 반환하는 것이다.
해결 방법
vercel.json
{
"rewrites": [
{"source": "/(.*)", "destination": "/"}
]
}루트 폴더에 위의 vercel.json 파일을 추가해 주면 해결할 수 있다.
