.env
환경변수는 번들러에 따라 다르게 설정된다는 사실 (프로젝트에 맞는 설정이 필요한 것이었다)
알게된 계기는 프로젝트 실습이었다.(이래서 역시 이것저것 만들어봐야 하나 싶다)
가장 흔하게 리액트앱을 만드는 CRA (create-react-app)의 경우 .env
파일에 REACT_APP_
을 prefix로 써야 리액트 앱이 인식할 수 있다.
그리고 앱에서 process.env.
으로 접근하여 사용할 수 있었다.
하지만 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
하위에 있지 않다는 사실을 깨달았다.
누군가는 나와 같은 실수를 하지 않길 바라며 🥲
도움 많이 되었습니다. 감사합니다.