이 글을 쓰게 된 이유는 크라우드 방식의 웹 어플리케이션 배포 서비스 중, Heroku 만의 장점이 있기 때문이다.
Heroku와 매우 비슷한 성격의 Netlify의 경우 한국 기준 조금 더 빠른 응답을 해주지만, https를 사용하지 못하는 3번과 SPA의 특성인 4번 문제에 봉착한 경우 Heroku를 사용해 보길 권장한다.
단, (이미지, 동영상) 등 무거운 리소스를 제공하는 서비스는 권장하지 않음 (너무 느려요 ㅠㅠ)
우선 heroku를 가입한다. 그리고 대시보드/Apps에서 new 버튼을 눌러 App name을 입력하고 Create app을 누르면 완료!
앱을 생성하면, 배포 페이지로 이동된다. Deployment method에서 GitHub 누르고 계정과 연동을 해주면 끝! 너무 쉽쥬..?
Deployment method 바로 하단에 레포지토리를 선택하는 Connect to GitHub가 있다.
레포지토리 명을 입력하고 Search 버튼을 눌러 검색하면 하단에 목록이 나타난다. 원하는 레포지토리를 클릭하여 선택해준다.
혹시 organization 으로 관리하는 레포지토리의 경우 하단에 Ensure Heroku Dashboard has team access를 클릭하여 깃허브 접근 권한을 허가해주자.
Heroku 에서는 두 가지의 배포 방식을 제공한다.
기호에 맞게 버튼을 눌러 배포를 해주면 된다. 여기서는 Deploy Branch 버튼을 눌러 2번 방법으로 배포했다.
버튼을 누르면 하단에 build 로그를 실시간으로 보여준다. build 로그가 사라지고 하단에 성공했다는 메세지가 보이면 완료!
페이지 상단에 Open app을 클릭해보자. 혹은 네비게이션 바를 보면 Setting 탭이 있다. 클리한 후 Domains 섹션을 보면 Heroku에서 만들어준 도메인을 확인할 수 있다. 링크를 클릭해서 배포가 되었는지 확인해보자.
.env를 깃허브 레포지토리에 푸시하지 않는 경우에 환경변수를 등록해주어야 한다. 그렇지 않으면 예시처럼 환경변수를 불러올 수 없기 때문에 undefined가 입력되고 api 요청에 실패할 수 있다.
환경변수는 Heroku CLI로 설정할 수 있다. 다음 링크를 클리하여 본인의 PC 환경에 맞게 설치를 해주자.
https://devcenter.heroku.com/articles/heroku-cli
터미널을 열어 heroku 라고 입력했을 때 not command 가 아니라 명령어에 대한 설명을 보여주면 설치에 성공했다는 뜻!
마지막으로 다음 명령어를 입력해준다. 필요한 환경 변수 Key와 Value를 입력하고 AppName의 경우 1번에서 생성한 App 이름을 입력해주면 된다.
% heroku config:set Key=Value -a AppName
끝!!!!