[React][Vite] 프로젝트 vercel 배포 후, 새로고침 404 에러

 

이전 글과는 다른 이슈

[React] vercel 배포시 http, https axios 통신 제대로 하는법

 

 

라우터 새로고침 404

NOT FOUND

리액트 바이트 프로젝트를 버셀을 이용하여 배포를 하였는데, "/"가 아닌 경로에서 새로고침을 하면 404 NOT FOUND error가 발생한다.

 

이는 verecl이 정적 웹사이트 호스팅을 하기 때문이다.

 

React는 SPA라서 동적 라우팅을 하는데, 동적 경로에서 새로고침을 하면, vercel은 물리적으로 해당되는 페이지를 찾는데, 그 페이지가 존재하지 않기 때문에 404 오류가 발생한다.

 

index.html을 가르키게 하면 해결된다.

해결법

 

vercel.json을 생성한다.(vercel.config가 아니다... 이거때문에 자꾸 vercel.config를 건들였는데 안되서 고생)

 

그리고 다음과 같이 작성한다. 이때, 백엔드 경로는 없어도 가능하다.

{
  "version": 2,
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/"
    },
    {
      "source": "/api/(.*)",
      "destination": "백엔드경로/api/$1"
    }
  ]
}

 

      "source": "/(.*)",
      "destination": "/"

 

모든 요청이 index.html를 가르키게 하는 것으로 해결이 가능하다.

tmi

오랜만에 vercel로 배포했는데, 바보같이 글씨를 제대로 못보고 한참 헤맸다...

이전에 배포했을 때, vercel.config로 해서 그런가...