[Vite.js] 모드에 따라 빌드 환경 변수 및 결과 폴더 변경

const 모드에 따라 빌드 환경 변수 및 결과 폴더 변경 = ( Param ) => {

💻 return Result;

필요 모드에 따라 환경 변수 파일 나누기

# .env (기본 환경 변수)
# .env를 베이스로 다른 모드의 환경 변수가 덮어 씌워짐
VITE_APP_TITLE=DefaultENV

# .env.production (빌드시 환경 변수)
# .env를 베이스로 빌드시 따로 변경이 필요한 환경변수 정의
VITE_APP_TITLE=BuildENV

# .env.prod-2 (커스텀 빌드 환경 변수)
# .env를 베이스로 prod-2에 대한 환경 변수 적용
VITE_APP_TITLE=Prod2ENV

 

모드에 따라서 빌드 저장 폴더 바꾸기

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

const defaultConfig = {
    plugins: [react()],
};

// dist폴더가 아닌 다른 폴더에 빌드를 생성해야하는 경우
const prod2Config = {
    plugins: [react()],
    build: {
        outDir: "./prod2dist",
        emptyOutDir: true,
    },
};

export default defineConfig((mode) => {
    // 입력된 Command에 따라 mode 값이 바뀜
    // mode = { mode: 'development, command: 'serve' } --> vite
    // mode = { mode: 'production', command: 'build' } --> vite build
    // mode = { mode: 'prod-2', command: 'build' } --> vite build --mode prod-2

    switch (mode.mode) {
        case "prod-2":
            return prod2Config;
        default:
            return defaultConfig;
    }
});

 

모드에 따른 빌드 명령어 설정하기

// package.json
// 커스텀 빌드 명령어 설정
{
    ...
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "build:prod2": "vite build --mode prod-2",
    },
    ...
}

 

📝 console.log( history )

 이전에 작성했던 환경 변수 외부참조와 관련하여 함께 찾았던 방식이다. 외부참조를 찾기 전 빌드를 내보낼 곳이 3곳이나 있었고 빌드할 때마다 .env.production 파일을 수정하기는 어려워 보였다. 그래서 Vite.js docs를 찾아보니 production 말고도 다른 모드로 환경변수 파일을 만들 수 있었다. production과 동일하게 .env 파일을 기반으로 덮어씌워지기 때문에 필요한 환경 변수들을 각 모드에 선언해서 사용할 수 있다.

 

 각 모드들을 빌드할 때마다 같은 폴더(dist)에 저장되기 때문에 각 모드들이 따로 저장되도록 vite.config 파일을 수정했다. 이전에 production 모드에 필요한 옵션들을 설정하기 위해 모드를 분리한 경험이 있어서 쉽게 해결할 수 있었다.

 

 마지막으로 항상 뒤에 --mode 옵션을 붙이기가 불편해서 package.json에 각 모드들 마다 명령어를 만들어 커맨드를 조금 더 쉽게 사용할 수 있도록 했다.

 

 결국 클라이언트가 직접 외부 파일을 통해 환경 변수를 수정하는 방식으로 바뀌어서 이 방식은 사용되지 못했지만 추후 다른 프로젝트에서 충분히 사용할 수 있을 것이라 생각이 든다.

 

참고

https://vitejs.dev/guide/env-and-mode.html

Vite

}