Heroku를 이용한 Node개발 : Heroku와 github연동하기

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로 연결하는 것을 확인해봐야되겠다.