커뮤니T | Vercel 404 ERROR 해결

문제

React + Vite 프로젝트를 Vercel로 배포하는데 다른 페이지로 이동시에 404뜨는 경우가 발생하였다

구글링을 통해 알아보니 나와 같은 현상을 겪는 사람들이 많았고 결론적으로 이유는 Vite와 같은 클라이언트 측 라우팅 프레임워크에서는 페이지 전환이 클라이언트에서 이루어지기 때문에, 특정 URL로 접근하거나 새로고침을 할 때 서버가 해당 HTML 파일을 찾지 못해 나는 404 에러였다

 

vercel의 공식문서에도 Vite 사용시 나오는 에러를 다루는 부분이 있어서 참고를 했다!

Vite on Vercel

해결

프로젝트 파일 루트에 vercel.json 파일을 만들고 그 안에 아래와 같은 코드를 입력해준다

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

이 설정은 모든 경로 요청을 index.html로 리다이렉트하여 Vite의 클라이언트 측 라우팅이 정상적으로 작동하도록 한다!