Git Action을 통한 React Firebase 자동 배포시 환경변수 설정

Git Action을 이용해 React를 Firebase로 자동 배포 했더니 문제가 발생했다..

 

기존에 로컬에서 build하고 배포할 시에는 .env 파일에 숨겨두었던 환경변수들이 같이 빌드돼서 배포해도 문제가 없었는데 Git Action을 통해 배포할 경우 .env 파일은 .gitignore에 추가해두었기 때문에 반영이 되지 않았다.

 

따로 환경변수를 설정하고 싶을 경우 해당 repository의 Settings > Environments 에 가서 새 환경을 만들어주고 이후 Configure environment 단계에서 Environment secrets를 추가해주면 된다. 이 변수들은 오직 GitHub Actions에서만 사용될 수 있다고 설명 돼 있다.

이 환경 설정을 통해 추가로 지연이나 추가 권한 설정 등을 할 수 있는데 나같은 경우 개인이 진행하는 프로젝트이니 따로 설정을 하진 않았다.

workflows에 적용

environment를 생성했으면 이제 이 환경을 적용하겠다고 workflows의 파일에 설정해주어야 한다. Github Docs에 따르면 적용할 job의 하단에 이를 넣어주면 됐다.

# 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
    environment: firebase-deploy
    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

변수 적용

환경만 설정해주면 안되고 해당 환경에 저장해둔 변수를 사용하겠다고 명시를 해주어야 한다. 이는 env 하단에 변수명: '${{ secrets.변수명 }}$' 형태로 정의해주면 된다.

jobs:
  job1:
    env:
      FIRST_NAME: '${{ secrets.FIRST_NAME }}$'

최종본 (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
    environment: firebase-deploy
    env:
      REACT_APP_API_URL: '${{ secrets.REACT_APP_API_URL }}'
    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

똑같은 방식으로 firebase-hosting-pull-request.yml 에도 적용해주면 된다.

Reference

• Git Docs : 배포에 환경 사용
• Git Docs : Sercret 변수 적용 예시