[Bolg-App] Github Action으로 firebase 자동배포 설정하기

Firebase 호스팅을 GitHub Actions를 통해 CI/CD 파이프라인에 연결하여, main 브랜치에 커밋이 발생할 때 자동으로 배포되도록 설정하려고 한다.

 

1. GitHub Secrets 설정

Firebase 배포를 위해서는 Firebase CLI 토큰이 필요한데 GitHub Secrets를 사용해 저장하면 된다.

 

1. 토큰 발급
로컬 환경에서 Firebase CLI를 통해 디플로이용 토큰을 발급받는다.

firebase login:ci

 

이 명령어를 실행하면 브라우저 창이 열리고 로그인 후, 콘솔에 토큰이 출력된다.

 

 

2. GitHub 프로젝트 설정 > Secrets 추가
GitHub 레포지토리로 이동 후, Settings > Security > Secrets and variables > Actions > New repository secret
버튼을 통해 FIREBASE_TOKEN이라는 이름으로 위에서 발급한 토큰을 저장한다.

• Name: FIREBASE_TOKEN
• Value: [위에서 발급받은 토큰 값]

2. GitHub Actions 워크플로우 파일 생성

프로젝트 루트에 .github/workflows 디렉토리를 만들고, 그 안에 firebase-deploy.yml 파일을 생성한다.

name: Firebase Deploy

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'  # node 버전은 실제 사용하는 버전에 맞게 조정

      - name: Install dependencies
        run: yarn install

      - name: Build
        run: yarn build

      - name: Deploy to Firebase
        run: firebase deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

 

• on.push.branches에 main을 지정 -> main 브랜치에 새로운 커밋이 푸시되면 워크플로우가 실행됨
• actions/checkout으로 소스코드를 가져온 뒤, Node.js를 설정하고 yarn install로 의존성을 설치
• yarn build로 React 앱을 빌드한 후, firebase deploy --only hosting 명령어로 Firebase 호스팅에 배포

3. 추가 사항

• 환경변수 관리: .env 파일 내 변수는 빌드 시점에 필요하기 때문에 GitHub Actions에서 Secrets로 저장했다.

main 브랜치에 커밋을 푸시할 때마다 자동으로 CI/CD 파이프라인이 실행되며, Firebase 호스팅으로 최신 빌드가 자동 배포되는줄 알았는데 몇가지 에러가 발생했다.

 

4. 에러 디버깅

• 환경변수를 가져오는 과정을 추가 설정해야 함
• build error를 확인해서 수정
• 워크플로우 파일에서 Firebase CLI가 설치단계 추가

최종 deploy 파일

name: Firebase Deploy

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    # 환경변수
    env:
      REACT_APP_API_KEY: ${{ secrets.REACT_APP_API_KEY }}
      REACT_APP_AUTH_DOMAIN: ${{ secrets.REACT_APP_AUTH_DOMAIN }}
      REACT_APP_PROJECT_ID: ${{ secrets.REACT_APP_PROJECT_ID }}
      REACT_APP_STORAGE_BUCKET: ${{ secrets.REACT_APP_STORAGE_BUCKET }}
      REACT_APP_MESSAGING_SENDER_ID: ${{ secrets.REACT_APP_MESSAGING_SENDER_ID }}
      REACT_APP_ID: ${{ secrets.REACT_APP_ID }}

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20.17.0'

      - name: Install dependencies
        run: yarn install

      - name: Build
        run: yarn build

      # Firebase CLI 설치
      - name: Install Firebase CLI
        run: npm install -g firebase-tools

      - name: Deploy to Firebase
        run: firebase deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}