nodejs + bower + git(sourcetree) + heroku 사용법

DevOps·2016.02.26 22:54

토요일마다 진행중인 스터디를 중간 결산 겸해서 결과물을 보고자 heroku에 배포를 준비하였다.

기존에 구글링해서 나온 자료가 nodejs만으로 간단하게 진행하고 있었는데,

나같은 경우 sourcetree로 git을 관리하고, 프로젝트 의존성에 bower가 포함되어 있어서 자료찾기가 힘들었다.

1시간이면 될줄알았는데 ㅠ 많은 시간을 소모하여 내용을 기록한다.


heroku는 PaaS의 일종이다. 

우리가 흔히 알고 있는 AWS나 구글앱엔진의 경우에는 IaaS이므로 이들과 동일하다고 볼순 없지만 크게 차이는 나지 않는다.

자세한 설명은 링크를 참고



그럼 헤로쿠를 시작하자


1. 헤로쿠 가입

https://www.heroku.com

위 링크로 이동하여 sign up for free 버튼을 클릭하여 회원 가입을 진행하자.



계정생성을 하면 아래처럼 인증메일이 온다.



인증메일을 클릭하여 비밀번호를 등록하자.




2. toobelt를 설치

개인 PC에서 헤로쿠를 사용하기 위해 toolbelt를 설치한다.

https://toolbelt.heroku.com/

위 링크를 클릭하면 아래와 같은 화면이 나오는데, 본인 PC에 맞게 설치파일을 다운받아 설치하면 된다.




3. 헤로쿠 로그인

toolbelt까지 설치하였으면 터미널(맥,리눅스) 혹은 명령 프롬프트(윈도우)를 실행하여 아래의 명령어를 입력한다.

heroku --version



version 확인후에 헤로쿠에 배포할 프로젝트 폴더로 터미널(명령프롬프트포함 하여 이하 터미널)의 위치를 이동하자

 


프로젝트 폴더로 이동후, 아래의 명령어로 계정의 메일과 비밀번호를 입력하여 헤로쿠에 로그인을 한다.

heroku login



로그인한 터미널은 일단 잠깐 창을 내려놓고 다음을 진행하자.


4. 헤로쿠 어플리케이션 생성

헤로쿠 배포를 위해서는 본인의 PC에 git이 필수다.

git을 이용하여 해당 프로젝트의 master 브랜치에 push가 되면 헤로쿠에 자동으로 배포가 되는 방식이므로 설치가 안되어있다면 설치하자.

보통 맥이나 리눅스라면 터미널이 워낙 잘되어있어 git을 커맨드만으로 관리하겠지만 윈도우의 경우 워낙 터미널이 구리기도 하고, 

Source Tree(맥도 지원한다)라는 좋은 GUI 툴이 있으므로 soure tree가 설치가 안되어있다면 이참에 같이 설치하자.

설치 방법은 이전에 포스팅한 sourcetree+github 연동을 참고하자

그리고 혹시나 헤로쿠에 배포할 프로젝트가 git 프로젝트가 아니라면 git 프로젝트로 전환하자. 

(이역시 위 링크를 참고하면 된다)


여하튼 git & sourcetree까지 설치가 끝나면 내려놓은 헤로쿠에 로그인된 터미널을 열어 아래의 명령어로 헤로쿠 어플리케이션을 생성하자.

heroku create 프로젝트이름


위에 프로젝트 이름은 헤로쿠로 호스팅될 도메인명이 된다.

즉, heroku create jojoldu 라고 명령어를 입력하면 

jojoldu.herokuapp.com 으로 호스팅된다.

입력하지 않으면 랜덤으로 이름을 정해주니 웬만하면 원하는 이름으로 입력하자

(난 안넣어서 망했다)



위 이미지를 보면 https://vast-tundra-17564.herokuapp.com 이 앞으로 헤로쿠에 배포된 프로젝트가 호스팅될 도메인이고,

그 프로젝트를 관리하는 주소가 https://git.heroku.com/vast-tundra-17564.git 이다.

헤로쿠에 생성된 프로젝트가 잘 되었는지 확인하기 위해서 

source tree의 원격저장소에 헤로쿠 git주소가 등록되었는지 확인하자.



Repository(저장소)를 클릭해서 나오는 메뉴 중, Repository Settings 버튼을 클릭하면 아래와 같이 나온다.



이렇게 되면 해당 프로젝트는 원격저장소로 기존의 주소와(github) 헤로쿠 주소를 가지고 있다는 말이며, 둘다 같은 프로젝트로 관리가 가능하다.

(참고로 sourcetree는 한번의 커밋으로 2곳의 원격저장소로 push할 수는 없어서 push를 2번해야한다)

 

5. bower를 사용하기 위해 package.json 수정    

로컬에서 프로젝트 구성할때는 이미 PC에 bower가 설치되어있었고, bower 의존성도 다 받아있는 상태였지만

헤로쿠로 배포하는 경우에는 1) 일단 bower를 설치해야하고, 2) bower.json 변경에 맞춰 bower install 명령어도 입력을 해야한다.

그래서 package.json 내용을 수정해서 헤로쿠에 배포되면 위 내용을 전부 실행되도록 한다.

1) dependencies에 bower 추가

2) scripts 추가  



6. app.js의 port 수정    

node 프로젝트의 경우 app.js 혹은 index.js가 entry point로 지정하는데 이때 포트를 보통은 8080 이나 5000을 사용한다.

근데 이렇게 지정하면 헤로쿠 배포시에 계속 배포가 실패했다는 에러를 내뿜는다.


'error code=H10'

 (이렇게...)


포트번호가 할당안된다고 메세지가 계속 나와 무슨 문제인가 계속 찾아보니

헤로쿠의 경우 포트를 동적할당 하기 때문에 고정 포트를 박으면 안되는것이었다 ㅡㅡ..

그래서 app.js의 기존내용인 app.listen(8080)을 아래와 같이 변경한다.


app.listen(process.env.PORT || 8080, function(){

    console.log("Express server listening on port %d in %s mode", this.address().port, app.settings.env);

});



7. 헤로쿠에 push

자 이제 드디어 결과물을 볼 차례이다.

source tree를 이용해서 헤로쿠로 push를 해보자.



push를 하게 되면 헤로쿠가 자동으로 배포를 진행하고 node app.js를 실행시킨다.

잘 실행되었는지 로그를 보고 싶다면 터미널에서


heroku logs -t  


를 입력하면 로그를 확인 할 수 있다.

이 외에도 터미널에서 실행시킬수 있는 헤로쿠 명령어가 몇개 있는데 간단하게 소개하면


heroku create : 헤로쿠 저장소 생성
heroku logs -t : 로그확인
heroku info : 헤로쿠 정보

heroku run bash : 헤로쿠 bash 모드로 전환


위와 같다.

여기까지 에러가 없었다면 이제 헤로쿠가 호스팅해주는 본인의 도메인으로 접속하여 프로젝트를 확인하자.

혹시나 도메인명을 잊었다면 괜찮다.

터미널에서 heroku info를 입력해서 다시 url을 확인하면 된다.





블로그가 도움이 되셨다면 아래 공감과 광고 클릭을 부탁드립니다!

공감과 광고클릭은 앞으로 계속 글을 쓰는데 큰 힘이 됩니다!




IntelliJ & 안드로이드 스튜디오의 기본기를 배우고 싶다면 아래 영상을 참고해보세요 !

Posted by 창천향로 창천향로

태그


티스토리 툴바