
바닐라 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 작성 내용 :
cd 키값 위치(폴더명) && echo -e "const config = { apikey: '키값' };" > apikey.js
// ex)
cd js && echo -e "const config = { apikey: '12341231234' };" > apikey.js
js 폴더 안에 apikey.js라는 파일과 그 안에 코드를 명령어로 만들게 했다.
당연히 html에도 숨긴 apikey 파일을 불러온 상태여야 한다.

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

간단한 프로젝트가 아닌 중요한 프로젝트에서는 이 방법을 사용하지 말 것..
이렇게 완성한 사이트 url
https://vanilla-js.netlify.app/
momentum App
vanilla-js.netlify.app
반응형
'작업 🎢 > 웹 프로젝트' 카테고리의 다른 글
| [🎉 In The Zoo - 우수작 선정🎉] X 클론 코딩 챌린지 2주 마무리 (0) | 2024.03.08 |
|---|---|
| [멍스타그램] 트위터 클론코딩 챌린지 (2) | 2024.02.18 |
| Three.js 를 이용한 유리구슬 만들기 (0) | 2024.01.09 |
| index.html 없이 Netlify로 배포하기 (package.json X) (1) | 2023.12.29 |