[React] vercel에 API KEY 등록하기 (feat. api key 숨기기)

 이번에 내 모바일 청첩장을 React로 간단하게 웹을 제작하고 있다.

그 중에 식장 지도를 카카오 맵을 이용해서 넣고 있었는데, 여기 사용되는 key를 env에 숨겨서 올렸다.

 

// .env
REACT_APP_KAKAOMAP_KEY={my kakao api key}

 

이렇게 루트에 .env를 만들어서 키를 넣어주고 .gitignore에 .env를 포함시켰다.

 

사실 api key는 스크립트에 들어가는 순간 노출될 수 밖에 없지만 이렇게 숨기는 게 암묵적인 룰이라 나도 넣어 봤다.

 

// imdex.html
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAOMAP_KEY%&libraries=services,clusterer"></script>

head 스크립트에 %REACT_APP_KAKAOMAP_KEY% 이렇게 넣어주면 .env에 등록된 환경변수를 넣어준다.

 

 

 

로컬에서 지도가 잘 동작하는 것을 볼 수 있다.

(우측 상단 버튼은 새로고침을 위해 그냥 넣어봤다.)

 

 이제 테스트를 위해 vercel을 이용해서 앱을 배포했다.
지도가 들어갈 자리가 텅~ 빈 채로 나온다.

당연하지만 .env에 api key를 넣어주고, 배포할 때는 이를 제외했기 때문에 키가 포함되지 않았기 때문이다.

 

배포된 html head를 확인해보면 스크립트에 이렇게 키로 들어갈 값이 %REACT_APP_KAKAOMAP_KEY% 이 값 그대로 들어간 걸 볼 수 있다.

 

vercel에서 빌드할 때 .env를 만들어주는 작업이 필요하다.

vercel에 내 프로젝트 설정으로 가준다.

 Settings > Environment Variables에서 secret key를 등록할 수 있다.

이런식으로 내가 사용할 키를 등록해주거나 import .env를 클릭하여 사용하고 있는 .env 파일을 그대로 업로드 해도 된다.

 

 

 이렇게 등록된 키를 볼 수 있다. 이 상태로 vercel을 재배포 해준다.

다시 들어가보면 스크립트에 키가 들어가 있는 걸 볼 수 있다.

 

카카오 디벨로퍼에서 도메인 연결도 까먹지 않고 해주면

빈 칸으로 나오던 지도가 잘 나오는 걸 확인할 수 있다!

 

끝