Netilfy 자바스크립트 프로젝트 배포할 때 API key 숨기기

API Key를 숨기는 이유?

API Key의 대부분은 개인마다 키값이 다르고, 키 값이 악용될 수 있으므로 로컬로 작업할때가 아닌 배포할 때 꼭꼭 숨겨야한다. 

 

대부분 API Key를 숨길 때 키에 대한 .js 파일을 생성하고, .gitignore에 .js 파일을 입력해 깃허브에 commit되지 않도록 방지할 것이다.

허나 Netilfy처럼 깃과 연동해 실시간 배포가 이루어지는 방식에선 해당 Key값을 가져오지 못해 예상치못한 오류를 발생시킨다.

그렇다고 key값을 깃허브에 공개하는 건 꺼려진다.

 

우선 시작하기 앞서 깃허브에 저장되어 있는 API key값이 들어있는 .js파일이 .gitignore에 적용되어있는 프로젝트를 Netlify와 연동하고 진행하자.

검색하면 쉽게 적용할 수 있을 것이다.

Key 숨기기

Netlify는 Build command를 지원한다.

 

Netlify에 들어가 배포한 Site -> Site settings -> Bulid & deploy -> Build settings 순서로 들어가보자.

그럼 Build command라고 적혀있는 부분을 찾을 수 있을 것이다. 

 

해당부분에 key값을 적용한 새로운 파일을 생성해서 적용한다면? 프로젝트는 정상적으로 돌아갈 것이다.

 

Netilfy는 배포해서 빌드할 때 첫 위치는 해당 프로젝트의 index.html이 있는 전역 위치이다.

위 디렉토리를 보면 config폴더에 key.js 파일이 .gitignore 된 것을 볼 수 있다.

//key.js

const KAKAO_KEY = 'bbddaf786e32df1d3123213213211bb28dfd6104d012';

export default KAKAO_KEY;

해당 key.js 파일이 깃허브에 없으므로 배포할 때 오류가 난다. Build command를 이용해 해결해보도록 하자.

 

위 디렉토리와 같은 경우엔

cd js/config  && echo -e "const KAKAO_KEY = 'key값';\n\n export default KAKAO_KEY;" > key.js

와 같이 입력해준다. 본인의 프로젝트에 알맞게 수정하며 작성해주면 된다.

우선 Netilfy는 처음 빌드할 때 시작점은 index.html이 있는 위치이다. config안에 key.js로 넣는 게 목표이므로 

 

cd js/config 를 하면 해당 디렉토리로 이동된다. 그 후 코드를 작성하듯이 위 처럼 작성하면 된다. 마지막 > 는 해당 코드를 key.js파일로 만든다는 의미이다.

결국 코드를 작성해 똑같이 만든 후 똑같은 파일을 생성하는 command이다.

cd js/config // cd/ js/config로 이동  

&& echo -e "

const KAKAO_KEY = 'key값';

export default KAKAO_KEY;" // 코드 작성  

> key.js // key.js 파일 만듦

위와 같이 동작되며, 빌드할 때 해당 커맨드가 입력되어 .gitignore되어있던 key.js를 똑같이 만들 수 있고, 실제로 잘 동작한다.

 

리액트나 뷰 등은 dotenv를 이용해 .env 파일로 쉽게 키를 숨길 수 있지만 바닐라자바스크립트로 구성된 프론트엔드 프로젝트에서는 키를 숨기기 쉽지 않다.

 

물론 더 좋은 방법이 있을 수 있지만 간단한 프로젝트를 배포할 때 쉽게 키를 숨길 수 있는 방법을 알아봤다.