리액트 앱(SPA)를 외부 배포 플랫폼(vercel, netlify 등)을 통해 배포했을 때, 새로고침하면 404 페이지가 뜨는 문제 원인 및 해결방법

🚫 문제가 발생하는 원인

리액트 앱은 / 가 아닌 곳에서 새로고침을 하면 404 페이지가 뜬다.

리액트는 SPA(Single Page Application)이므로 단 하나의 index.html을 가지고 라우팅 처리를 하는데 기본 경로 / 가 아닌 곳에서 새로고침을 하면 서버는 해당 경로의 리소스를 찾으려고 하기 때문에 404 에러가 발생한다.

예를 들어, /login/user 상태에서 새로고침을 하면 서버는 /login/user 라는 리소스를 찾으려고 하지만 실제로는 없기 때문에 404 에러를 뱉어내는 것이다.
즉, 존재하지 않는 요청을 보내는 것이다.

따라서 새로고침을 하면 (뭐를 보여줄지/어떤 경로로 연결할지) 서버에게 알려줘야 한다.

그것을 netlify에서는 public > _redirects 로 정의하고,
vercel에서는 vercel.json 파일을 통해 정의하여 해결할 수 있다.

🪄 해결 방법

netlify

public 폴더 안에 _redirects 파일을 (확장자명 없이) 생성하여 아래 내용을 입력한다.

/* /index.html 200

ㄴ 어떠한 경로로 들어와도 (/*) 200 status code를 내려주며, index.html 파일을 렌더링 하겠다는 의미

✅ 200 status code : 요청이 성공했음을 나타내는 성공 응답 상태 코드

vercel

최상단 폴더의 안에 vercel.json 파일을 만들어 아래 내용을 입력한다.

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

의미는 동일하다.
어떤 경로로 들어오더라도 기본 경로(index.html)을 렌더링하겠다는 뜻이다.