vite.config.js에서 환경 변수 사용하기

프로젝트에서 쿠키를 사용하게 되었는데, 로컬 환경에서는 프론트엔드와 백엔드의 도메인이 달라 proxy를 적용해 주어야 했다. proxy 서버 URL은 환경 변수에 저장했다.

 

그런데 vite.config.js에 proxy 값으로 환경 변수를 설정했는데 proxy가 동작하지 않았고, 확인해 보니 환경 변수 값이 undefined로 나왔다. env 값을 제대로 가져오지 못한 게 원인이었다. import.meta.env를 사용했을 때 'ImportMeta' 형식에 'env' 속성이 없습니다.ts(2339)라는 오류가 떠서 Node에서 하듯이 process.env를 사용했는데 오류는 없었지만 값을 가져오지 못했다.

 

찾아보니 Vite는 .env 파일을 기본적으로 로드하지 않는다고 한다.

 

참고로 Vite는 Vite의 설정을 끝마친 뒤 어떻게 파일을 불러올 것인지 알 수 있기 때문에, 기본적으로 .env 파일을 로드하지 않습니다. 가령 root 또는 envDir 설정 값에 따라 어떻게 파일을 불러올 것인지 달라집니다. 다만 필요하다면 loadEnv 헬퍼를 사용해 .env 파일을 불러올 수도 있습니다.

 

 

위와 같은 이유로 Vite 설정에서 환경 변수를 사용하려면 loadEnv를 사용하여 env 파일을 로드해야 한다.

 

환경 변수 설정

(.env.development)

VITE_API_ROOT=http://...

 

 

Vite의 defineConfig가 제공하는 mode를 통해 현재 환경이 development인지 production인지 확인할 수 있다. loadEnv를 통해 현재 작업 디렉터리에 있는, mode에 해당하는 '.env' 파일을 찾아서 모든 환경 변수를 로드한다. 

(vite.config.js)

import react from '@vitejs/plugin-react-swc';
import { defineConfig, loadEnv } from 'vite';
import svgr from 'vite-plugin-svgr';

export default defineConfig(({ mode }) => {
  // 현재 작업 디렉터리의 `mode`를 기반으로 env 파일을 불러옴
  // 세 번째 매개변수를 ''로 설정하면 `VITE_` 접두사에 관계없이 모든 환경 변수를 불러옴
  const env = loadEnv(mode, process.cwd());
  return {
    plugins: [react(), svgr()],
    server: {
      host: '0.0.0.0',
      port: 3000,
      proxy: {
        '/api': {
          target: env.VITE_API_ROOT,
          changeOrigin: true,
        },
      },
    },
    resolve: {
      alias: {
        '@': '/src',
      },
    },
  };
});

 

 

이제 proxy가 잘 동작한다!

 

 

 

 

참고

https://ko.vitejs.dev/config/#using-environment-variables-in-config