🖐️ 시작하며

현재 진행하고 있는 사이드 프로젝트를 디자이너와 백엔드 팀원들에게도 진행 상황을 보여주기 위해 Vercel로 테스트 배포를 진행했습니다. 배포는 정상적으로 잘 끝났기에 도메인에 접속해보니 메인 페이지는 정상적으로 확인이 가능했습니다. 다만, 이외의 라우터 접속시 아래 사진과 같은 오류가 확인되어서 이 오류를 해결해보았습니다.

해결 방법

우선 배포가 정상이였기에 프로젝트 빌드가 정상이라는 뜻이고 로컬 코드상에서는 문제가 없다는 얘기가 됩니다. 그래도 혹시 모르니 routing관련 코드들을 다시 한번 둘러보았습니다.

BrowerRouter안에 route path들도 정상이였고 로컬상에서도 라우팅이 정상적으로 작동하는걸 확인할 수 있었고 관련 내용을 서칭해보았습니다.

stackoverflow에서 관련 내용을 찾을 수 있었습니다.

프로젝트 루트 경로에 vercel.json 파일을 추가해주고 다음과 같이 코드를 작성한 후 함께 배포해주면 해결이 가능했습니다.

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

참조

vercel 공식 문서
https://vercel.com/docs/projects/project-configuration#rewrites

[Vercel Vite Error 404] Vercel Vite 배포시 라우터 새로고침 404 에러
https://velog.io/@hying/Vercel-Vite-Build-Error-Vercel-Vite-%EB%B0%B0%ED%8F%AC%EC%8B%9C-%EB%9D%BC%EC%9A%B0%ED%84%B0-%EC%83%88%EB%A1%9C%EA%B3%A0%EC%B9%A8-404-%EC%97%90%EB%9F%AC

Why does react-router not works at vercel?
https://stackoverflow.com/questions/64815012/why-does-react-router-not-works-at-vercel/65644138#65644138