React 프로젝트 배포 새로고침 404 오류 (firebase hosting, netlify 해결법)

SPA (Single Page Application)에서는 전체 웹사이트가 주로 단 하나의 index.html 페이지로 구성되어있음
이는, 사용자가 애플리케이션 내에서 이동할 때 전체 페이지를 새로 불러오지 않고, 현재 페이지의 일부만 바꿔줌

사용자가 브라우저의 주소 표시줄에 직접 특정 경로 입력하거나 새로고침을 할 경우, 웹 서버는 404 에러를 반환
(SPA 구조에서는 이러한 각 경로에 대한 실제 파일이 존재하지 않기 때문)

 

-> 해결법 : 모든 경로에 대한 요청을 index.html 파일로 리디렉션하도록 설정

 

1. netlify

public 밑에 _redirects 파일을 생성해주고, /* /index.html 200 작성해주기

 

2. firebase

firebase.json 설정에 rewrites를 추가해주기

 

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [           //Firebase에서 제공하는  SPA 라우팅 문제를 해결 기능
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}