[Vite] .env 환경변수 사용

Vite는 Node.js의 process.env를 통해 환경변수에 접근하는 방식과 달리 기본적으로 .env 파일을 읽어오지 않는다.

⇒ vite.config.ts 파일에서 process.env 객체를 사용할 수는 있지만, 사용자가 정의한 .env 파일에 포함된 환경변수는 사용할 수 없다.

 

환경변수를 사용해야 하는 경우, loadEnv 헬퍼를 사용

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

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

• loadEnv : 현재 작업 디렉터리의 mode를 기반으로 env 파일을 불러옴
• vite-plugin-html 을 설치하고 createHtmlPlugin를 통해 inject data에 값을 삽입해주면 해당 환경변수를 html에서 인자로 사용할 수 있다.