Vite React 프로젝트 환경변수 설정방법 (.env)

 

 

vite는 기본으로 dotenv를 사용해 환경변수 파일 (.env.local, .env.prod 등)을 가져오기 때문에,

import dotenv/config 등을 선언할 필요가 없다.

 

Vite에서 주의할 점은 보통의 node.js 나 create-react-app으로 만들어진 프로젝트처럼

process.env를 사용하지 않고,

import.meta.env 를 사용하는 것이다.

또 변수명은 꼭 VITE_ 로 시작해야한다.

(그렇지 않으려면 별도의 dotenv 설정을 해야함)

위의 것들이 지켜지지 않으면 process not found 오류가 발생한다.

 

https://ko.vitejs.dev/guide/env-and-mode

Vite

 

 

firebase configuration을 가져오는 방식을 예로 들면 아래와 같다.

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  databaseURL: import.meta.env.VITE_DATABASE_URL,
  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 app = initializeApp(firebaseConfig)
const firestore = getFirestore(app)

export { app, firestore }

 

.env 파일에 실제 값 넣어줄때는 쌍따옴표는 제거 가능하다. .env 파일은 git에 올라가지 않도록 .gitignore에 추가하는 것을 잊지 않는다.