현기증난단 말이예요

Heroku X NodeJS

2. Heroku와 Github 연동하기

1. 새로운 Heroku 어플리케이션 생성 

 heroku 관련글을 정말 오랜만에 올리는 것 같다. 최근에 heroku를 이용한 nodejs application을 간단하게 개발해보는 스터디를 진행하면서 관련된 정보들을 여기에 남겨두려고한다. 시작은 강좌글 같은 느낌이었는데 아마도 일지 느낌으로 변하게 될 것 같다. 

 글에서야 한페이지 차이지만 제법 시간이 지난관계로 새로 어플리케이션을 생성하고 프로젝트를 진행하려고한다. 어플리케이션 생성이 조금 달라진 것들이 있는데 그 중 하나는, heroku CLI에서 명령어로 어플리케이션을 만드는 경우 git만 생성될뿐 git clone하여도 git을 제외하곤 아무파일도 들어있지 않는 상태로 생성된다는 점. 아래 화면을 보면 확인해볼 수 있다. 

우선 어플리케이션 생성은 이전과 같다. 

heroku login // heroku CLI에 먼저 로그인하자
heroku create YOUR-APP-NAME // heroku 어플리케이션을 생성한다.
git clone https://git.heroku.com/YOUR-APP-NAME // 깃을 이용해 heroku 파일을 복사해온다.

dir 명령어를 실행해도 아무것도 안들어 있음을 확인할 수있다. 이제 여기에 express를 이용해 기본 골자를 만들어 다시 heroku에 배포(deploy)할 예정이다. 여기서는 간단한 express 사용법만 다루고 상세한 express의 기능은 기회가 되면 마저 이어가는걸로

2. express-generator로 express 스캐폴딩  

어플리케이션의 기본 구조를 빠르게 만들어보고 github를 연동해보는 단계까지 진행해볼 계획이기때문에 express-generator로 간단한 어플리케이션 구조를 만들어 보려고한다. 일단 nodejs를 설치했으면 npm이 설치 되어있을테니 npm으로 본작업에 필요한 것들을 준비해보자.

npm install -g express // express를 먼저 설치해주자. -g는 해당 폴더가 아닌 전역 설치를 이야기한다.
npm install -g express-generator // express를 사용하는 node어플리케이션을 만들어주는 생성자다.

이후 git명령어로 clone해온 폴더의 상위폴더에서 dir로 해당 폴더가 있는지 확인한 후, express-generator로 내용을 덮어씌울 예정이다. 아래와 같이 진행해주자.

express YOUR-APP-NAME // 이미 생성된 폴더의 이름과 같이 지정해주어야 덮어씌운다.
cd YOUR-APP-NAME // 생성된 어플리케이션의 폴더로 접근한다.
npm install //  express가 자동생성한 npm의 설정대로 필요한 파일들을 설치한다. 

모두 진행하고 나면 위와같은 화면이 나타난다. 이제 dir를 쳐보면 다양한 파일들이 있는걸 확인할 수 있다. 여기서 바로 heroku git으로 다시 deploy하면 그대로 진행 할 수 있겠지만.. 나는 github에 연동해보고 싶기때문에 아직 보류하도록한다.

3. github로 push하기

사실 이 작업을 진행하면서 느낀건, heroku 어플리케이션을 생성한 후 굳이 git clone을 해서 혼선을 만들지 않았어도 된다는 점인데.. 그 이유는 진행해보다보면 알 수 있다. 하지만 이 작업을 진행하면서 git에 대해서 약간 더 알게 될 수 있었기 때문에 나의 의식의 흐름;; 그대로 진행해보도록한다. 

먼저 github에 repository를 만들어주자. 이름은 상관없다 편한대로 만들고 따로 적어두기만 하면 오케이! 그 후 cmd 혹은 powershell로 위의 과정에서 만든 폴더로 접근한다음 다음과 같은 순서로 작업을 진행할 예정이다. 

