Vercel에서 배포한 SPA 새로고침 시 발생하는 404 에러 해결하기

문제 상황

배포한 React 프로젝트에서 테스트 해보던 중, ' /summary/:roomId ' 페이지에서 새로고침을 했을 때 위와 같이 404 NOT_FOUND 에러가 발생하였다. 

프로젝트는 React Router을 사용해 라우팅이 구현되어 있었고, Vercel로 배포된 상황이었다.

 

원인

새로고침을 하거나 주소창에 경로를 직접 입력하면, 브라우저는 Vercel 서버로 해당 경로에 대해 HTTP GET 요청을 보낸다. 

 

하지만 SPA에서는 React Router와 같은 클라이언트 라우팅 라이브러리를 사용하여 경로를 처리한다. 브라우저는 서버에서 한번만 index.html을 로드한 후, 이후엔 라우팅 라이브러리가 경로에 따른 페이지를 동적으로 렌더링한다. 

 

서버는 진입점인 index.html 외에는, 하위 경로(/summary/:roomId)에 대한 리소스를 찾을 수 없기 때문에 결국 404 Not Found 에러를 반환하게 된다.

 

해결

Vercel에서 모든 경로에 대해 index.html를 반환하도록 하여, 클라이언트에서 경로를 처리하게 하여 해결할 수 있다.

 

프로젝트 루트에 vecel.json 파일을 생성한 뒤 다음과 같이 작성해준다. 이는 모든 경로에 대해 루트 경로(" / ")로 rewrite하겠음을 의미한다. 

// vercel.json
{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

 

 

참고

https://stackoverflow.com/questions/71378572/404-not-found-on-vercel-deployment

https://woodstock.hashnode.dev/spa-404