[vite] vite 로 vue3 번들링시 .env 환경변수 설정

Vite는 import.meta.env 객체를 이용해 환경 변수에 접근할 수 있도록 하고 있으며, 아래와 같은 환경 변수에 접근이 가능하다.

• import.meta.env.MODE: {string} 현재 앱이 동작하고 있는 모드 
• import.meta.env.BASE_URL: {string} 앱이 제공되는 베이스 URL이며, 이 값은 base 설정에 의해 결정.
• import.meta.env.PROD: {boolean} 앱이 프로덕션에서 실행 중인지 여부.
• import.meta.env.DEV: {boolean} 앱이 개발 환경에서 실행 중인지 여부이며, 항상 import.meta.env.PROD와 반대되는 값
• import.meta.env.SSR: {boolean} 앱이 서버에서 실행 중인지 여부.

혹은 .env 파일에 변수를 선언해서 가져와도 된다.

물론 접근 방식은  import.meta.env.변수이름 으로 가져와야 한다.

 

아래는  .env 파일 네이밍 설정 부분이다.

.env                # 모든 상황에서 사용될 환경 변수
.env.local          # 모든 상황에서 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수
.env.[mode]         # 특정 모드에서만 사용될 환경 변수
.env.[mode].local   # 특정 모드에서만 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수

보안 권고 사항

• .env.*.local 파일은 오로지 로컬에서만 접근이 가능한 파일이며, 데이터베이스 비밀번호와 같은 민감한 정보를 이 곳에 저장하도록 한다. 또한 .gitignore 파일에 *.local 파일을 명시해 Git에 체크인되는 것을 방지하도록 한다.
• Vite 소스 코드에 노출되는 모든 환경 변수는 번들링 시 포함되게 되기에 VITE_* 환경 변수에는 민감한 정보들이 포함되어서는 안된다.

참고로, Vite에서 접근 가능한 환경 변수는 일반 환경 변수와 구분을 위해 VITE_ 라는 접두사를 붙여 나타낸다. 

 

ex)

VITE_SOME_KEY=123
DB_PASSWORD=foobar

VITE_SOME_KEY 변수만이 import.meta.env.VITE_SOME_KEY로 접근이 가능. (VITE_ 라는 접두사가 누락되었기 때문에  DB_PASSWORD는 노출되지 않는다.)

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

또한 Vite는 dotenv-expand 를 사용해 기본적으로 환경 변수를 확장한다. 문법에 대해 더 알아보고 싶다면 이 문서를 참고하세요.

참고로 만약 환경 변수의 값에 $를 사용하고 싶다면 \를 사용해야 합니다.

KEY=123
NEW_KEY1=test$foo   # test
NEW_KEY2=test\$foo  # test$foo
NEW_KEY3=test$KEY   # test123

 

 

참고: 

https://vitejs-kr.github.io/guide/env-and-mode.html

Vite