vercel 배포 시, 새로고침 또는 특정 URL에서 404 Not Found 에러 해결 방법

vercel에서 배포 후, 특정 링크로 이동하거나 새로고침을 할 때 404 Not Found가 뜨는 경우가 있다.

 

vercel은 기본적으로 index.html 파일을 루트 디렉토리에서 찾는다.

이때, vercel이 번들링 프로세스를 시작지점을 찾는데 어려움을 겪을 때 발생한다.

 

루트 디렉토리에 vercel.json 파일을 만들고, 아래 코드를 작성한다.

이미 깃허브에서 배포한 경우, 파일을 만들고 푸시하면 적용된다! 

 

1. routes 설정

첫번째 방법은 먼저 filesystem의 경로를 확인하고,

실제로 존재하는 파일들을 우선적으로 제공하고, 이외에 다른 모든 경로는 index.html로 리디렉션 하는 것이다.

{
    "routes": [{ "handle": "filesystem" }, { "src": "/.*", "dest": "/index.html" }]
}

 

2. rewrites 설정

이 방법은 모든 수신 URL 경로를 루트 경로로 다시 쓰도록 지시하는 방법이다.

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

 

 

참고자료

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

https://dev.to/stanlisberg/resolving-the-vercel-404-page-not-found-error-after-page-refresh-9b9