https://ko.vitejs.dev/guide/env-and-mode Vite의 환경 변수와 모드에 대해 공부해 보겠습니다.
환경 변수
Vite는 import.meta.env 객체를 이용해 환경 변수에 접근할 수 있도록 하고 있으며, 이는 빌드 시 정적으로 대체됩니다. 기본적으로 아래와 같은 환경 변수를 제공합니다:
-
import.meta.env.MODE: {string} 현재 앱이 동작하고 있는 모드입니다.
-
import.meta.env.BASE_URL: {string} 앱이 제공되는 베이스 URL이며, 이 값은 base 설정에 의해 결정됩니다.
-
import.meta.env.PROD: {boolean} 앱이 프로덕션에서 실행 중인지 여부입니다(개발 서버 실행 혹은 프로덕션 빌드 시 NODE_ENV='production'로 설정).
-
import.meta.env.DEV: {boolean} 앱이 개발 환경에서 실행 중인지 여부이며, 항상 import.meta.env.PROD와 반대되는 값을 가집니다.
-
import.meta.env.SSR: {boolean} 앱이 서버에서 실행 중인지 여부입니다.
환경 변수는 어디서 설정하는가?
.env
Vite는 프로젝트 루트에 있는 .env 파일을 자동으로 로드하여 환경 변수를 설정합니다. 여러 환경에 따라 별도로 환경 변수 파일을 만들 수 있으며, 파일 이름은 아래와 같이 사용합니다.
- .env → 모든 환경에서 공통으로 사용
- .env.local → 로컬 환경에서만 적용 (Git에 포함되지 않음)
- .env.development → 개발 환경에서 사용 (NODE_ENV=development)
- .env.production → 프로덕션 환경에서 사용 (NODE_ENV=production)
Vite 환경 변수는 반드시 VITE_ 접두어로 시작해야 클라이언트 측에서 노출됩니다.
vite.config.js
vite.config.js 파일은 Vite의 설정 파일로, Vite 빌드 및 개발 환경을 설정하는 곳입니다. 여기서 mode를 직접 설정하거나, 특정 환경에 맞는 옵션을 설정할 수 있습니다. 하지만, 직접 환경 변수를 정의하지는 않습니다. 대신, .env 파일에서 불러온 환경 변수를 참고하거나, mode에 따른 다른 설정을 할 수 있습니다.
예시)
import { defineConfig } from 'vite';
export default defineConfig(({ mode }) => {
return {
define: {
// mode에 따라 API_URL을 다르게 설정하는 코드
'process.env.API_URL': mode === 'development' ? 'http://localhost:3000' : 'https://api.example.com',
},
};
});