Heroku는 node js 뿐만 아니라 Ruby, Go, Scala 등 다양한 언어를 지원하는 호스팅 사이트입니다. 물론 Node js 호스팅으로도 유명하죠. 하지만 Firebase 와 Heroku 두 개의 호스팅 사이트를 사용해본 결과 backend logic(디비 조작 및 유저 인증 등)을 일임하는 형식의 Firebase보다는 서버쪽 logic을 같이 관리해주어야하는 Heroku에서 훨씬 더 많은 문제에 부딪혔습니다. 게다가 Heroku는 분명 git 연동 등 좋은 점도 많고 무료 호스팅이 가능하단 점에서 매력적인 옵션이지만 호스팅 경험이 부족한 분들이나 git 을 다뤄본 경험이 부족한 분들에게는 장애물로 느껴질 수 있다고 생각이 들었습니다. 호스팅 관련 문제를 해결하기 위해 몇 시간씩 삽질하는건 유쾌한 경험은 아니거든요. 그래서 이번에는 제목처럼 Heroku에 앱을 deploy할 때 놓치기 쉬운 것들 그리고 제가 실수해서 몇 시간씩 해맸던 것들을 포스팅 해보겠습니다.

일단 Heroku에 deploy 하는 법부터 시작할게요.

1. https://www.heroku.com/home 에 들어갑니다.

2. 가볍게 가입을 해주시고 오른쪽의 메뉴 아이콘을 누른 다음 서치바 옆의 얼굴 아이콘을 통해

대쉬보드로 들어가줍시다.

3. 아직 앱이 하나도 없군요.

4. Heroku는 CLI를 지원합니다. 그 말인 즉슨 콘솔에 명령어만 입력하면 어여쁜 앱을 호스팅할 수 있다는 말이지요.

5. https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up로 들어가서 각자 환경에 맞는 Heroku CLI를 다운로드 해줍니다.

6. 설치가 완료되었다면 콘솔창에 heroku를 입력하고 이런 화면이 뜨는지 확인해줍시다.

7. Heroku login을 하고 깃 저장소가 있다는 가정 하에 git clone을 통해 저장소를 복제해줍니다.

이 단계에서 주의할 점은 package.json 파일인데 만약 이 파일이 없다면 Heroku가 스크립트를 실행시킬 수 없기 때문에 앱이 제대로 실행이 되지 않습니다. 그리고 스크립트는 npm start에 지정이 되어 있어야합니다. 

8. 자, 이제 heroku create를 통해 앱을 호스팅해봅시다. 이제 Heroku를 원격저장소에 추가하고 파일을 옮겨봅시다.

이번 단계의 주의점은 build 폴더입니다. 사람에 따라 public이 될 수도 있고 static이 될 수도 있지만 빠뜨리시면 제대로 앱이 실행이 안 됩니다. 그리고 만약 remote 저장소에 heroku가 저장이 안 되어있다면 (git remote를 통해 확인) heroku를 추가해주세요.

9. 이제 모든게 정상적으로 돌아가는 것 같군요. 하지만 Heroku에 호스팅해보시면 자잘하게 건드려줘야할게 많다는 것을 알게 됩니다. 바로 config var 설정이죠.

10. 저의 경우는 mlab 디비를 가져와서 사용했습니다. config var 는 대쉬보드의 setting에서 지정할 수 있고

process.env 를 통해 가져올 수 있습니다.

이런 식으로 config vars를 설정해두시면

여기서 process.env.MONGODB_URI 가 보이시나요? 저런 식으로 가져와 쓸 수 있답니다.

저같은 경우는 dotenv라는 모듈을 사용했는데 로컬에서는 잘 작동하다가 Heroku앱에서 post 요청을 할 때마다 503에러가 나길래 뭐가 문제일까 살펴보다가 DB URI 설정이 잘못 되었다는걸 알았답니다.

Heroku는 굉장히 매력적인 플랫폼입니다. 선택가능한 언어, 연동가능한 디비가 다양할 뿐만 아니라 git에 익숙하다면 정말 간편하게 호스팅 가능하죠. 게다가 무료!! 라서 더욱 사랑스럽죠. 이 글이 Heroku에 호스팅하시는 분들에게 도움이 되면 좋겠습니다.

이준형

이준형 님의 창작활동을 응원하고 싶으세요?

후원하기