헤로쿠(Heroku)에 Node.js 서버 올리기 (express, socket.io)

heroku

 

socket.io를 이용하는 개인 프로젝트를 진행하다가 배포를 하려고 배포 플랫폼들을 많이 알아보았다. 처음에는 AWS를 이용해서 배포를 하려고 하였는데, 실제 서비스를 할 프로젝트도 아니었고 AWS의 프리티어를 조금 아껴두고 싶어 알아보다 heroku를 찾게 되었다. 

 

프론트엔드는 https를 지원하는 netlify에 배포를 해놨기 때문에 백앤드도 https로 배포를 해야 한다. heroku도 알아보니 https를 자동으로 설정해준다고 하여서 heroku에 백앤드를 배포하기로 하였다. 

 

영어로 된 공식문서를 보면서 실패도 많이 했었는데, 나처럼 heroku에 처음 배포하는 분들을 위해서 내가 배포했던 과정들을 블로그에 남기려고 한다. 그럼 Node.js + express + socket.io 서버를 Heroku에 배포하는 방법을 알아보자!

 

우선 배포하기 전에 package.json에 scripts 부분을 설정해줘야 한다. 빌드가 완료가 되면 heroku 쪽에서 서버를 실행 시켜야 하기 때문에 서버 실행 명령어에 빌드된 파일의 실행파일 경로를 적어줘야 한다.

 

"start": 빌드된 파일의 실행파일 경로

예시)

"start": "node dist/app.js",

 

Heroku 회원가입

https://www.heroku.com/ 에 접속 후 회원가입을 한다.
회원 가입이 완료가 되면 로그인을 한다

 

Heroku CLI 설치

https://devcenter.heroku.com/articles/heroku-cli#download-and-install 에 접속 후 컴퓨터의 OS에 맞춰서 설치를 완료해준다.

 

설치가 완료되었다면 터미널을 열어서 아래 명령어로 로그인을 해준다. 명령어를 입력하면 브라우저가 열린 뒤 로그인이 완료된다.

$ heroku login

 

 

Heroku에 배포하기

터미널에 다음 명령어를 입력하면 새 프로젝트가 생성된다.

$ heroku create

 

socket을 사용하기 위해서는 http-session-affinity 설정도 해야 한다.

$ heroku features:enable http-session-affinity

 

명령어를 입력 후 완료가 되면 다시 heroku에 접속해보자. 그럼 다음과 같이 프로젝트 하나가 생성이 되어있다.

 

 

해당 프로젝트를 클릭 후 deploy 탭을 누른다. Github Repository와 연동을 위해 Github 아이콘을 클릭한다.

 

 

Connect to Github 탭에서 배포할 repository를 검색 후 선택해준다. 

repository까지 선택이 완료가 되었으면 Settings 메뉴로 이동하자 

Settings 메뉴에서 Build 팩 설정을 위해 Add buildpack 클릭

 

 

 

Enter Buildpack URL 부분에 https://github.com/timanovsky/subdir-heroku-buildpack 입력 후 Save changes 클릭

 

 

다시 Add buildpack 클릭 후 nodejs 선택 후 Save changes

 

 

그럼 아래와 같이 2개가 추가되었다.

 

 

다음은 프로젝트의 경로 설정을 위해서 Reveal Config Vars 클릭

 

 

 

KEY 부분에 PROJECT_PATH 입력 VALUE 부분에 배포할 프로젝트의 경로 입력 ex) server

 

 

입력이 완료되었으면 Hide Config Vars 클릭

이제 아래에 보면 주소가 생겼다.

 

마지막으로 deploy 탭에서 아래에 Deploy Branch 버튼을 클릭하게 되면 배포가 완료가 된다.

 

마무리

이렇게 nodejs socket 서버 배포가 완료가 되었다. heroku는 무료로 배포가 가능하기 때문에 개인 프로젝트로 배포를 하실 분들한테 추천한다. 무료인 만큼 단점도 있는데, 서버가 30분 동안 이용되지 않으면 서버가 잠자기 모드로 들어간다고 한다. 잠자기 모드라고 해서 서버가 아예 꺼지는 것은 아니고, 요청이 있을 때 잠자기 모드에서 깨는 시간 때문에 1~2분 응답이 늦게 온다. 아마 이 부분은 결제를 하면 잠자기 모드에 안 드는 거 같다.