Heroku를 통한 node.js 앱 배포

[Seogeurim]

팀원들과 함께 프로젝트를 진행하다 보면, 백 엔드 코드가 배포되어있지 않다는 것이 정말 불편한 일이라는 것을 알 수 있다. 프론트 개발을 할 때 api를 통해 데이터를 불러오기 위해 늘 백 코드를 로컬로 실행시켜줘야 하고, 함께 공유하는 데이터베이스가 없는 것도 불편하고, .. 정말 너~~~무 너무너무너무너~~~무 불편하다. 그래서 제발 배포를 하자 !! 하고 찾아보는데 우리처럼 연습 프로젝트를 할 때 무료로 사용하기 좋은 클라우드 서비스가 있었다. 그 이름은 바로...............!!!!

우리의 Hero, 우리의 영웅 Heroku

Heroku는 기본적으로 무료인데, 유료로 업그레이드도 가능하다. 또한 제공되는 시간을 넘겼을 때 자동으로 결제가 되는 일도 없다고 한다.
돈이 없는 대학생 우리는 무료 버전을 사용할텐데, 무료 버전의 제약은 다음과 같다.

1. 30분간 방문이 없는 경우 서버가 잠든다. 서버가 잠든 상태에서 요청을 했을 때 서버가 다시 깨어나는 데는 10초 ~ 30초 정도 걸린다.
2. 한 달 550시간 사용이 가능하다. 한 달은 최대 744시간이다. 즉, 충분하다.
3. 나중에 더 언급하겠지만 데이터베이스 무료 버전은 5MB까지 사용 가능하다.

Heroku는 한국에서는 대체로 헤로쿠라고 불리는 것 같고, hero(영웅-히로)와 일본어인 haiku를 합쳐서 만든 말이라고 하니 히로쿠가 맞는 것 같은데 우린 귀여운 대학생들이니까 헤로꾸라고 해보자.

헤로꾸를 써보자

우리 프로젝트는 git으로 관리되고 있었다. 헤로꾸는 git 저장소의 코드를 서버에 올리는 방식이다. 그러니 바아로 헤로꾸 가입하러 가보자.

상단에 보면 Sign Up 들어가자.

자, 그리고 상세 정보를 입력하여 Create Account 해준다.

그러고 나면 이메일 인증을 하라고 나오는데, 이메일 인증 완료하면 계정이 활성화된다.
그 뒤에는 어떤 화면이 나오는지 까먹었다. 대신 오른쪽 상단에 보면 메뉴에 Documentation 들어가는 메뉴가 있다.

글로 들어가서 Get Started > Node.js 클릭해준다. 우리는 Node.js 앱 배포할거니까 !!