// 현재 폴더에 저장된 git이 바라보고 있는 외부저장소 위치를 확인 
// heroku git으로 등록되어있을 것이다. 
git remote -v

// 외부저장소의 주소를 변경 
git remote set-url origin YOUR-GIT-REPOSITORY.git

// 외부저장소 주소가 변경되었음을 확인
git remote -v 

// 로컬의 git정보와 외부 저장소의 git정보가 서로 다르므로 합쳐준다.
git pull 

// git에 커밋하고 push해준다. 
git add .
git commit -sm 'first commit to github'
git push
// 이때, push되는 위치는 heroku git이 아닌 github repository이다.

전부 실행하면 사진과 같은 형태로 진행된다. 우리는 heroku 앱을 만들고,  heroku git에서 clone해왔으나 굳이 git의 정보를 변경해 github에 소스를 올려두었으므로 이제 github와 heroku를 연동해주어야 된다. 

4. github와 heroku 연동하기

먼저 http://www.heroku.com에서 로그인 한 후 만들어둔 heroku앱의 'Deploy'탭으로 가자. 그리고 Deployment Method영역의 github를 클릭 한 후 로그인하면, 해당 계정의 repository를 검색할 수 있다. 지정할 repository를 검색한 후 붉은 영역의 connect를 클릭하자.

connect를 클릭하면 아래같은 화면이 나오는데, 이 페이지에서 확인해야할 점은 두가지, Automatic Deploys(파란영역)와 Manual Deploys(초록영역)이다. 

 Automatic Deploys는 github의 저장소가 가진 여러 branch중 하나를 정해 브런치가 업데이트 될때마다 자동으로 heroku로 배포(deploy)하도록 도와준다. 다른 빌드할 필요없이 그냥 push만 해주면 되는 셈. 

 Manual Deploys는 저장소의 branch중 하나를 선택해 실시간으로 직접 배포하는 기능이다. 이미 우리는 github 저장소에 커밋하고 push까지 해주었으니 여기서 수동 배포를 해줘야 heroku 상에 반영됨을 확인 할 수 있을 것이다.

 직접 배포까지 완료하고 나면 Manual Deploys 영역의 하단에 'Your app was successfully deployed.'라는 메시지와 함께 'view'버튼이 활성화 되는데, 클릭하면 배포된 홈페이지로 들어가 볼 수 있다. 정말 친절하기 그지없는 heroku 사마.. 화면이 출력되면 "welcome to express"라는 express의 기본 문구가 반겨줄 것이다. 

이제 소스 관리 겸 외부 저장소에 연동하는 법까지 확인 했으니 다음엔 간단하게 뷰를 조작하고 외부 혹은 내부 DB로 연결하는 것을 확인해봐야되겠다. 

Heroku X NodeJS

1. Heroku App 만들기 

이 글은 Heroku사의 Getting Started with Node.js on heroku 문서를 참고해 만들어졌습니다.

1. Heroku 로그인 

 개요 글에서 남긴 간단한 개발 요건들을 설치한 후 Heroku의 회원가입을 마치고나면 개발을 시작할 준비가 끝나게 된다. 글을 읽기전에 혹시나 NodeJS 혹은 Heroku Toolbelt가 설치되지 않았다면 먼저 설치해주길 바란다.  설치가 모두 끝난 뒤에는 먼저 Heroku Toolbelt에 계정을 로그인해두어야한다. 먼저 CMD를 실행해보자. 

 
  heroku login

 위의 명령어를 실행한 후 이메일과 패스워드를 입력해주면 이제 어플리케이션을 생성하고 관리할 수 있게된다. 

2. Heroku Application 만들기

 heroku측에서 제공하는 소스를 그대로 사용할 수 있겠으나 이 글에서는 바닥에서부터 웹을 만드는 과정을 기록하는게 목적이기때문에 어플리케이션을 생성하고 직접 업로드하고 올려보도록하겠다. 먼저 Application을 생성하려면 cmd에서 아래의 커맨드를 입력한다. 

