Vite.config에 환경변수 넣기

보통 vite를 사용하여 리액트 프로젝트를 할 때 환경변수를

import.meta.env.VITE_DEVELOP

이런 식으로 불러와서 사용할 수 있습니다.

 

하지만 이런 식으로 불러오는 것은 기본적으로 클라이언트에서 사용되는 거라 서버에서 불러와지지 않습니다.

따라서 process.env를 통하여 가져와야 하는데 그냥 사용하면 환경변수가 적용이 안되게 됩니다.

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

vite.js 공식문서에 따르면 vite는 설정을 마친 뒤 어떻게 파일을 불러올 것인지 알 수 있기 때문에, 기본적으로 .env파일을 로드하지 않는다고 합니다. 

 

따라서 필요시 loadEnv 헬퍼를 사용해 .env 파일을 불러온 후 사용해야 합니다.

import react from "@vitejs/plugin-react";
import { ConfigEnv, defineConfig, loadEnv } from "vite";


export default ({ mode }: ConfigEnv) => {
  const env = loadEnv(mode, process.cwd(), "");

  const isDevelop = env.IS_DEVELOP === "true";

  return defineConfig({
    plugins: [
      react(),
    ],
    server: {
      https: isDevelop
        ? {
            ...
          }
        : false,
      host: "...",
      proxy: {
        ...
      },
    },
  });
};

이런 식으로 vite.config에서 환경변수를 사용할 수 있습니다.