이 게시물에는 코드작성이 포함되어 있습니다. 소스코드를 받으신 후 진행해 주세요. MEAN Stack/개발 환경 구축에서 설명된 프로그램들(git, npm, atom editor)이 있어야 아래의 명령어들을 실행할 수 있습니다.
이 게시물의 소스코드는 Hello World! / EJS로 Dynamic Website 만들기에서 이어집니다.
hello-world.git 을 clone 한 적이 있는 경우: 터미널에서 해당 폴더로 이동 후 아래 명령어들을 붙여넣기합니다. 폴더 내 모든 코드가 이 게시물의 코드로 교체됩니다. 이를 원치 않으시면 이 방법을 선택하지 마세요.
hello-world.git 을 clone 한 적이 없는 경우: 터미널에서 코드를 다운 받을 폴더로 이동한 후 아래 명령어들을 붙여넣기하여 hello-world.git 을 clone 합니다.
- Github에서 소스코드 보기: https://github.com/a-mean-blogger/hello-world/tree/21c47294755f8baad1ef7dddd608b5347a619c45
Node.js로 만든 사이트를 헤로쿠를 통해 인터넷에 올리기 전에 해야 할 일이 두가지가 있습니다.
이번 강의에서는 Node JS 첫걸음/Hello World! 강좌에서 만들었던 사이트에 위 두가지를 수정한 후 Heroku(헤로쿠)를 통해 인터넷에 올립니다.
헤로쿠 가입및 다운로드, 명령어등은 단편강좌/Heroku(헤로쿠) 가입, Heroku CLI 다운로드, 간단 사용법강의에서 설명하였습니다.
// 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
가 되었습니다.
// 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 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
명령어로 환경변수를 저장해 주어야 제대로 작동합니다.
댓글
이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기