Firebase Hosting을 사용할 때 Next.js프로젝트 빌드 시 Github Action으로 환경변수 주입하는 방법

왜 굳이 환경변수를 Github Action으로 주입해야되는가?

Vercel을 사용하면 환경변수를 콘솔에서 쉽게 추가할 수 있지만

Firebase Hosting은 그런거 없다. 애초에 정적 배포를 위한 사이트여서

서버 통신을 고려한 서비스 배포에 무리가 있다.

API baseUrl 같이 예민한 정보를 노출하라고 만든게 아닌 것이다.

(최근 이런 고충을 해결하는 Firebase App Hosting이라는 신기능이 나온거 같긴 하다.)

 

하여튼 그래도 우리 회사처럼 FireStore를 쓰는터라

굳이굳이 어거지로 Firebase Hosting으로 웹앱을 호스팅해야겠다면

API baseUrl을 환경변수화 해놓고, 이를 깃허브 원격저장소의 특정 브랜치(보통 main)에 머지할 때

github Secret에 있는 환경변수를 가져다가 firebase hosting 배포를 해줄 수 있다.

 

 

.github/workflows 경로를 만들고 yml파일을 만들기

해당 경로로 yml파일을 만들면 깃허브에 머지될 때 깃허브 액션에 의해 실행된다.

아래는 develop 서버에 머지될 시 테스트 서버 BaseUrl과 테스트서버 firebase config를 넣는 방법의 예시이다.

 

on:

  push:

    branches:

      - develop

부분은 언제 발동되는지에 대한 조건이다.

 

jobs로 어떤 액션들을 수행할지 명시할 수 있다.

step은 수행할 단계를 명시하고, run은 수행할 cli를 명시한다.

name: Deploy to Firebase Hosting on merge
on:
  push:
    branches:
      - develop
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - run: npm ci

      - name: Set environment variables
        run: |
          echo "NEXT_PUBLIC_FIREBASE_TEST_API_KEY=${{ secrets.NEXT_PUBLIC_FIREBASE_TEST_API_KEY }}" >> .env.local
          echo "NEXT_PUBLIC_FIREBASE_TEST_AUTH_DOMAIN=${{ secrets.NEXT_PUBLIC_FIREBASE_TEST_AUTH_DOMAIN }}" >> .env.local
          echo "NEXT_PUBLIC_FIREBASE_TEST_PROJECT_ID=${{ secrets.NEXT_PUBLIC_FIREBASE_TEST_PROJECT_ID }}" >> .env.local
          echo "NEXT_PUBLIC_FIREBASE_TEST_STORAGE_BUCKET=${{ secrets.NEXT_PUBLIC_FIREBASE_TEST_STORAGE_BUCKET }}" >> .env.local
          echo "NEXT_PUBLIC_FIREBASE_TEST_MESSAGING_SENDER_ID=${{ secrets.NEXT_PUBLIC_FIREBASE_TEST_MESSAGING_SENDER_ID }}" >> .env.local
          echo "NEXT_PUBLIC_FIREBASE_TEST_APP_ID=${{ secrets.NEXT_PUBLIC_FIREBASE_TEST_APP_ID }}" >> .env.local
          echo "NEXT_PUBLIC_FIREBASE_TEST_MEASUREMENT_ID=${{ secrets.NEXT_PUBLIC_FIREBASE_TEST_MEASUREMENT_ID }}" >> .env.local
          echo "NEXT_PUBLIC_TEST_BASE_URL=${{ secrets.NEXT_PUBLIC_TEST_BASE_URL }}" >> .env.local
      - run: npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_ANT_TIME }}"
          channelId: live
          projectId: ant-time-test
        env:
          FIREBASE_CLI_EXPERIMENTS: webframeworks

 

쉘 스크립트를 잘 안다면 다양한 작업을 액션에게 수행시킬 수 있을텐데 아직 잘 몰라서

나도 남이 만든 템플릿을 조금 변형해서 사용하는 수준으로 만들었다..

 

Node.js Express 강의 끝나면 CI/CD 강의를 들을 차인데,

그때 조금 더 자세하게 깃허브 액션에 대해 공부하고 포스팅해보겠다. 

어디까지 액션에게 수행시킬 수 있는지 아직 감이 잘 오진 않는다.

 

아래 공식문서에서 참고해보며 시험해볼 순 있지만,

당장은 환경변수 주입해주는 정도의 태스크만 수행할 수 있으면 됐다.

https://docs.github.com/ko/actions