[Firebase/오류해결] Firebase Hosting with Github Actions (env 오류)

진행하고 있던 사이드 프로젝트를 Firebase Hosting으로 배포하고, github actions도 적용하여 merge나 pull requests 발생 시 배포 환경에 변경사항이 자동 반영되도록 하려고 했다.

 

 

그런데 로컬에서 빌드 후 cli를 통해 배포할 때는 배포 사이트가 잘 동작했는데

github actions으로 배포만 하면 환경 변수를 못 찾아서 빈 화면이 되어버리는 것이었다...

 

 

배포를 위해서 환경 변수를 actions secrets에 추가하고 yml 파일에도 다음과 같이 env를 추가해 주었는데 동작하지 않았다.

 

// .github/workflows/firebase-hosting-merge.yml

name: Deploy to Firebase Hosting on merge
on:
  push:
    branches:
      - main
env: 
  ALGOLIA_APP_KEY: '${{ secrets.ALGOLIA_APP_KEY }}'
  ALGOLIA_SEARCH_KEY: '${{ secrets.ALGOLIA_SEARCH_KEY }}'
  FIREBASE_API_KEY: '${{ secrets.FIREBASE_API_KEY }}'
  FIREBASE_APP_ID: '${{ secrets.FIREBASE_APP_ID }}'
  FIREBASE_AUTH_DOMAIN: '${{ secrets.FIREBASE_AUTH_DOMAIN }}'
  FIREBASE_MESSAGING_ID: '${{ secrets.FIREBASE_MESSAGING_ID }}'
  FIREBASE_PROJECT_ID: '${{ secrets.FIREBASE_PROJECT_ID }}'
  FIREBASE_STORAGE_BUCKET: '${{ secrets.FIREBASE_STORAGE_BUCKET }}'
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          channelId: live
          projectId: Test

 

env를 추가한 위치가 잘못된 건가 싶어서 다른 곳으로 옮겨도 안 됐다. 검색해 보니 대부분 이렇게 하고 해결이 되는 것 같던데 나는 안 됐다............... 차이가 있다면 다들 CRA나 Vite로 프로젝트를 진행한 듯했고, 나는 Vanilla JavaScript로 구현했다는 것이다.

 

 

지난번에 다른 걸 잘못 만졌다가 FIREBASE_SERVICE_ACCOUNT 값이 초기화되어서 actions 배포 과정에서 오류가 난 적이 있었는데, 이를 보았을 때 secrets 값 자체를 못 읽어오는 것은 아닌 듯하고 배포 환경에서 env를 못 읽는 게 원인인 것 같다고 추측했다.

 

 

 

하루동안 열심히 찾아본 끝에 env 파일을 action 실행 시 touch를 통해 직접 생성하는 방법을 발견했다.

 

- name: create env
  run: |
    touch .env
    echo "KEY_1=${{ secrets.KEY_1 }}" >> .env
    echo "KEY_2=${{ secrets.KEY_2 }}" >> .env
    ...
  env:
    KEY_1: '${{ secrets.KEY_1 }}'
    KEY_2: '${{ secrets.KEY_2 }}'
    ...

 

이렇게 하니까 오류가 발생하지 않았다 ㅠㅠ

 

 

 

그리고 나는 환경 변수의 개수가 좀 많아서 항목 하나하나씩 주입하는 방식 말고 env 파일 전체를 한 번에 주입하는 방식으로 수정했다. 환경 변수를 한 번에 저장하고, 파일로 생성하는 것이다.

 

- name: get env
    run: |
      touch .env
      echo "${{ secrets.ENV }}" > .env

 

 

 

 

 

전체 코드

// .github/workflows/firebase-hosting-merge.yml

name: Deploy to Firebase Hosting on merge
on:
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: get env
        run: |
          touch .env
          echo "${{ secrets.ENV }}" > .env
        shell: bash
      - name: build application
        run: npm ci && npm run build
      - name: deploy application
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          channelId: live
          projectId: test

 

 

 

 

매우 감사한 참고자료!

https://23life.tistory.com/314