Node.js 사이트 Heroku(헤로쿠)로 인터넷에 올리기

Node.js로 만든 사이트를 헤로쿠를 통해 인터넷에 올리기 전에 해야 할 일이 두가지가 있습니다.

1. package.json 수정하기
2. Port 설정하기

이번 포스트에서는 Node JS 첫걸음/Hello World! 강좌에서 만들었던 사이트에 위 두가지를 수정한 후 Heroku(헤로쿠)를 통해 인터넷에 올려보겠습니다.

헤로쿠 가입및 다운로드, 명령어등은 단편강좌/Heroku(헤로쿠) 가입, Heroku CLI 다운로드, 간단 사용법 포스트에서 설명하였습니다.

1. package.json 수정하기

// package.json

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js", //*
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ejs": "^2.5.1",
    "express": "^4.14.0"
  }
}

헤로쿠는 package.json의 start script를 통해서 node.js 사이트를 실행시킵니다. 기본 package.json은 scripts에 start가 없으므로 작성을 해 주어야 합니다.

node 서버_JS_파일

hello world 사이트는 index.js에 서버 실행 코드가 있으므로 node index.js가 되었습니다.

2. Port 설정하기

// index.js

var express = require('express');
var app = express();

app.set("view engine","ejs");
app.use(express.static(__dirname + '/public'));

app.get("/hello", function(req,res){
  res.render("hello", {name:req.query.nameQuery});
});

app.get("/hello/:nameParam", function(req,res){
  res.render("hello", {name:req.params.nameParam});
});

var port = process.env.PORT || 3000; //*
app.listen(port, function(){
  console.log('Server On!');
});

헤로쿠에서 사용하는 port는 헤로쿠 서버의 환경변수에 의해 결정됩니다. 이 환경변수의 key 이름은 대문자로 PORT입니다. Node에서 환경변수 값을 담고 있는 변수는 process.env 이므로 헤로쿠상의 서버는 process.env.PORT의 값을 port로 하여 사이트를 실행하여야 합니다.

Heroku에 코드 보내기(push)

Heroku CLI와 git이 설치되어 있어야 헤로쿠 저장소로 code를 보낼 수 있습니다.

헤로쿠에 로그인하지 않았다면 로그인합니다.

$ heroku login

현재 소스코드가 있는 폴더에서 헤로쿠 저장소를 생성합니다.

$ heroku create a-mean-blog-hello-world

저는 a-mean-blog-hello-world 이름으로 저장소를 생성하였지만 헤로쿠 저장소 이름은 유일하여야하기 때문에 여러분들은 다른 이름을 사용하여 저장소를 생성하시기 바랍니다.

헤로쿠에 올리기 위해 작업한 코드를 먼저 git에 저장합니다.

$ git add .
$ git commit -m "heroku ready"

현재 git 저장소를 heroku에 전달(push)합니다.

$ git push heroku master

헤로쿠_저장소_이름.herokuapp.com에 접속하면 사이트를 볼 수 있습니다.

저의 경우에는 https://a-mean-blog-hello-world.herokuapp.com가 됩니다.

마치며...

Node JS 첫걸음/주소록, Node JS 첫걸음/게시판 처럼 환경변수가 사용된 경우(DB주소를 담기 위해 사용되었습니다)에는 heroku config:set 명령어로 환경변수를 저장해 주어야 제대로 작동합니다.