.env

문자열은 반드시 ' 또는 " 없이 작성해야 해
.env, meta.env에서는 = 오른쪽에 따옴표 사용 금지!

---

올바른 작성 예시 (.env 또는 meta.env)

VITE_GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
VITE_GOOGLE_CLIENT_SECRET=your-google-client-secret

• GOOGLE_로 시작해도 되지만, Vite에서는 반드시 변수 이름이 VITE_로 시작해야 브라우저에서 접근 가능

 잘못된 예시

GOOGLE_CLIENT_SECRET='비밀번호'   ← ❌ 따옴표 X
GOOGLE_CLIENT_SECRET="비밀번호"   ← ❌ 따옴표 X

이렇게 쓰면 실제 값에 '비밀번호' 혹은 "비밀번호"가 문자열 안에 포함돼버려서 토큰 요청 시 인증 실패

---

프론트에서 불러올 때

const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID;

이 구조에서 VITE_로 시작해야 Vite가 빌드시 환경변수를 포함

---

올바르게 불러왔는지 확인하려면

console.log(import.meta.env); // 전체 출력
console.log(import.meta.env.VITE_GOOGLE_CLIENT_ID); // 개별 확인

 

---

callback URL도 .env에서 관리?

가능

VITE_GOOGLE_REDIRECT_URI=http://localhost:5173/oauth/google/callback

그리고 프론트 코드에서:

const redirectUri = import.meta.env.VITE_GOOGLE_REDIRECT_URI;

이렇게 하면 dev / prod 환경에 따라 redirect URI 바꾸기도 쉬움

---

.env 파일 이름은 꼭 meta.env?

NO!

Vite에서 사용하는 공식 환경 변수 파일명:

.env	기본값 (모든 환경 공통)
.env.development	개발 전용
.env.production	배포 전용
.env.local	로컬 전용 (Git에 커밋 안 함)

meta.env도 가능은 하지만, Vite가 자동으로 인식하진 않는다.
→ 이름을 .env.local 등으로 바꾸는 걸 권장!

---

import.meta.env vs import.env

• import.meta.env → Vite에서 무조건 이걸 사용
• import.env → 불가능. JavaScript에서 import.env는 존재하지 않음.

console.log(import.meta.env.VITE_GOOGLE_CLIENT_ID); // OK

---

 

배포 시 어떤 .env?

.env	모든 환경 공통	낮음
.env.production	배포 시 자동 사용됨	✅
.env.local	로컬 전용 (Git에 커밋 X)	높음
.env.production.local	배포용 로컬 오버라이드	최우선

배포 시엔 .env.production 또는 .env.production.local 파일을 사용

---

배포 주소 설정

# .env.production
VITE_GOOGLE_REDIRECT_URI=https://yourdomain.com/oauth/google/callback
VITE_API_BASE_URL=https://api.yourdomain.com

이렇게 하면 빌드할 때 자동으로 이 값들이 import.meta.env로 포함돼.

---

개발 중엔?

# .env.development 또는 .env
VITE_GOOGLE_REDIRECT_URI=http://localhost:5173/oauth/google/callback
VITE_API_BASE_URL=http://localhost:8080

---

Vite가 빌드 시 자동 인식하는 구조

vite build --mode production

• → .env.production 자동 적용
• .env.production.local 있으면 그것이 최우선으로 덮어씀

.env.production	배포용 설정 작성 (VITE_ 접두사 필수)
.env.production.local	서버에 직접 배포 시 민감한 값 오버라이드
.env만 쓰면?	모든 환경에 공통 적용되므로 위험할 수 있음