그리고 나서 Introduction에서 [I'm ready to start] 버튼 눌러준다.

그러면 다음과 같이 os별 설치 방법이 나오는데, Heroku Command Line Interface (CLI)를 설치하는 것이다. 나는 맥이기 때문에 brew install heroku/brew/heroku 명령으로 설치해주었다.

그럼 이제 터미널에서 heroku로 시작하는 명령어들을 사용할 수 있게 된다. 관련 절차는 Document 에 나와있는 순서를 그대로 따라가기만 하면 되는데, 그 순서는 다음과 같다.

1. heroku login 헤로꾸 CLI를 사용하기 위해 로그인을 먼저 해야 한다. 위에서 생성한 계정으로 로그인한다.
2. 그 다음 단계로 가기 전에 노드 버전을 확인하라고 나온다. node 버전 8 이상, npm 설치, git 설치 여부를 확인하자.
3. cd (내 깃 리파지토리) 해서 배포하려는 내 깃 저장소로 간다.
4. heroku create을 하면 헤로꾸 저장소가 생성되고, 내 깃 저장소에는 heroku 이름의 git remote가 생성된다. git 저장소에 헤로꾸 저장소 위치를 heroku 이름으로 기억시키는 느낌이라고 한다. 이 때 헤로꾸 저장소는 랜덤하게 생성이 되는데, 이름을 지정해주고 싶으면 heroku create (이름) 을 해주면 된다고 한다.

나는 heroku create bletcher-back을 해주었다. 그러면 서버 이름도 bletcher-back.herokuapp.com 이런식으로 지정이 된다.

5. git push heroku master 을 하면 master 브랜치의 코드가 heroku에 올라가며 production mode로 빌드 & 배포가 진행된다.
6. heroku open을 하면 사이트가 브라우저에서 바로 열린다.
7. heroku logs --tail을 하면 로그를 쭈루룩 볼 수 있다.

환경 변수 설정

이 때 우리 코드를 아무 설정 없이 그대로 배포하면 에러가 막 뜰텐데 아차, 할 것이다. 우리 .env 에 환경 변수로 설정해두었던 것을 heroku에 설정해주어야 하기 때문이다. heroku config 명령어를 사용해 설정해줄 수도 있지만, 조금 번거로운 감이 있기 때문에 헤로꾸 웹 사이트로 들어가보겠다.

헤로꾸 대시보드에서 프로젝트를 선택해서 들어가자.

대시보드에 들어가면 Settings 탭이 있는데, 그쪽으로 들어가면 Config Vars 라는 메뉴를 볼 수 있을 것이다.

Reveal Config Vars 를 하면 다음과 같이 환경 변수를 key-value 형태로 추가할 수 있는 것을 볼 수 있을 것이다.

여기에 추가를 해주면 내 node.js 앱에서 process.env로서 접근한 환경 변수를 위에서 설정한 값으로 읽어들이게 된다.

DB를 사용해보자

자, 여기까지 따라왔으면 이제 데이터베이스를 연결해볼 차례다. 헤로꾸에서는 무료로 MariaDB를 사용할 수 있다. 대신 5MB라는 용량 제한이 있다. 이 용량 제한에 언제 부딪히게 될지는 모르겠으나, 부디 괜찮기를....!!

DB를 사용하기 위해서는 Heroku Add-ons를 사용해야 한다. 뭔가 서비스를 붙여나가는? 그런 느낌인 것 같다.
Add-ons를 사용하기 위해서는 신용카드 정보를 등록해야 한다. 무료 플랜을 사용하면 결제가 되지 않으니 안심하고 등록하자.
프로필을 누르고 > Account Settings 로 들어가서 Billings 탭에 들어가면 등록할 수 있다.

우리는 MariaDB를 사용하기에 JawsDB Maria 를 사용할 것이다.

1. 내 깃 저장소로 들어가 heroku addons:create jawsdb-maria:kitefin를 입력한다.
2. heroku config를 입력하면, JAWSDB_MARIA_URL 이 생성되어있을 것이다.
3. 생성된 데이터베이스의 username, password, host, port, db_name 정보를 받아온다.

JAWSDB_MARIA_URL: mysql://<username>:<password>@<host>:<port>/<db_name>

플랜과 설치 방법은 이렇게 나와있다. 우리의 무료 플랜은 Kitefin Shared 이다.

데이터베이스 정보까지 환경 변수로 설정해준다면 데이터베이스까지 연결된 서버 생성 완료 !!

깃 master 업데이트에 따른 자동 배포

헤로꾸를 깃과 연동하면 master 코드가 업데이트될 때마다 자동 배포되도록 설정할 수 있다.
프로젝트의 Deploy 탭으로 들어가서 다음 설정을 해주면 된다.

자, 이제 우리의 영광의 배포된 백엔드 코드 서버 url은 다음과 같다. 자랑스러우니까 크게 적어야지.

https://bletcher-back.herokuapp.com/

참고 자료

Heroku에서 MariaDB를 무료로 사용해보자
Heroku(헤로쿠) 가입, Heroku CLI 다운로드, 간단 사용법

[KimKwon]

기존에 존재하는 Heroku APP을 내 로컬로 불러오는 법.

기존의 bletcher-back 디렉토리로 이동한다.

1. Heroku에 이미 생성되어있는 'bletcher-back' 원격 브랜치를 추가한다.
   git remote add heroku git@heroku.com:bletcher-back.git

2. 원격 브랜치로 지정 (?)
   heroku git:remote -a bletcher-back

이렇게 하시면 됩니다.
30분 정도 삽질하고 찾아내서 공유합니다 ... 😥

[Seogeurim]

@KimKwon
우와... 진짜 너무 감사합니다 ㅠㅠㅠㅠㅠ 최고최고 ㅠㅠ 👍🏻👍🏻👍🏻