우아하게 env사용하기 (in Vite)

손성호·2025년 8월 1일

목록 보기

1/3

서론

안녕하세요 Son입니다.
이번에 사내 admin-template에 기여한 내용입니다.
여러분들은 환경변수 파일을 어떻게 사용하시나요?
.env를 두고 cp명령어로 모드에따라 다른 환경변수에서 복사해 어플리케이션을 실행하지 않으셨나요?
NODE_ENV를 가지고 모드를 분기처리하지 않으셨나요?
스크립트에 옵션 하나만 추가하면 우아하게 env를 설정할 수 있습니다.
(단, Vite를 사용해야만 가능합니다. v2부터 사용가능하니 모든 버전에 사용가능합니다.)

Before

우아하지 않게 사용하는 방법입니다.

1. 실행 방식에 따라 읽는 환경변수 파일을 다르게 설정

이 방식은 개발자가 설정하는 방식입니다.

// vite.config.js
import { defineConfig } from 'vite';
import { config } from 'dotenv';
import { resolve } from 'path';

export default defineConfig(() => {
  const nodeEnv = process.env.NODE_ENV || 'development';
  
  // dotenv로 직접 로드
  config({ path: resolve(process.cwd(), `.env.${nodeEnv}`) });
  
  return {
    // 설정...
  };
});

이렇게 개발모드인지 확인하여 읽어들이는 환경변수파일을 설정했습니다.

{
  "scripts": {
    "dev": "NODE_ENV=development vite",
    "start": "NODE_ENV=production vite", 
    "build": "NODE_ENV=production vite build"
  }
}

package.json에선 실행스크립트를 이렇게작성하여 실행합니다.
build = 개발환경, start = production환경입니다.

2. 스크립트 명령어에 따라 env를 붙여넣기

{
  "scripts": {
    "dev:local": "cp env.local .env && vite --port 3000",
    "start": "vite --port 3000",
    "build": "vite build",
    }
}

스크립트에 따라 env파일에 내용을 바꾸는 방법입니다. 저희 admin-template에선 기존에 이렇게 사용하고 있었습니다.
이렇게 사용 시 느꼈던 문제점이 있습니다.
env내용이 실행방법에 따라 매번 바뀐다는 점입니다.
staging시에 불편함을 느껴 다른 방식을 알아보았습니다.

After

우아하게 환경변수파일을 설정해봅시다.
Vite는 기본적으로 --mode 옵션에 따라 환경변수 파일을 로드합니다.

Vite 공식문서 옵션 설명

공식문서 설명은 이러합니다.

".env뒤에 있는 이름과 모드옵션뒤에 이름을 맞추면 해당 env파일을 읽을 수 있다."
이를 바탕으로
.env.production, .env.development라는 직관적인 이름으로 환경변수 파일을 설정했습니다.
script명령어도 npm run dev:production, npm run dev:development로 설정했습니다.
그에 따라 기존에 npm run start의 경우 production 상태를 실행하겠단 의미로 중복되어 스크립트를 삭제했습니다. (기본 모드가 production입니다)

{
  "scripts": {
    "dev:production": "vite --port 3000 --mode production",
    "dev:development": "vite --port 3000 --mode development",
    "build": "vite build && tsc",
  }
}

명령어 별 실행 동작 차이입니다.
npm run dev:development 실행 시
npm development 모드 실행