[netlify 배포] 바닐라 JS - netlify배포 시 API 키 사용하는 방법

ToDo web

바닐라 JS - netlify에서 API 키 이용하는 방법

netlify에서 html, css, vanilla javascript만 배포를 한다면 Build command를 사용해야 한다.

node를 사용 한다면 굳이 이 방법이 아닌 .env를 활용합시다.

 

---

 

api key를 github에 올리지 않으며 netlify에서 사용하는 방법

현재 나의 폴더 구조는 이렇다. 

폴더구조 참고

apikey.js라는 곳에

//apikey.js

const config = { apikey: '12341231234' };

이렇게 작성되어 있는 상태다.

이것을 깃허브 저장소에 올리지 않았기 때문에 당연히 사이트에서 키값 사용이 불가능하다.

 

 

 

이것을 가능하게 해주는 방법이 있는데

Build command를 사용할 수 있다.

Build command 작성

 

Build command 작성 내용 :

cd 키값 위치(폴더명) && echo -e "const config = { apikey: '키값' };" > apikey.js

// ex)
cd js && echo -e "const config = { apikey: '12341231234' };" > apikey.js

js 폴더 안에 apikey.js라는 파일과 그 안에 코드를 명령어로 만들게 했다.

 

당연히 html에도 숨긴 apikey 파일을 불러온 상태여야 한다.

index.html

 

개발자 옵션 -> 네트워크에 어쩔 수 없이 보이지만 공개되어 있는 저장공간에 올리는 것보다는 나은 듯..

개발자옵션 - 네트워크

 

 

간단한 프로젝트가 아닌 중요한 프로젝트에서는 이 방법을 사용하지 말 것..

 

이렇게 완성한 사이트 url

https://vanilla-js.netlify.app/

momentum App