[React] vite에서 환경변수 .env 설정하기

.env

환경변수는 번들러에 따라 다르게 설정된다는 사실 (프로젝트에 맞는 설정이 필요한 것이었다)
알게된 계기는 프로젝트 실습이었다.(이래서 역시 이것저것 만들어봐야 하나 싶다)

• 그리고 참고로, 환경변수는 빌드 타임에 embed 되기 때문에, 변경된다면 앱을 리로드 해주도록 하자.

CRA

가장 흔하게 리액트앱을 만드는 CRA (create-react-app)의 경우 .env 파일에 REACT_APP_을 prefix로 써야 리액트 앱이 인식할 수 있다.
그리고 앱에서 process.env.으로 접근하여 사용할 수 있었다.

Vite

하지만 Vite의 경우는 다르다.
일단 vite는 따로 dotenv 패키지를 설치해주지 않아도 되고, 공식 문서에 따르면 파일 prefix를 VITE_로 적어줘야 한다고 한다.
그리고 앱에서 import.meata.env.로 접근할 수 있다.

이전에 CRA와 node.js에서도 (dotenv 설치했을때) process.env로 접근했었기 때문에 당연히 vite앱에서도 동일하게 쓰다가 계속 에러가 나서 확인해보니, 잘못된 방법을 시도하고 있었다.
공식문서 config 부분에 해당부분의 설명이 잘 나와있었고, 원한다면 prefix 또한 커스텀 또한 가능 한 것 같다.

나는 이런식으로 vite에서 환경변수에 접근했다.

const {
	VITE_FIREBASE_API_KEY,
	VITE_FIREBASE_AUTH_DOMAIN,
	VITE_FIREBASE_PROJECT_ID,
	VITE_FIREBASE_STORAGE_BUCKET,
	VITE_FIREBASE_SENDER_ID,
	VITE_FIREBASE_APP_ID,
	VITE_FIREBASE_MEASUREMENT_ID,
} = import.meta.env

const firebaseConfig = {
	apiKey: VITE_FIREBASE_API_KEY,
	authDomain: VITE_FIREBASE_AUTH_DOMAIN,
	projectId: VITE_FIREBASE_PROJECT_ID,
	storageBucket: VITE_FIREBASE_STORAGE_BUCKET,
	messagingSenderId: VITE_FIREBASE_SENDER_ID,
	appId: VITE_FIREBASE_APP_ID,
	measurementId: VITE_FIREBASE_MEASUREMENT_ID,
}

그리고 내가했던 또 다른 실수는 .env파일을 src 하위 디렉토리에 넣었었다는 사실..
prefix 를 제대로 바꾼 뒤에도 왜 대체 안되는 걸까? 하고 끙끙대다가 root 하위에 있지 않다는 사실을 깨달았다.

누군가는 나와 같은 실수를 하지 않길 바라며 🥲