Firebase React App 배포하기 (+Error)

Firebase로 App 배포하기

0. 배포할 폴더를 GitHub repo에 push한 후 진행할 것

1. 배포할 폴더에서 firebase init

• 여러 옵션 중에 Github Action을 설정할 수 있는 Hosting 선택
  

2. project setup 시작

• 이미 존재하는 프로젝트를 사용
• 기존에 firebase에서 만들어 둔 프로젝트 선택
  

3. Hosting setup 시작

• 배포할 폴더 dist
• Single-page app인지?
• GitHub 저장소와 연결하여 코드가 변경될 때마다 자동으로 빌드하고 배포할건지
• index.html파일이 이미 존재하는데 덮어쓸건지
  
• 연동할 GitHub repo 이름
• 배포할 때마다 실행할 script
  • 배포할 때마다 수정사항을 반영하기 위해 npm install && npm run build 작성!
• 워크플로우 파일을 덮어쓰기 할건지
• main 브랜치에 merge할 때 자동으로 배포할지
• 기준이 되는 브랜치 이름
  

4. 완료! GitHub Actions에서 확인 가능하다.
그러나 에러가 발생했다..

🤔 문제

npm install && npm run build 명령어를 실행하도록 했는데 에러가 발생했다!

github workflow가 위치한 최상위 폴더에서 명령어를 실행한 것으로 보이는데 현재 내가 배포를 한 프로젝트의 파일 구조는 다음과 같다.

root/
├── .github/
│   └── workflow/
└── deployFolder/
│   └── dist/

npm install && npm run build를 실행하는 코드는 .github/workflows 내부에 있는 firebase-hosting 관련 파일 내부에 작성되어 있다.

그러나 내가 배포한 파일, 즉 해당 명령어가 실행되어야 하는 폴더는 최상위 폴더가 아닌 내부의 다른 폴더에 있는 것이다..

🤗 해결

해당 폴더로 이동해서 명령어를 실행하면 되는 것 아닐까?! 하는 마음에 폴더를 이동하는 명령어를 같이 작성해 주었다.

cd deployFolder && npm install && npm run build

과연 결과는 ?!

기존 오류 났던 부분은 통과했으나, 다시 또 오류가 발생했다 🥲

🤔 2차 문제

에러 메세지를 읽어보면 firebase.json을 찾을 수 없어서 발생한 문제이다. 이 역시 github에서 관리하는 최상위 폴더 내부에서 찾을 수 없어서 발생한 문제인 것 같다.

🤗 2차 해결

GitHub Actions는 기본적으로 루트 디렉토리에서 해당 파일을 찾으려고 한다. 이를 내가 원하는 폴더로 변경하기 위해서는 별도의 설정이 필요했던 것이다..!!

workflows에 있는 yml파일에 다음과 같이 entryPoint를 내가 원하는 폴더로 설정해주면 된다.

        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_REACT_TEST_APP_33F37 }}
          projectId: react-test-app-33f37
          entryPoint: 'deployFolder'

오류 없이 배포 완료 ! 👍