vercel 404 NOT_FOUND 에러 해결

vercel에 간단한 SPA 앱을 만들어서 배포했는데 아래와 같은 에러가 발생하였다.

 

 

test.com/about 같은 하위 URL로 접근했을 경우, 서버(vercel)는 해당 URL을 처리하는 방법을 모른다. SPA의 라우팅 처리가 아닌 해당 리소스를 찾으려고 하기 때문에 404 에러가 발생하는 것이다. 이럴 때는 vercel에 내 SPA 앱의 인덱스 경로를 설정해 주면 된다.

vercel rewrites를 참고해 vercel.json에 rewrite 설정을 하면 된다.

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

 

위의 rewrites 방법은 단순하지만 단점이 있다. 어떤 이유로 이미지나 번들, html에 직접 접근하지 못한다. 이럴 경우에는 routes 설정을 한다. 

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

 

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

Configuring Projects with vercel.json