VITE 환경에서의 Firebase 초기화와 .env

1. git 저장소에 프로젝트를 올리기 위해 루트 디렉토리에 .env 생성 후 firebase config 정보 환경 변수로 설정

REACT_APP_FIREBASE_API_KEY=your_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
REACT_APP_FIREBASE_PROJECT_ID=your_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id
REACT_APP_FIREBASE_MEASUREMENT_ID=your_measurement_id

 

추가) VITE 환경에서는 .env 파일에 작성한 환경 변수 이름은 VITE_ 접두사를 붙여야 한다!

 - Vite 공식 문서: Vite의 환경 변수와 모드

 - 따라서, VITE_REACT_APP_FIREBASE_API_KEY 와 같이 수정해준다

 

추가) .env 파일에는 콤마(,) 및 따옴표(', ")가 들어가면 안된다!

 

2. .gitignore에 .env 추가

 

 

3. firebase.ts 수정

변경) VITE 환경에서는 import.meta.env 객체를 이용해 환경 변수에 접근할 수 있다!

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_REACT_APP_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env
    .VITE_REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_REACT_APP_FIREBASE_APP_ID,
  measurementId: import.meta.env.VITE_REACT_APP_FIREBASE_MEASUREMENT_ID,
};

// Firebase 초기화
const app = initializeApp(firebaseConfig);