본문 바로가기
Front end/React 따라하기1

6) dot-env 민감한 정보는 따로 숨겨보자

by 구월에작은섬 2020. 8. 1.
donaricano-btn

API 키 같은 정보는 github repository처럼 오픈된 장소에 올려서는 안된다.

악용의 여지가 있기 때문이다.

 

dot-env라는 녀석을 이용해서 키를 관리해보자

yarn add dot-env

 

그리고 루트 경로에 .env파일을 만들고 아래처럼 작성해보자. 발급받은 키도 같이 입력해준다.

rapidApiKey=발급받은키 입력

 

next js에서는 dotenv를 사용하기 위해서 추가 설정이 필요하다

 

next.config.js 파일을 생성해준다.

 

module.exports = {
  env: {
    rapidApiKey: process.env.rapidApiKey,
  },
};

 

파일구조

 

여기까지 작업한 내용을 깃에 올려보자

 

*** .env파일은 깃에 올리지 않는다 -> .gitignore파일에 추가한다.

 

잘따라왔다면

git status

위 사진처럼된것을 확인하고

git add .
git commit -m "add swr api fetch with dotenv"
git push -u origin master

이제 남은 .env파일은 어떻게 처리해야할까?

 

깃허브에서는 키들을 관리해주는 기능을 제공한다.

 

.env에 입력했던 키와 값을 입력

 

donaricano-btn

댓글