Firebase Hosting에 created-react-app로 작성한 SPA를 호스팅했는데, 리로드시에 Page Not Found가 되어 버렸기 때문에 대책을 정리합니다.

추가

$ firebase init 때때로 이미지처럼 SPA URL의 거동을 설정할 수 있는 질문이 있는 것 같습니다.
"Configure as a single-page app..."부분입니다.

이것을 y + Enter 에서 firebase.json 규칙을 추가해주는 것 같습니다.

Firebase Hosting의 기본 동작

Firebase Hosting은 기본적으로 정적 index.html 파일을 읽는 것 같습니다. React는 react-router와 같은 라우팅 라이브러리를 사용하므로 실제로 index.html이 없습니다. 그래서 루트 디렉토리 이외에서 리로드를하면 이렇게 404를 반환합니다.

대책

firebase.json 파일의 hosthing 속성에 rewrites 규칙을 추가하여 공개 디렉토리 아래의 모든 액세스를 루트의 index.html을 읽으십시오.

Before

firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
  }
}

After

firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "/public/**",
        "destination": "/public.html"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

이제 404가 되지 않습니다.

참고

Page not found when reloading Angular page on Firebase