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 21c4729
git reset --soft 903f401
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 21c4729
git reset --soft 903f401
npm install
atom .

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


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 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해 보세요.
u
utoru80 2021.08.02
안녕하세요!! 덕분에 헤로쿠 배포해서 잘쓰고있어요\ 그런데 헤로쿠에 배포할떄 폴더생성수 제한있나요? 4개폴더는 배포하면 인식되는데 4개 이상부터는 폴더가 헤로쿠에 생성이안되요. heroku run ls 명령어 처보았는데 폴더가 생성이 안되있더라구요. 저만 그런가요??
u
utoru80 2021.08.02
프로젝트파일 디렉토리안에 폴더가 4개까지만 배포되요. 
I
Ian H 2021.08.02
@utoru80,
안녕하세요^^ 헤로쿠 배포에 폴더 수 제한은 없습니다. 혹시 빈폴더 만드셨나요? 빈폴더는 git에서 업데이트로 간주하지 않기 때문에 commit에 포함되지 않습니다. 당연히 헤로쿠에 올릴 수도 없죠. 제작하신 사이트 한번 보고 싶은데 주소 알려주실 수 있으세요?
u
utoru80 2021.08.03
@Ian H,
빈폴더 맞아요. 이런 얼릉 시도해바야겠어요 감사합니다!!  제작이라기보다 선생님이 헤로쿠 강좌로 올려준 api를 배포해보았어요ㅎㅎ
I
Ian H 2021.08.03
@utoru80,
나중에 혹시 사이트 만드시면 알려주세요^^
u
utoru80 2021.08.05
@Ian H,
넹~~~~~
I
Ian H 2021.08.05
@utoru80,
👍
무도인 2021.09.07
선생님 헤로쿠에 서버를 올리려는데 :Application error" 에러 화면이 떴고, 로그를 확인해보니   아래와 같이 떴는데 혹시 이유를 알 수 있을까요? 참고로 저는 환경변수 설정 없이 db connect 부분에 정보를 직접 기입했습니다.   2021-09-07T09:14:10.471600+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=guarded-eyrie-86384.herokuapp.com request_id=bb73442f-b84e-4d5e-8960-39896491161f fwd="118.220.110.14" dyno= connect= service= status=503 bytes= protocol=https 2021-09-07T09:14:10.725143+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=guarded-eyrie-86384.herokuapp.com request_id=ea5b22e9-1fb5-4b9a-a072-471246979a15 fwd="118.220.110.14" dyno= connect= service= status=503 bytes= protocol=https 2021-09-07T09:16:13.488526+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=guarded-eyrie-86384.herokuapp.com request_id=010b56f2-e81d-498a-9a83-771cce6cb85b fwd="118.220.110.14" dyno= connect= service= status=503 bytes= protocol=https 2021-09-07T09:16:13.725605+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=guarded-eyrie-86384.herokuapp.com request_id=b9397fea-a2fd-4d63-a5e8-bd0e57d15bfb fwd="118.220.110.14" dyno= connect= service= status=503 bytes= protocol=https
I
Ian H 2021.09.07
@무도인,
안녕하세요~~ 로컬에서는 잘되다가 heroku에 올리면 잘 안되는 경우가 종종있죠^^;
일단 포트가 var port = process.env.PORT || 3000; 로 설정되어 있는지 확인해 보세요. 그래도 안되시면 아래의 질문에 답해주세요.
이 포스팅의 예제를 사용하셨나요? 아니면 직접 작성한 코드를 사용하셨나요? heroku에 해당 app을 처음으로 올리시는데 에러가 난 것인가요? 아니면 이전까지는 잘 되다가 갑자기 에러가 난 것인가요?
무도인 2021.09.08
@Ian H,
넵 선생님, var port = process.env.PORT || 3000; 로 수정하고 package.json 파일에 script 안에 "start": "node index.js", 입력두 다 했습니다. 참고로 이 포스팅의 예제는 잘되더라구요. 근데 선생님이 강의해준 게시판(고급) 파일을 인터넷에 올리기를 시도하려고 하던 과정에서 이런 에러가 나온겁니다 ㅜ
I
Ian H 2021.09.08
@무도인,
아.. 게시판(고급)의 가장 마지막 코드인가요? 제가 한번 확인해 보겠습니다.
I
Ian H 2021.09.08
@무도인,
저는 잘 되는데요^^;
https://temp-test-1234.herokuapp.com
혹시 코드 수정 후에 git commit을 안 하신 거 아닌가요? git push heroku master 명령어는 현재 가지고 있는 코드를 올리는 게 아니라, 마지막 commit의 코드를 올립니다
이 강의의 git add . 과 git commit -m "heroku ready" 는 반드시 필요한 과정입니다.
혹시 그래도 안되시면 코드를 깃헙에 올리시고 링크를 알려주시면 제가 한번 코드를 확인해 보겠습니다!
무도인 2021.09.09
@Ian H,
계속 안됩니다...ㅠ . 선생님 게시판 코드를 다시 새로 그대로 받은후 -> local에서 작동 잘되는거 확인하고-> index.js 파일에서 var port = process.env.PORT || 3000; 로 수정하고 package.json 파일에 script 안에 "start": "node index.js", 입력-> 저장->git bash에서 heroku login -> heroku create-> git add .-> git commit -m "test2" -> git push heroku master -> 앱 접속 -> application 에러가 뜹니다. .. 깃 주소도 올려드릴게요! https://github.com/forjustice7474/test
I
Ian H 2021.09.09
@무도인,
connection string을 직접 입력하셨다고 말씀하셨는데 올려주신 코드에서 index.js의 16번줄(https://github.com/forjustice7474/test/blob/master/index.js#L16)을 보시면 환경변수를 해당부분이 환경변수에서 읽어오도록 그대로 남아 있습니다.
application 에러를 확인한 후 heroku logs 명령어를 콘솔에 입력하고 에러메세지를 살펴보면
 Error [MongooseError]: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string.
역시 해당 부분이 문제임을 알 수 있습니다. 
코드의 변경없이 heroku의 환경변수를 설정해 주니 실행되는 것을 확인했습니다! https://www.a-mean-blog.com/ko/blog/단편강좌/_/Heroku-헤로쿠-가입-Heroku-CLI-다운로드-간단-사용법 의 중요 명령어 부분을 환경변수를 설정하는 명령어(heroku config:set) 에 대한 설명이 있으니 한번 시도해 보세요!
무도인 2021.09.10
@Ian H,
선생님 되네요 ㅜㅜ !! 초반에 환경변수 없이 직접 입력하다가 안되서(이땐 다른걸 잘못해서 안됬던것 같습니다) 선생님이 하던그대로 환경변수 설정후 진행하는과정에서 heroku에 환경변수값 넣어주는걸 까먹었었네요 !! 돈내고 듣는 강의도 아닌데 이렇게 바로 답변도 해주시고 바쁘실텐데 꼼꼼히 시간내서 체크도 해주시고...그저 node js 생태에서 빛과 같은 존재십니다....너무나도 인격이 훌륭하셔서 분명 주변에서도 좋은 영향을 뿜뿜 하는 분이라 확신합니다. 제가 지금 이것저것 하고 있어 nodejs 에 완전 집중은 못하고 있지만, 틈틈히 공부하는데에 너무나도 큰 도움이 되고 있습니다. 선생님이 올려주신 자료들 계속 복습하고 온전히 제것으로 만들어서 밥값하는 개발자로 성장하고 싶네요. 정말 감사합니다!!^^ 
I
Ian H 2021.09.10
@무도인,
아이고.. 좋은 말씀 남겨주셔서 감사합니다. 처음엔 그냥 제가 배운걸 기록하는 것으로 시작했는데 다른 사람들에게 도움이 되어서 다행이라고 생각합니다. 또 질문있으시면 언제든지 남겨주세요^^
댓글쓰기

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

UP