[react] vite에서 .env 값 불러오기

vite로 react를 사용하는 경우 .env 파일 내용을 불러오는 방법이다.

예를 들면 .env 파일에 아래 내용이 있다.

# .env
SERVER_URL=http://127.0.0.1:8080

이를 react 코드에서 사용하기 위해서 vite.config.ts 정보를 수정해야 한다. 아래와 같이 define을 추가하자.

[변경 전]

export default defineConfig({
  plugins: [react()]
});

[변경 후]

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

  return defineConfig({
    plugins: [react()],
    define: {
      'process.env': env,
    },
  });
};

그리고 react 코드에서 사용할 때는 아래와 같이 사용하면 된다.

const serverUrl = process.env.SERVER_URL; // http://127.0.0.1:8080