top drop menu

Recent Post

화요일, 11월 13

Node.js(7) Heroku에 Node.js 앱(홈페이지) 배포하기

앞서 만들고 있는 Node.js로 만든 홈페이지를 무료로 Heroku(히로쿠)  에 올려서 누구나 접속 하도로고 해보자. 배포라는 말을 쓰기도 하는것 같은데 홈페이지를 배포한다고? ^^; 아직 완성이 안된것이지만(언제 끝이 날지도 모르고 해서) 배포를 어떻게 하는지 그 절차가 궁금하다. 이 작업은 윈도우에서 해도 되고 리눅스나 라즈베리파이에서도 가능하다. 일단 기존에 작업을 라즈베리파이에 올려서 하던 중이니 라즈베리파이에서 해보기로 하자.
Heroku는 헤로쿠는 웹 애플리케이션 배치 모델로 사용되는 여러 프로그래밍 언어를 지원하는 클라우드 PaaS이다. PaaS? 이건또 뭐냐? 아뭏든 이것을 이용하면 Node.js로 만든 홈페이지를 공개할 수 있다는 것 같다. 일단 무료인데 조건이 좀 까다롭다. 접속자가 없으면 잠자기 모드로 들어간다고 한다. 자세한 것은 아래 사이트에서 확인 하자.
https://www.heroku.com
라즈베리파이에서 진행하는 간단한 절차
sudo apt update
sudo apt install snapd
sudo reboot
이제 snap을 설치했으니 heroku cli를 설치하면 된다. cli는 명령 줄 인터페이스라는 뜻이다. 한마디로 터미널로 조작하는 거인듯 …
sudo snap install heroku –classic
heroku login
이미지 114
터미널 상태에서  로그인을 지원하지 않는다. 주소를 보여주는데 그 주소를 복사해서 아무 컴 브라우저를 열어서 접속하여 로그인을 진행하면 된다. 그리고 브라우즈는 닫아도 된다. 그러면 터미널에서 로그인 된 상태로 진행이 되어 있다.  로그인이 되었으면 간단히 heroku로 부터 기본 프로젝트를 하나 clone해서 동작을 시켜 보기로 하자.
git clone https://github.com/heroku/node-js-getting-started.git
cd node-js-getting-started/
이미지 115
패키지를 열어 보면 필요한 의존성 패키지 정보가 들어 있다. 이것을 라즈베리파이에서 실행해 볼려면 이 패키지들을 이 프로젝트에 설치해서 줘야 한다.
npm install
해주고 이 프로젝트를 실행시켜 보자. 
node index.js
포트 5000번으로 서버가 실행되었다고 터미널에 출력된다. 이제 웹브라우저로 접소개 보자.
이미지 116
잘 들어 간다. 앞에서 다운로드 받은 프로젝트가 이런 모양이라는 것이다. 이 기본틀을 가지고 사용자가 원하는 모양으로 수정해서 자신의 홈페이지를 만들거나 아니면 독자적으로 원하는 형태의 홈페이지를 만들면 된다는 것이다. 어쨌든 이렇게 저렇게 홈페이지를 만들었다면 이제 이것을 다시 heroku에 올려서 배포를 시켜야 한다. 이 샘플을 사용할것은 아니고 앞서 만들고 있는 홈페이지를 업로드 시켜 보기로 하자.
heroku create ghostsocket01
Heroku에 저장소를 만들어야 한다. 그냥 create하면 랜덤 이름으로 만들어주는것 같다. 프로젝트 이름으로 만들어 주면 될듯 하다. 중복되는 이름이 있으면 생성되지 않는다.
공식 가이드에는 언급이 없지만 로컬 저장소에서 파일 수정이 있거나 하면(있어야 가능한듯) commit를 해주는 과정이 필요한듯 하다.  일부러 쓸데 없는 파일 만들고 하라고 하는 사람도 있다.
git add .
git commit –m “message…블라블라”
하고 나서 push를 해줘야 한다.
git push heroku master
라고 하면 된다고 가이드에는 되어 있는데 이것은 다운로드 받은 것을 그대로 수정해서 하는 경우를 염두에 두고 한 듯 하다. 내가 작업 중이든 프로젝트를 올리려고 하니 에러 나고 난리도 아니다.  git 자체에 config 설정이 빠진 부분이 있어서 수정했다. 이메일과 이름을 설정하라는 에러이다. 설정하고 다시 시도 하니 또 에러다. npm start 가 설정이 안되어 있다는 것 같다. 음~ 이건 또 뭔가?
{
   "name": "web2018",
   "version": "1.0.0",
   "description": "",
   "main": "app.js",
   "scripts": {
     "start": "node app.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "body-parser": "^1.18.3",
     "ejs": "^2.6.1",
     "express": "^4.16.4"
   }
}

빨간색 부분이 누락되어 있어서 추가해 주었다.  최초 실행되는 스크립트 파일명을 적어 주는 듯 하다. 로컬에서 할땐 언급 없더니? 아뭏든 이렇게 수정하고 다시 시도! 또 에러가 업로드는 되었는데 해상 사이트가 열리지 않고 에러가 난다.  일단 오픈하는 과정은 아래와 같다.
heroku ps:scale web=1
이건 의미를 모르겠다. 일단 하자.
heroku open
하면 윈도우라면 자동으로 웹브라저가 열리면서 오픈이 되는 모양인데 라즈베리파이라서 웹브라우저를 열지 못하는 건지 열리지 않고 메세지를 출력한다.
이미지 117
직접 저 주소로 웹브라우저 접속해 보라는 것이다. https://ghostsocket01.herokuapp.com 이게 내 사이트 주소가 된다. 이름을 막 지을게 아니네…!
그런데 또 에러다… 오마이캇! 문제는 포트관련 작성 방법이다. app.js파일을 수정하자.
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({extended : true}));
app.set('view engine', 'ejs');//ejs 템플릿 엔진  연동

// route setting - 라우팅(routing)
app.get('/', function (req, res) {
   //res.send('Hello World!');
   var data = req.body.name;
   res.render('index', {name: data});//views디렉토리안에 있는 index.ejs 파일
});

app.listen(process.env.PORT || 5000, function(){
     console.log('App Listening on port 5000');
});

포트번호는 문제가 아닌데 단순히 포트번호만 적지 말고 process.env.PORT를 같이 기술해 줘야 하는가 보다. 이렇게 수정하고 다시 오픈을 해보니 정상적으로 동작한다. 초기에 샘플로 받은 프로젝트에 index.js파일을 열어 보면 이런식으로 되어 있는 것을 확인 할 수 있다. 대충 보고 했더니 ….
이렇게 하면 내 로컬에 있던 node.js로 만든 사이트를 인터넷에 공개 할 수 있다.
https://ghostsocket01.herokuapp.com
궁금하면 … ^^ 아직 작업중인것이라서 …  대충 이런 흐름으로 heroku 를 이용하여 앱을 배포할 수 있다는 것이다. 중간에 에러가 나서 개고생했는데 에러 메세지나 구글 검색으로 해결을 해가면서 작업을 진행하면 될듯 하다. 처음 다운로드 받은 샘플을 잘 검토 하고 적용하면 될듯 하다.
heroku가 무료라서 좋지만 그렇게 마음 놓고 쓰기는 힘들어 보인다. 그냥 개인 사이트로 활용하기는 문제는 없어 보인다.  속도도 느리다는 평가이고 시간 제한도 있고 … 다른 솔루션이 있는지 더 찾아 보기로 하자.

이미지 118
Blogger Widget