파이어베이스 배포 + 깃허브 액션을 사용할 때 환경변수 적용안되는 오류

Posted Jul 10, 2024

By hyemin 3 min read

기존에 만들었던 프로젝트가 API KEY를 비롯해 숨겨져야하는 키들이 코드에 그대로 작성되어 있어, .env 파일을 사용하여 숨기도록 변경

vite를 사용한 프로젝트여서, 환경변수를 process.env가 아니라 import.meta.env.VITE_ 를 사용하여 불러왔다.

  
const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID
};

그리고 나서 바로 깃허브에 코드를 업로드하였으나, 다음과 같은 오류가 계속 발생하였다.

Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key).
  at of (index-dc08a5e4.js:473:364)
  at W (index-dc08a5e4.js:473:412)
  at ai.instanceFactory (index-dc08a5e4.js:1508:354)
  at lk.getOrInitializeService (index-dc08a5e4.js:263:2810)
  at lk.initialize (index-dc08a5e4.js:263:2167)
  at VC (index-dc08a5e4.js:848:167)
  at _I (index-dc08a5e4.js:1523:424)
  at index-dc08a5e4.js:1538:321Understand this error

.env 파일은 내 로컬에만 존재하기 때문에, firebase는 .env 파일을 읽을 수 없기 때문에 발생한 오류이다.

구글링 해보니, 나와 같은 겪은 사람의 글이 있어 참고해서 오류를 해결했다.

먼저, 해당 프로젝트의 깃허브 레포지토리에 들어가 Settins -> secrets and variables -> Actions -> New repository secret 의 순서를 통해 env의 키를 등록해야한다. 깃허브가 자동으로 배포하는 액션을 수행할 때 레포지토리의 시크릿 키를 읽을 수 있도록 설정하는 것이다.

그리고, 깃허브 액션을 위한 .yml 파일에 환경변수의 값을 추가하면 된다.

나의 경우에는 firebase-hosting-merge.yml, firebase-hosting-pull-request.yml 두 가지 파일이 있어 모두 환경 변수의 값을 추가해주었다.

  
env:
  VITE_FIREBASE_API_KEY: $
  VITE_FIREBASE_AUTH_DOMAIN: $
  VITE_FIREBASE_PROJECT_ID: $
  VITE_FIREBASE_STORAGE_BUCKET: $
  VITE_FIREBASE_MESSAGING_SENDER_ID: $
  VITE_FIREBASE_APP_ID: $

전체 코드

  
# 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:
      - main
env:
  VITE_FIREBASE_API_KEY: $
  VITE_FIREBASE_AUTH_DOMAIN: $
  VITE_FIREBASE_PROJECT_ID: $
  VITE_FIREBASE_STORAGE_BUCKET: $
  VITE_FIREBASE_MESSAGING_SENDER_ID: $
  VITE_FIREBASE_APP_ID: $
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm install && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "$"
          firebaseServiceAccount: "$"
          channelId: live
          projectId: react-shop-app-4692d