[배포] firebase app 배포 시 Page Not Found가 뜨는 현상

📢 왜 이러는 걸까요?

친구와 같이 제작중인 React App에서 router로 연결한 특정 페이지들이 지속적으로 404에러를 뱉는다. 이상하게 localhost로 테스트해보면 잘 나오는 페이지인데, firebase로 배포하면 해당 에러가 나타났다.

 

💾 레퍼런스

다행히도 우리와 같은 현상을 겪는 이를 stackoverflow에서 발견할 수 있었다. 

https://stackoverflow.com/questions/48826489/react-production-router-404-after-deep-refresh-firebase

React production router 404 after deep refresh firebase

 

💡 해결했습니다!

firebase.json에 hosting 내에 rewrites를 넣어주자. 그러면 배포시에 rewrites의 경로를 읽을 것이다.

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