환경변수와 모드

환경변수와 모드 (Env Variables and Modes)

Vite는 특별한 import.meta.env 객체 아래 몇 가지 상수를 노출해요. 이 상수들은 개발 중에는 전역 변수로 정의되고, 빌드 시점에는 정적으로 치환되어 트리 셰이킹이 효과적으로 동작하게 해 줘요.

출처: Vite — Env Variables and Modes

내장 상수

모든 상황에서 사용할 수 있는 내장 상수가 몇 가지 있어요.

import.meta.env.MODE : string, 앱이 실행 중인 모드.
import.meta.env.BASE_URL : string, 앱이 서빙되는 base URL. base 설정 옵션으로 결정돼요.
import.meta.env.PROD : boolean, 앱이 프로덕션에서 실행 중인지(NODE_ENV='production'으로 dev 서버 실행 또는 NODE_ENV='production'으로 빌드한 앱).
import.meta.env.DEV : boolean, 앱이 개발 모드에서 실행 중인지(항상 PROD의 반대).
import.meta.env.SSR : boolean, 앱이 서버(SSR)에서 실행 중인지.

이 상수들을 조건문에 쓰면, 프로덕션 빌드에서 불필요한 코드가 제거될 수 있어요.

if (import.meta.env.DEV) {
  // 프로덕션 빌드에서 tree-shaken 되는 코드
  console.log('Dev mode')
}

환경변수

Vite는 .env 파일의 환경변수를 import.meta.env 객체 아래 문자열로 자동 노출해요. VITE_ 접두사를 붙인 변수만 Vite 번들링 후 클라이언트 소스 코드에 노출돼요. 실수로 민감한 환경변수가 클라이언트에 새는 것을 막으려면 이 접두사를 신중히 써야 해요.

# .env
VITE_SOME_KEY=123
DB_PASSWORD=foobar

위처럼 정의하면 VITE_SOME_KEY의 값 "123"은 클라이언트에 노출되지만, DB_PASSWORD는 노출되지 않아요.

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

환경변수 접두사를 직접 바꾸고 싶다면 envPrefix 설정 옵션을 사용할 수 있어요.

파싱 주의. 위 예시에서 VITE_SOME_KEY는 숫자처럼 보이지만 파싱되면 문자열로 돌아와요. 불리언 환경변수도 마찬가지예요. 코드에서 쓸 때는 원하는 타입으로 변환해 주는 걸 잊지 마세요.

보안. VITE_* 변수에는 API 키 같은 민감 정보를 넣으면 안 돼요. 이 값들은 빌드 시점에 소스 코드에 번들링되기 때문이에요. 프로덕션에서는 백엔드 서버나 서버리스/엣지 함수에서 민감 값을 안전하게 처리하는 쪽을 고려하세요.

환경변수와 모드