[Vercel] SPA 새로고침 오류 해결방법

문제상황

루트 경로가 아닌 페이지에서 새로고침할 때 404에러가 뜨는 상황

 

원인

핀더펜의 경우 ssr을 지원하지 않으며, SPA로 구현되어 있기 때문에 어떤 경로에서 접근하든 루트 경로의 index.html 에서 리소스를 찾아야 한다.

 

그러나 현재 상황에서는 페이지 경로에 해당하는 위치에서 리소스를 찾으려고하기 때문에 리소스를 찾을 수 없다는 오류가 나는 것이다.

 

요약하면 https://fin-the-pen/home에서 새로고침하더라도 루트 경로의 index.html을 끌고와야하는데 현재는 /home에서 index.html을 찾고있어 오류가 나는 것이다.

 

해결 방법

github pages에 react 페이지를 배포해본 경험이 있다면 동일한 문제를 겪어봤을 것이다. github pages에서 문제를 해결하기 위해서는 index.html에서 url path를 수정하는 코드를 작성해줘야 하지만 vercel은 vercel에서 지원해주는 옵션을 정의하면 해결할 수 있다.

 

루트 경로에 vercel.json 파일을 추가한 다음 rewrites라는 속성을 정의해준다.

 

rewrites는 특정 페이지에서 가져올 리소스의 위치를 지정하는 옵션이다.

따라서

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

이렇게 저장하면 모든 경로에 대한 리소스를 루트 경로에서 가져오겠다는 뜻이 되어서 새로고침 오류를 해결할 수 있다.

 

참조

https://vercel.com/docs/projects/project-configuration

Configuring projects with vercel.json