heroku create YOUR-APP-NAME

 위의 커맨드를 입력하면 (heroku의 앱 이름 유효성의 벗어나지않는 경우) 간단하게 heroku application이 생성된다. "git@heroku.com:YOUR-APP-NAME"형식의 git 주소를 기억해두도록하자.

생성된 어플리케이션은 http://heroku.com에서 로그인한 후 대쉬보드에서 확인 할 수 있다.

3. git 

 Heroku앱을 만들고 나면 Heroku앱을 작업할 공간을 로컬에 만들어두어야한다. 먼저 cmd로 소스를 저장할 폴더로 이동한 후 아래와 같이 입력해주자 

// 해당 폴더에 git 초기화
git init
git clone https://git.heroku.com:YOUR-APP-NAME.git

 heroku의 git주소는 보통 git@heroku.com:YOUR-APP-NAME.git 형식으로 설정된다. 위와 같이 입력하면 현재 폴더로 heroku에 저장된 APP의 git을 가져오게된다. 물론 현재는 앱을 만든 후 아무것도 업데이트하지 않았기때문에 클론된 폴더안에 .git폴더 외에는 아무것도 들어있지 않다.

# 혹시 git clone이 정상적으로 작동되지 않는다면 heroku명령어로 소스를 가져올 수 도 있다.

heroku git:clone --app YOUR-APP-NAME

4. Heroku에서 실행할 Node 소스 코딩 

 이제 git을 초기화하고 git 폴더를 가져왔으니 Heroku에서 사용할 간단한 NodeJS소스를 로컬에서 먼저 작업해야한다. 간단히 콘솔에서 앱이 실행되는 상황을 확인하고 화면에 "Hello World"를 찍어주는 정도까지만 진행해보도록 하자.

// index.js
 
var express = require("express"),
 app = express();

// Heroku의 환경 변수 PORT가 존재하면 환경변수를 사용하고 , 없다면 5000포트를 사용하도록한다.
// 로컬에서 실행하기 위해 설정한다.
app.set("port" , (process.env.PORT || 5000));
app.listen(app.get("port") , 
  function(){ 
   console.log("APP IS RUNNING ON ["+ app.get("port") +"]");
 });

app.get("/" , function(req , res){
  res.send("Hello World!");
});

위 소스를 "index.js"라는 이름의 파일에 저장한 뒤에  npm으로 express를 설치 해주고 node로 index.js 파일을 실행하면 http://localhost:5000에서 HelloWorld라는 문구를 확인해 볼 수 있다. 이 정도면 동작을 확인 할 수 있는 간단한 nodeJS앱이 만들어진 것 같다. 

 하지만 Heroku에서 해당 앱을 실행하기 위해서는 추가적으로 package.json파일을 작성해주어야 한다. heroku의 git에 생성된 프로젝트가 어떤 엔진에서 돌아가는지 , 어떤 소스를 메인으로 실행할지, heroku앱이 스타트 되면 어떤 스크립트를 실행할지에 대한 설정이 되어있지 않기때문이다. package.json은 간단히 아래와 같이 작성 할 수 있다. 

{
    "name": "demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start" : "node index.js"
    },
    "dependencies" : {
        "express" : "~4.9.x"
    },
    "engines" : {
        "node" : "0.12.2"
    },
    "author": "GOMJA",
    "license": "MIT"
}

앱에서 기본적으로 express를 사용하니 dependencies에 express를 추가해주고 , main파일은 index.js로 사용하며 앱의 엔진은 node 0.12.2버전을 사용한다고 명시해 두었다.

5. Heroku에 소스 업로드 

 package.json파일과 간단한 node 소스를 작성하였으니 heroku로 파일을 업로드해야하는데, heroku는 ftp등을 사용하지 않고 기본적으로 git을 사용하고 있기때문에 해당 앱의 git으로 push해주어야한다. heroku앱으로 푸시 하기 위해서는 cmd에서 다음과 같이 입력해주면된다. 

