Vite에 firebase 셋팅하기

.env 파일을 생성후 환경변수를 추가해야한다.

리액트에서 .env를 사용할때 prefix로 REACT_APP_을 사용해야 환경변수를 사용할 수 있다.

Vite를 사용한다면 아래의 코드처럼 VITE_ 를 사용해야 한다.

VITE_API_KEY=your_api_key
VITE_AUTH_DOMAIN=your_auth_domain
VITE_PROJECT_ID=your_project_id
VITE_STORAGE_BUCKET=your_storage_bucket
VITE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_APP_ID=your_app_id

Vite는 import.meta.env를 통해 환경 변수를 사용할 수 있도록 해준다.

그후 firebase sdk설정에서 firebaseConfig 를 아래와 같이 설정한다.

const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_APP_ID,
};

// Initialize Firebase
const firebase = initializeApp(firebaseConfig);

export default firebase;

main.tsx 에서 테스트를 하면, console이 잘 나오는걸 확인할 수 있다.