[리액트] firebase 와 REACT react-router-dom 404 에러

Firebase Hosting에서 React 앱을 배포할 때, react-router-dom을 사용 중이라면 SPA(Single Page Application)의 특성 때문에 라우팅 문제로 404 에러가 발생할 수 있습니다. Firebase는 기본적으로 URL 경로에 직접 접근하면 해당 경로에 파일을 찾으려고 하기 때문입니다. 이를 해결하려면 Firebase의 rewrites 설정을 통해 모든 요청을 React 앱의 index.html로 리다이렉트하도록 설정해야 합니다.

해결 방법

1. Firebase Hosting 설정 파일 수정 Firebase 프로젝트의 firebase.json 파일을 열어 아래와 같이 설정하세요:
   • public 폴더는 React 앱이 빌드된 폴더(build 또는 dist)로 지정해야 합니다.
   • rewrites 섹션은 모든 경로(**)를 index.html로 리다이렉트하여 React의 라우터가 경로를 처리하도록 합니다.
2. firebase.json

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

   
   
4. React 앱 빌드 React 앱을 다시 빌드합니다.빌드 결과물은 기본적으로 build 폴더에 생성됩니다. 
    

   npm run build

5. Firebase에 배포 Firebase CLI를 사용하여 앱을 배포합니다.
   

   firebase deploy

   
   
   
6. 배포 후 테스트 배포된 앱에서 다른 경로에 직접 접근했을 때도 정상적으로 작동하는지 확인합니다.