vite에서 env 변수 사용 + TypeScript

기존 프로젝트를 생성할 때 CRA를 사용하다가

이번에 vite를 처음 사용해 봤습니다.

그리고

 

api key 를 관리하기 위해 env 변수를 사용하였는데

CRA와 다른점이 있어 글을 작성합니다.

 

vite에서 env 변수를 선언하기 위해서는 

.env 파일에서 VITE_를 변수 앞에 붙여 선언해줍니다.

VITE_GEO_API_KEY=aaaaaaaa

그리고 사용할 때는 import.meta.env.env변수 이름 으로 사용해줍니다.

import.meta.env.VITE_GEO_API_KEY

 

그리고 추가로 타입 스크립트와 같이 사용하는 경우에는 

.env에서 정의되지 않은 타입 에러가 발생하기 때문에

src 폴더 아래에 env.d.ts 파일을 생성하여 

다음과 같이 타입들을 정의해줍니다.

interface ImportMetaEnv {
  readonly VITE_GEO_API_KEY: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

 

참고 자료

Vite