git add .
git commit -m "YOUR COMMIT MESSAGE"
git push heroku master

이제 앱의 git으로 소스가 푸시되고 앱을 실행할 수 있게되었다. 혹시 git push heroku master문을 실행할 때 정상적으로 실행되지 않는다면 

git remote heroku -v

로 git의 환경을 설정해주자. heroku에 push하기 위한 설정을 git에서 자동으로 작업해준다. 

6. Heroku앱 실행하기 

 Node소스를 작업하고 서버에 업로드하였다면 이제 업로드된 heroku앱을 직접 실행해볼 차례다. cmd에서 다음과 같이 타이핑하자

heroku ps:scale web=1
heroku open

현재 작업중인 어플리케이션을 배포하고 인스턴트를 생성해준 후 , heroku 어플리케이션을 실행하도록한다. 2번째 줄을 실행하면 잠시뒤 자동으로 브라우저에 http://APP-NAME.herokuapp.com이라는 도메인으로 접근하게된다. 

 소스가 제대로 올라갔다면 로컬에서 실행한 화면과 동일하게 화면에서 HelloWorld를 출력해줄 것이다.

1. Heroku ?

 여태 미루고 미뤄왔던 NodeJS 개발을 다시 붙잡게될 기회가 생겼는데, 정작 시작하고 나니 호스팅에 대한 고민을 여러번 하게 되었었다. Cafe24등의 한국 호스팅으로 빨리 빨리 처리하려던 차에 우연찮게 heroku라는 해외 호스팅을 알게되었다. ruby, php, java부터 node.js, python과 다소 생소한 clojure등도 취급하고 있다. 

 다소 생소한 포맷부터 주로 사용되는 포맷들까지 제법 넓은 범위를 아우르고 그 포맷들에 따른 Doc들도 상황별로 제법 상세하게 준비되어있기 때문에 , 취미 및 공부삼아 간단한 개발을 하기에는 더 할나위 없는 포맷이라고 할 수 있을 것 같다. 

 heroku를 사용하는데 있어 제일크게 다가온 장점은 아무래도 무료라는 점. 한개의 dyno(웹 어플리케이션 단위)까지 무료로 사용할 수 있으나 그 사양이 제한적이다. 자세한 사항은 여기를 참고하시길. 

 가격적인 측면뿐만 아니라 addon들도 선택하는데 제법 큰 역할을 했다. mongoDB부터 postgres등의 DB 운용부터 각종 포맷별로 유용하게 사용될 수 있는 기능들은 addons으로 무료 혹은 유료로 많은 개발자들이 배포하고 있는데, heroku사용자는 이 기능을 간단하게 가져와 사용할 수 있다. 각종 addon들의 설명도 제법 잘되어있어 개발하는데에도 큰 어려움없이 진행할 수 있어 여러모로 도움이 되었다. 

 요즘은 NodeJS를 취급하는 호스팅 업체가 제법 많아져서 선택의 폭이 넓어졌지만, 간단한 공부 목적으로 개발을 시작하는 단계라면 heroku를 사용해보는 것도 좋을 것 같다. 이 글은 몇 없는 heroku사용자 중에서도 몇 없는 node개발을 다룰 예정이니 heroku에 흥미가 있다면 계속 지켜봐주길 바란다.

2. 조건

•   개발 환경 
• OS : windows 10 pro k
• IDE : brackets io (변경)
• Editor : Microsoft Visual Studio Code
• 도구
• heroku toolbelt
• heroku의 어플리케이션들을 커맨드 상에서 다룰 수 있게 해준다. heroku의 git을 이용할 수도
• nodejs 
• nodejs를 개발하려고 하니 기본적으로 설치되어있어야 한다. 
• git 
• heroku toolbelt에서 가지고 있다. heroku로 소스를 보내고 내려받는데 사용하도록 한다.