[VUE.js] dotenv를 사용하여 api키 숨기기 / api key 환경변수로 분리하기

문제

이번에 프로젝트를 하면서 카카오 api키와 tmdb api키를 그대로 노출해서 사용하고 있었다. 

이것을 따로 분리해주어야 한다. 

 

깃허브에 환경변수 설정하는 법, json 파일이나  txt 파일로 만들어서 gitignore에 추가하고 불러오는 방법 등을 찾아보았는데 마음대로 잘안됐다.

 

---

해결

https://www.npmjs.com/package/dotenv

dotenv

# with npm
npm install dotenv

# or with Yarn
yarn add dotenv

1.  dotenv를 설치

dotenv는 환경변수를 파일에 저장할 수 있도록 해주는 라이브러리이다. 

 

2. root경로에 .env 파일을 만든다.

그리고 키 = 값 형태로 내가 숨기고 싶은 api키를 넣는다. 

주의할 점은 앞에  VUE_APP_을 붙여야한다.

참고 : https://stackoverflow.com/questions/50715302/how-to-use-dotenv-with-vue-js

VUE_APP_TMDB="your api key"
VUE_APP_KAKAO="your api key"

 

3. .gitignore 파일에 .env를 추가한다. 

맨밑에 .env만 추가하면 된다. 

 

4. 사용해야하는 파일에서 

import dotenv from 'dotenv';

dotenv.config();
const TMDB_API_KEY = process.env.VUE_APP_TMDB;

이렇게 사용한다. 어느 파일에서나 이렇게 사용할 수 있다. 

 

gitignore를 해주었기 떄문에 커밋할 때 이 .env파일은 올라가지 않아서 나의 key 들을 보호할 수 있다 .