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

import.meta.env.VITE_DEVELOP

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

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

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

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에서 환경변수를 사용할 수 있습니다.

Vite.config에 환경변수 넣기