Vercel 배포 시 새로고침 404 Error (Vite, 라우터 사용)

 

 

스터디를 진행하면서 했던 repository를 Vercel을 통해 배포하고 나서 도메인에 들어가 실행해봤다. 페이지네이션을 구현했기 때문에 2페이지에서 새로고침해도 여전히 2페이지를 새로 보여줘야하지만, 예상치 못하게 404 에러가 떴다.

확인해보지는 않았지만 <Route path="/*" element ={<Layout /> } /> 도 작동하지 않는다고 함...

 

스터디 팀장님이 에러를 발견하셨고 해결법도 친절히 알려주셨다.

 

새로고침을 통해 서버에 접근하게 되고, 이 때  SPA인 만큼 하나의 .html 안에서 라우팅 해줘야하는데 서버 경로에 따른 페이지 설정이 되지 않는 상태라서 우리 프로젝트의 .html을 가리키지 못한 상황이었다.

 

 

그래서 어느 경로로 통하던 하나의 .html을 가리킬 수 있도록 지정해주어야 한다.

 

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

vercel.json을 최상단에 파일로 추가해주고,  destination을 html로 지정한 뒤 배포해준다. 그러면 해결된다!

 

 

react-pagination-iota.vercel.app