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