vite.config.ts 설정에서 .env 환경변수 사용하기

Vite에서 기본적으로 .env 파일을 읽어오지 않는다.

이는 Vite가 기본적으로 Node.js의 process.env를 통해 환경 변수에 접근하는 전통적인 방식과는 다소 차이가 있다는 것을 의미한다.

즉, Vite는 기본 설정에서 .env 파일에 정의된 환경 변수들을 자동으로 process.env 객체에 로드하지 않으므로 vite.config.ts 파일에서 process.env 객체를 사용할 수는 있지만 사용자가 정의한 .env 파일에 포함된 환경 변수들은 사용할 수 없게 된다는 것과 같다.

실제로 console.log(process.env) 를 통해 실제 값을 확인해보면 .env 에 정의된 변수들은 담겨있지 않음을 쉽게 확인할 수 있다.

반드시 사용해야하는 경우에는 loadEnv 헬퍼를 아래와 같이 사용하여 불러올 수 있다.

// vite.config.ts
export default ({ mode }) => {
    // 현재 작업 디렉터리의 `mode`를 기반으로 env 파일을 불러옴
    // 세 번째 매개변수를 ''로 설정하면 `VITE_` 접두사에 관계없이 모든 환경 변수를 불러옴
    const env = loadEnv(mode, process.cwd(), '');

    return defineConfig({
        plugins: [react()],
        define: {
          __APP_ENV__: JSON.stringify(env.APP_ENV),
        },
        server: {
            proxy: {
                '/api': {
                    target: `${env.SERVER_URL}:${env.SERVER_PORT}`,
                    changeOrigin: true,
                },
            },
        },
    });
};

process, path 등을 사용하고 싶은 경우, @types/node 패키지를 설치해주어야하니 유의
(typescript 설정파일)

참고
https://ko.vitejs.dev/config/