vite 환경변수

번들링 도구에는 개발환경과 배포환경의 차이가 있고, 그것들을 환경변수로 관리를 합니다.

vite 에서는 import.meta 에 추가적으로 변수를 삽입합니다.

import.meta.env

dotenv

vite는 추가적인 환경변수를 불러오는 dotenv를 내장해서 사용하고있습니다.

.env                # 모든 케이스에서 로딩
.env.local          # 모든 케이스에서 로딩되지만 git에 추가되지 않습니다.
.env.[mode]         # 특정 모드에서만 로딩
.env.[mode].local   # 특정 모드에서만 로딩되지만 git에 추가되지 않습니다.

- 여기서 .env.production 은 최우선 순위입니다.

- 또한 기존의 환경변수를 .env 에서 정의한 변수가 덮어써지 않습니다.

- .env 파일은 vite 서버 실행시 한번 로드되기 때문에, 변경시 재시작 해야합니다.(사실 거의 자동재실행 잘됩니다)

- 환경변수는 client도 마찬가지로 노출시킬 수 있는데, 실수로 모든 변수가 노출을 막기 위해서 브라우저에 노출되는 환경변수는 VITE_ 프리픽스가 붙어야합니다.

- 프리픽스는 변경할 수 있습니다.

- VITE_ 가 붙은 변수는 클라이언트에 노출되기 때문에, 민감한정보는 반드시 포함하면 안됩니다.(저라면 개발환경, 배포환경의 차이정도만 사용할거 같습니다)

- .env.*.local 의경우에는 직접 .gitignore 에추가해야합니다.( 개발환경,배포환경 과 git 에노출될지의 여부는 다르기 때문에 .local 이 추가로 생긴거같습니다)

 

vite 는 또한 dotenv-expand 를 사용하기 때문에, 서로를 변수로사용하거나 특수기호를 사용할 수 있습니다.

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

 

타입스크립트 타입 추론하기 위해서는 .d.ts 파일을 추가해야합니다.

/// <reference types="vite/client" />

interface ImportMetaEnv {
    readonly VITE_APP_TITLE: string
    // more env variables...
}

interface ImportMeta {
    readonly env: ImportMetaEnv
}

모드

vite 는 개발서버는 자동으로 .env.development 를 로딩하고

vite build 시에는 .env.production 을 로딩합니다.

하지만 vite build --mode staging 처럼 의도적으로 변경할 수도 있습니다.