vite + react환경에서 환경변수 설정하기

기존의 CRA에서 process.env로 환경변수를 관리했어서, vite + react의 환경에서도 process.env를 통한 환경 변수 관리가되지 않을까.. 하고 시도를 해봤지만 실패하였다.

process.env가 뭐길래?

process.env는 노드에서 사용하는 전역객체고, 환경변수를 저장하기 위한 객체이다.

리액트에서는 REACT_APP_키워드를 붙여서 환경변수를 관리한다. CRA를 통해 만든 리액트의 프로젝트에서는, 기본적으로 환경변수를 사용할 떄 .env파일을 사용한다. 

 

이때 process.env객체에는 .env파일에 설정한 변수들이 자동으로 등록된다. 이떄 등록된 변수들은 자바스크립트에서 process.env객체를 통해 접근 할 수 있다!

---

공식문서에 따르면, 환경변수의 접두사를 VITE_로 적어주어야 하고,

import.meta.env 객체로 환경변수를 접근할 수 있었다. 그리고 마찬가지로 .env파일은 프로젝트에 위치해야 한다.

 

타입스크립트 환경이라면, import.meta.env를 타입스크립트에서 기본적으로 제공하지 않기 떄문에,

ImportMetaEnv와 ImportMeta 인터페이스를 정의해주어야 한다.

 

프로젝트의 루트에 .env를 만들고 환경변수를 VITE_로 시작하는 접두사로 설정하고,

다시 프로젝트의 루트에 vite-env.d.ts파일을 만들고 다음과 같이 적어주면 타입스크립트에서도 에러 없이

import.meta.env를 사용할 수 있다.

 

//vite-env.d.ts

/// <reference types="vite/client" />
interface ImportMetaEnv {
  readonly VITE_CUSTOM_ENV_VARIABLE: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

그 후 import.meta.env를 통해 환경 변수를 접근 할 수 있다.

const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGE_SENDER_ID,
  appId: import.meta.env.VITE_APP_ID,
  measurementId: import.meta.env.VITE_MEASUREMENT_ID,
};

 

https://vitejs-kr.github.io/guide/env-and-mode.html

Vite