React Firebase Deploy Git Action으로 자동화 하기

개인 프로젝트로 React를 이용해 프로젝트를 진행하고 있는데 "비용적인 문제 + firebase CLI를 이용한 간편한 배포" 이 두 가지 이유 때문에 firebase를 통해 프로젝트를 hosting하기로 결정했다.

1. Firebase CLI 설치

먼저, firebase CLI를 설치해주어야 한다. 설치는 'firebase-tools'라는 package를 설치해주면 된다.

npm install -g firebase-tools

2. Firebase 프로젝트 생성하기

React 프로젝트와 연동할 firebase 프로젝트를 생성해준다.

3. Firebase login

firebase login

위 명령어를 입력해주면 먼저 로그인을 하는 창이 나온다. 자신이 연동할 계정으로 로그인해주면 된다.

3. Firebase init

package를 설치하고 로그인도 완료했다면 이제 firebase 프로젝트와 react 프로젝트를 연동해준다. 프로젝트의 root 폴더에서 아래 명령어를 실행해준다.

firebase init

Firebase 설정하기

1. 먼저 타겟 디렉토리에 어떤 firebase feature를 적용시킬 것인지 물어본다.

현재 firebase를 통한 react web hosting, 그리고 이를 git action을 통해 자동화 하는 것을 목표로 하고 있기 때문에 "Hosting: Configure files or Firebase Hosting ad (optionally) set up Github Action deploys" 옵션을 선택해준다.

를 이용해 선택하고 로 다음 단계로 넘어가면 된다.

 

2. 이제 기존 프로젝트를 사용할 것인지 새 프로젝트를 생성할 것인지 물어보는데 기존 프로젝트를 이용한다고 선택하면 된다.

 

3. 그 다음은 배포 파일의 위치를 물어본다. default 값은 'public'인데 react 프로젝트의 경우 최종적으로 업로드할 번들이 'bulid' 디렉토리에 있기 때문에 build를 입력해준다.

 

4. Configure as a single-page app (rewrite all urls to /index.html)? 라는 질문에는 No를 답한다. 이 이유에 대해서는 좀 더 공부가 필요할 것 같다.

 

5. 이제 "Set up automatic builds and deploys with GitHub?" 라는 질문이 등장하는데 이때 y를 대답하고 이어서 firebase에 github을 연동하는 것을 수락하는 창이 뜰 것이다. 수락을 허용해준다.

 

6. 연동할 repository 정보를 입력하라고 뜨는데 username/repository name 형식으로 입력해주면된다.

  ? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)

 

7. deploy 전에 어떤 script를 실행할 것인지 물어보는데 나의 경우 yarn && yarn build를 입력했다.

  ? What script should be run before every deploy? (npm ci && npm run build) yarn && yarn build

사실 처음에는 default 값으로 주어지는 npm을 사용했는데 자동 배포 workflows npm ci 실행 과정에서 package version 끼리의 충돌이 일어나서 결국 yarn으로 바꿔주었다. yarn으로 바꾸었더니 warning만 뜨고 package 설치에 성공하였다.

 

8. PR (Pull Request)를 통한 branch merge가 일어날 때도 자동 배포를 할 것이냐고 물어보는데 Y라고 대답하면 된다.

  ? Set up automatic deployment to your site's live channel when a PR is merged? Y

 

9. 어떤 branch와 연동할 것이냐는 질문을 해주는데 나의 경우 master branch와 연결해주었다. 각자 어떤 branch에 push 혹은 PR할 때 배포를 진행할 것인지 결정해 입력해주면 된다.

  ? What is the name of the GitHub branch associated with your site's live channel? (master)

 

여기까지 진행하면 .github/workflows/ path 안에 firebase-hosting-merge.yml 파일과 firebase-hosting-pull-request.yml 파일이 생성된다.

firebase-hosting-merge.yml

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - master
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: yarn && yarn build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MYUNI_REACT }}'
          channelId: live
          projectId: myuni-react

두 파일 중 하나 파일을 예시로 살펴보면

1. name: workflow 이름
2. 'on' : 언제 workflow를 실행할지 설정해주는 것으로 master 브랜치에 push가 일어날 때 해당 workflow를 실행한다는 뜻이다.
3. jobs는 해당 workflow가 수행할 task들로 "build_and_deploy"라는 이름의 task를 실행하겠다는 뜻이다.

4. runs-on은 task들을 수행할 OS 환경이다.
5. steps는 "build_and_deploy"라는 job이 수행하는 각 단계가 정의된 것이다.

📌 uses는 github에서 제공하는 이미 만들어진 action을 지정할 때 사용된다.