[ Vite / Vue3 / ts ] .env 파일 사용하는 방법 / how to use .env in vite, vue3, ts(typescript)

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

✔ 환경 설명 

- Vite, Vue3, typescript
- .env 파일에 firebase api key 를 넣어놓고 사용하려고 함  => 보안측면

 

✔ 방법

1. /.env 파일을 준비
2. /env.d.ts 파일을 준비
3. /src/firebase/index.ts  (:아무 경로나 상관없음) 을 준비

 

1. .env

.env 파일 소개

1) .env에서는 key=value 형태로 작성하도록 합니다.
2) VITE_ 접두어(prefix) 를 적용하여 변수명을 입력합니다. 
    > 미작성시 호출못함

 

2. /env.d.ts

env.d.ts

기본적으로 typescript 기반의 vite 프로젝트를 만들게 되면  root 경로에 위의 파일이 자동으로 생성되어져 있습니다.

 

/// <reference types="vite/client" />
interface ImportMetaEnv {
  env: {
    VITE_FIREBASE_API_KEY: string;
    NODE_ENV: 'development' | 'production';
  };
}

.env 에서 작성하신 변수명과 똑같이 작성해주세요.
( 실험해봤는데, NODE_ENV는 작성해도 안해도 상관없었습니다. MODE (개발,배포) 버전의 문제라서요.)

여기서 .d 가 의미하는건 declare(선언하다) 라는 뜻.
env의 타입(ts)을 선언(d)하겠다. 라는 의미인 것으로 저는 해석했습니다.

 

3. /src/firebase/index.ts  (:아무 경로나 상관없음)

/src/firebase/index.ts

저는 해당 파일을 firebase를 사용하는곳에다가 import 할 것이기 때문에 파일로 분리하였습니다.

보시면 상수 firebaseApiKey 를 할당할 때에 import.meta.env.VITE~로 해주었죠?

import.meta.env 를 통해서 환경변수에 접근이 가능합니다. (vite 공식문서에 있음)

 

그리고 이제 console 혹은 실제 서비스를 사용해보면 정상적으로 출력된것을 확인하실 수 있습니다.

 

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

[Vue.js] 환경 변수(.env) 설정하여 API KEY 숨기기

Vite