[Vite] vite에서 환경변수 env 값 설정하기

vite 환경에서 환경변수 값을 주기 위해서는 기존의 CRA와 다르게 설정해야 한다.

처음에는 CRA처럼 환경변수에 접근해서 값이 나오지 않았는데, Vite의 경우 prefix가 달랐다!

 

먼저 CRA에서 접근하는 방법을 알아보자.

CRA

Create-react-app으로 만든 React에서는

.env 파일에서 REACT\_APP을 prefix로 붙여야 한다.

그다음 이를 사용하기 위해서는 process.env 를 앞에 붙여서 사용한다.

Vite

환경변수 생성

Vite의 경우, VITE\_를 prefix로 사용하여 환경변수를 생성해야 한다.

# .env
VITE_TEST_VALUE=123

환경변수 사용

그다음 앱에서는 import.meta.env로 값에 접근할 수 있다.

dotenv 패키지도 필요가 없다.

const TEST_VALUE = import.meta.env.VITE_TEST_VALUE;

console.log(TEST_VALUE); // 123

 

해당 prefix를 설정한 후에, 값이 정상적으로 반환되었다!

 

env import

추가적으로 코드 작성하면서 바로 import 하기 위해서는

vite-env.d.ts 파일을 수정해야 한다.

아래와 같이 작성한 환경변수에 대한 타입을 적어주면 된다.

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // 다른 환경 변수들에 대한 타입 정의...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

 

---

 

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

Vite