[Vite] vite.config.js에서 환경 변수 불러오기

얼마 전에 사이드 프로젝트 팀에 중간 합류했다. 기존에는 로컬 서버를 띄워놓고 테스트를 해왔는데, 며칠 전에 서버 개발자 분께서 서버를 배포하셔서 이제 배포된 서버에서 테스트 할 수 있게 되었다. 코드를 보니 이전에 작업하시던 프론트 개발자 분께서 CORS 에러에 대해 proxy 설정으로 대응해놓으셨다.

"/back": {
	target: "http://localhost:8000",
	changeOrigin: true,
	rewrite: (path) => path.replace(/^\/back/, ""),
},

 

이제 실서버 주소를 적어야 하는데, 노출 방지를 위해 .env 파일에 환경변수를 등록해놓고 이를 불러와서 아래와 같이 쓰고자 했다.

"/back": {
	target: import.meta.env.VITE_API_URL,
	changeOrigin: true,
	rewrite: (path) => path.replace(/^\/back/, ""),
},

 

그리고 마주친 에러... 역시 한 번에 될 리가 없지

TypeError: Cannot read properties of undefined (reading 'VITE_API_URL')

환경 변수를 불러올 수 없다.. import.meta.env는 클라이언트 단에서 사용하고, vite.config.js는 서버 단에서 사용하기 때문에 읽을 수가 없는 것 같다. 공식 문서를 확인해보니 아래 내용이 있었다.

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

 

기본적으로 .env 파일을 불러오지 않기 때문에 필요할 때 loadEnv 헬퍼를 사용해서 불러오면 된다고 한다.

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

 

loadEnv 헬퍼는 cwd(Current Working Directory)의 mode를 기반으로 env 파일을 불러온다. mode는 development 환경인지 production 환경인지를 구분하는 것 같다.

 

위와 같이 코드를 수정하니 정상 작동한다!