vite env 환경 변수 설정

CRA 보다 빌드 속도가 빠른 Vite로 토이 프로젝트를 진행하는 도중에 번들러에 따라 환경 변수가 다르게 설정되는 것을 알게 되어 정리해 보았습니다.

.env파일 환경변수 설정

기존 CRA에서 환경변수를 작성하고 불러올때 최상위 루트에 .env파일을 만들고 아래와 같이 작성하고 사용했습니다.

// CRA 환경변수 작성
REACT_APP_(지정할 변수명)
ex) REACT_APP_API_KEY

// CRA 환경변수 불러오기
process.env.(작성한 환경변수명)
ex) process.env.REACT_APP_API_KEY

하지만 firebase config 설정하던 도중에 값들을 CRA에서 환경변수를 작성했던거 처럼 Vite에서 환경변수를 작성하게되면 아래와 같은 에러가 나왔습니다.

Vite 공식문서를 참고해보면 Vite는 process가 아닌 import.meta.env 객체를 이용해 환경 변수에 접근할 수 있다는 것을 알 수 있었습니다.

// Vite 환경변수 작성
VITE_(지정할 변수명)
ex) VITE_API_KEY

// Vite 환경변수 불러오기
import.meta.env.(작성한 환경변수명)
ex) import.meta.env.VITE_API_KEY