🚨 [React & Vite] Vercel 배포시 404 에러

2024년 10월 20일

1분

React + Vite + JS 프로젝트를 작업하고 Vercel에 배포를 하니 간헐적으로 404에러가 발생했다. 이유가 궁금해서 좀 더 테스트를 진행해보니 랜덤하게 발생하는게 아니고 navigate나 <Link>로 이동하지 않으면 해당 에러가 발생하는 것 같았다. 예를 들어 /signin 이라는 path에 접근할 때 버튼 클릭 등으로 이동하는게 아닌, 직접 url에 입력해서 이동하려하면 발생했다.

🚨 404 해결

해결은 매우매우 간단하게 해결했다. 프로젝트 루트 경로에 vercel.json 이라는 파일을 생성하고 아래 내용을 복붙한다.

{
  "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}