환경변수

16.2.1. 파일 구조

프로젝트 루트/
├── .env                  # 모든 환경 공통
├── .env.development      # 개발 환경 (yarn dev)
├── .env.production       # 프로덕션 환경 (yarn build)
└── .env.local            # 로컬 오버라이드 (Git 미추적)

---

16.2.2. 변수 네이밍

• 클라이언트에서 접근 가능한 변수는 반드시 VITE_ 접두사를 사용합니다.
• VITE_ 접두사가 없는 변수는 클라이언트 번들에 포함되지 않습니다.

# .env.development
VITE_API_BASE_URL=http://localhost:8080/api
VITE_APP_TITLE=Flowin (개발)

# .env.production
VITE_API_BASE_URL=https://api.flowin.tienipia.com
VITE_APP_TITLE=Flowin

---

16.2.3. 타입 정의

환경변수의 타입을 선언합니다.

// src/env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string
  readonly VITE_APP_TITLE: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

---

16.2.4. 사용 방법

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL

주의

환경변수에 민감 정보(API 키, 시크릿)를 포함하지 않습니다. 클라이언트 번들에 그대로 노출됩니다.

---

16.2.5. 환경별 설정 우선순위

Vite는 다음 우선순위로 환경변수를 로드합니다.

우선순위	파일	설명
1 (높음)	.env.{mode}.local	모드별 로컬 오버라이드
2	.env.{mode}	모드별 설정
3	.env.local	로컬 오버라이드
4 (낮음)	.env	공통 기본값

• .env.local 및 .env.*.local 파일은 .gitignore에 포함해야 합니다.