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", // 1
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ejs": "^3.0.1",
    "express": "^4.17.1"
  }
}

1. 헤로쿠는 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; // 1
app.listen(port, function(){
  console.log('server on! http://localhost:'+port);
});

1. 헤로쿠에서 사용하는 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 명령어로 환경변수를 저장해 주어야 제대로 작동합니다.