.env 파일과 실행 모드

import.meta.env.DEV는 Vite에서 자동으로 설정해줍니다.
따라서 직접 설정할 필요는 없습니다.

환경 변수 | 의미 | 설정 필요 여부

import.meta.env.DEV	개발 서버(vite dev)에서 실행 중이면 true	❌ 자동 설정됨
import.meta.env.PROD	프로덕션 빌드(vite build)된 결과물이 실행 중이면 true	❌ 자동 설정됨
import.meta.env.MODE	현재 모드 ('development', 'production', 'test' 등)	❌ 자동 설정됨

---

import.meta.env.VITE_XXX는 직접 설정해야 함

위에 소개한 기본 환경 변수들과 다르게,
VITE_로 시작하는 커스텀 환경 변수는 .env 파일 등에 직접 작성해야 합니다.

예:

# .env
VITE_API_URL=https://api.example.com

사용:

const apiUrl = import.meta.env.VITE_API_URL;

내장 변수	import.meta.env.DEV	❌	Vite가 자동 제공
커스텀 변수	import.meta.env.VITE_API_URL	✅	.env에 직접 설정 필요

---

 

Spring Boot의 env 실행 모드 구분 방법

Spring Boot는 application.properties 또는 application.yml 설정 파일에서 spring.profiles.active를 기준으로 환경을 구분합니다.

1. 프로파일 설정 예시

# application.properties (기본)
spring.profiles.active=dev

또는

# application.yml
spring:
  profiles:
    active: dev

2. 실행 시 프로파일 지정 방법

# JVM 옵션으로 지정
-Dspring.profiles.active=prod

# 혹은 Gradle bootRun 시
./gradlew bootRun --args='--spring.profiles.active=prod'

---

특정 환경에서만 로그 출력하는 코드 예

import org.springframework.core.env.Environment;
import org.springframework.beans.factory.annotation.Autowired;

@Service
public class SomeService {

    @Autowired
    private Environment env;

    public void doSomething() {
        if (Arrays.asList(env.getActiveProfiles()).contains("dev")) {
            System.out.println("디버그 로그: 개발 환경에서만 출력");
        }
    }
}

dev일 때만 System.out.println() 사용	위처럼 env.getActiveProfiles()로 체크
에러 로그	log.error("에러 메시지", exception) 등으로 로그백(logback) 설정에 따라 남기기
민감한 정보 출력	❌ 절대 금지 (로그에도 기록 X)

 

@Profile() 사용하기

@Profile("dev")  // 'dev' 프로파일일 때만 이 클래스의 Bean이 등록됨
@Component
public class DevDataInitializer implements CommandLineRunner {

    @Override
    public void run(String... args) throws Exception {
        System.out.println("개발용 데이터 초기화");
    }
}

• application.yml 또는 실행 옵션에서 spring.profiles.active=dev로 설정된 경우에만 동작합니다.
• prod, test 등의 프로파일과 조합해서 설정할 수 있습니다.

---

사용 위치 예시

1. 서비스 클래스

@Service
@Profile("dev")
public class DummyMailService implements MailService {
    public void sendMail() {
        System.out.println("💌 실제 메일이 아니라 콘솔에 출력합니다 (개발)");
    }
}

@Service
@Profile("prod")
public class RealMailService implements MailService {
    public void sendMail() {
        // 실제 메일 전송 로직
    }
}

2. 설정 클래스 (e.g., DB 설정)

@Configuration
@Profile("test")
public class TestDataSourceConfig {
    @Bean
    public DataSource dataSource() {
        return new EmbeddedDatabaseBuilder()
            .setType(EmbeddedDatabaseType.H2)
            .build();
    }
}

---

여러 프로파일 지정

@Profile({"dev", "local"})

위처럼 dev 또는 local 환경일 때만 등록됩니다.

---

 Spring 실행 시 프로파일 설정

1. application.yml

spring:
  profiles:
    active: dev

1. 실행 명령

java -jar myapp.jar --spring.profiles.active=prod

---

문자열은 반드시 ' 또는 " 없이 작성해야 해
.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만 쓰면?	모든 환경에 공통 적용되므로 위험할 수 있음