[Javascript] Netlify 바닐라 JS 프로젝트 배포 & API key 적용하기

6월 첫째주부터 셋째주까지 매주 시험을 보느라 바빴다. 첫째주에는 정처기 필기 시험을 봤고 둘째주와 셋째주에는 방송대 기말시험을 3과목씩 봤다.... 이제 숨통이 트여서 포스팅하러 왔다.

 

Netlify로 프로젝트를 배포하는 방법은 굉장히 쉽다. 한 번 해보고 이렇게 금방 사이트를 배포할 수 있다는 사실에 깜짝 놀랄 정도였다! 

사이트 배포하기

netlify 사이트 배포하는 법

 

깃허브 레파지토리가 있는 상태라면 Add new site - Import an existing project를 클릭한다. 레파지토리의 공개 여부와 상관 없이 사이트를 배포할 수 있다. 연결할 레파지토리를 선택하고 나면 이렇게 배포가 진행된다.

 

배포 진행 중

에러 발생

사이트에 접속하면 404 에러가 생긴 걸 알 수 있다. 날씨 API 연결에 실패해서 날씨에 따른 배경화면이 나타나지 않는다. 그 이유는 무엇일까?

사이트 접속 시 마주하게 되는 에러

netlify는 깃허브에 올라온 코드를 바탕으로 사이트를 배포한다. 날씨 API key가 담긴 파일이 gitIgnore 에 있기 때문에 netlify에서 API key를 읽어오지 못해 에러가 생기는 것이다. 그러니 문제를 해결하려면 netlify가 api key 를 읽을 수 있도록 해주면 된다.

 

문제 해결

무수히 많은 검색을 하며 다양한 해결방법을 읽어봤다. dotenv로 env 파일을 숨기라는 글이 있었고, netlify-cli 를 설치해서 진행하라는 글, netlify에서 environment 에 api key를 추가하라는 글도 봤다. 그래서 나도 다 따라해봤지만 제대로 적용되지 않았다. 그리고 순수 html, css, js로 프로젝트를 만들고 싶었기 때문에 라이브러리를 설치하고 싶지 않아서 다 삭제했다. 결국 적용한 방법은 build setting 에서 커맨드로 api key가 들어있는 파일을 추가해주는 것이었다.

 

아래 분의 글을 보고 해결방법을 찾았다.

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

 

echo

"const WEAHTER_API_KEY = 'API KEY 적기';
export default WEAHTER_API_KEY;" 

> apikey.js;

 

이렇게 하면 build할 때 큰 따옴표에 있는 내용이 담긴 apikey.js 파일이 추가가 된다. 근데 문제는 게시글 댓글에 남겨져있는 것처럼 개발자도구 - 네트워크 탭에서 api key를 확인할 수 있다는 것.....ㅠㅠ완벽한 해결책은 아닌 셈이다. 그래도 원하는 대로 사이트가 연결되었으니 다행이다... api key를 연결시키기 위해 노력했을 때 api key를 숨기는 것은 클라이언트 측이 아니라 서버 측에서 한다는 글을 많이 봤다. 아무래도 제대로 숨기려면 백엔드 쪽 공부도 해야할듯하다...

추가 : 도메인 주소 변경하기

netfliy로 사이트를 배포했을 때 도메인 주소를 보면 내가 원하는 주소와 거리가 멀다. 이것은 Domain management 탭에서 변경할 수 있다.

도메인 주소 변경 탭

 

 

Edit site name에서 원하는 도메인 이름을 적으면 된다! 끝~