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

소스코드

이 게시물에는 코드작성이 포함되어 있습니다. 소스코드를 받으신 후 진행해 주세요. MEAN Stack/개발 환경 구축에서 설명된 프로그램들(git, npm, atom editor)이 있어야 아래의 명령어들을 실행할 수 있습니다.

이 게시물의 소스코드는 Hello World! / EJS로 Dynamic Website 만들기에서 이어집니다.

hello-world.git 을 clone 한 적이 있는 경우: 터미널에서 해당 폴더로 이동 후 아래 명령어들을 붙여넣기합니다. 폴더 내 모든 코드가 이 게시물의 코드로 교체됩니다. 이를 원치 않으시면 이 방법을 선택하지 마세요.

git reset --hard
git pull
git reset --hard 98dab50
git reset --soft d28552f
npm install
atom .

hello-world.git 을 clone 한 적이 없는 경우: 터미널에서 코드를 다운 받을 폴더로 이동한 후 아래 명령어들을 붙여넣기하여 hello-world.git 을 clone 합니다.

git clone https://github.com/a-mean-blogger/hello-world.git
cd hello-world
git reset --hard 98dab50
git reset --soft d28552f
npm install
atom .

- Github에서 소스코드 보기: https://github.com/a-mean-blogger/hello-world/tree/98dab502f3ceceb3a7edeff67b1eebc083b87050


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 CLIgit이 설치되어 있어야 헤로쿠 저장소로 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 명령어로 환경변수를 저장해 주어야 제대로 작동합니다.

댓글

허람1 2017.08.25
heroku 에 올려서 사용하고있는데요 db를 쓰려고해요 블로그에선 몽고디비를 사용하고계신데 제가 코드를 mysql로 짯거든요.. local에선 잘 작동하는 mysql이 heroku에올린뒤에 heroku서버페이지에선 작동을 안해요.. 혹시도와주실수있을까요??..
I
Ian H 2017.08.29
@허람1,
mysql DB도 인터넷에 올라가 있는게 맞으신가요?
양억Yangeok 2019.03.04
$ git push heroku master fatal: 'heroku' does not appear to be a git repository fatal: Could not read from remote repository.
Please make sure you have the correct access rights and the repository exists.
이러는데 깃에서 따로 히로쿠 브랜치를 만들어야하나요?
I
Ian H 2019.03.04
@양억Yangeok,
git push는 git push <Destination> <Branch>의 형태이며, git push heroku master에서 heroku는 branch이름이 아니라 heroku create로 부터 생성되는 heroku git repository의 alias입니다. 
heroku create 명령어를 실행하지 않으셨다면 heroku create 명령어를 실행한 후 push해 보시기 바랍니다.
만약 이미 heroku git repository가 있으시다면 git remote add heroku <heroku git repository 주소> 명령어로 heroku라는 alias를 등록 한 후 push해 보세요.
Deleted Comment
I
Ian H 2019.05.30
전체 에러 메세지를 볼 수 있을까요? 어떠한 상황에서 저 메세지가 뜨는지도 알려주세요
s
siki ryougi 2019.06.06
[email protected]: Permission denied (publickey). fatal: Could not read from remote repository.
Please make sure you have the correct access rights and the repository exists.
이건 무슨 오류인가요? 전에 뜨던 오류는 그냥 제가 잘못 입력한거였는데 git push heroku master 명령어를 치니까 어느 순간부터 위의 오류가 뜹니다.. 제가 뭔가를 잘못건드린건가요?.. 인터넷에서는 key를 생성하라고 한 해결책도 있어서 heroku keys:add 라는 명령어로 key도 만들어 봤지만 아무런 효과가 없었습니다
I
Ian H 2019.06.06
@siki ryougi,
heroku login 명령어로 로그인이 되어 있나요? 아니면 혹시 heroku repo의 주소가 바뀌었나요?
다른 방법은, 새로운 폴더에서 해당 repo를 다시 heroku로 부터 읽어 온 후 push해 보세요.
댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP