[T*project] heroku로 free hosting 해보기

nodeJS 테스트도 하고 포트폴리오 식으로 사용하기 위해서
제작한 웹사이트를 인터넷에 올릴 수 있도록 서버를 제공하는 사이트들 중 하나인 heroku를 사용해보기로 했습니다!!
Heroku 사이트 : https://www.heroku.com/

heroku cli 다운 받기

컴퓨터에서 heroku를 사용하기 위해서는 Heroku CLI(command line interface)를 설치해야합니다. 아래는 다운받기까지의 과정입니다!!

먼저 회원가입해서 로그인합니다.

그리고 heroku CLI를 다운로드하기 위해서 아래 캡쳐화면처럼 documentation으로 들어가 get started를 선택해서 튜토리얼을 진행합니다.

들어가면 이런 식으로 뜨는데 순서대로 nodeJS -> get Started 순으로 클릭하면 됩니다.

이후 나온 아래 사진에서 자신의 os에 맞는 install 방법을 선택해서 cli를 설치하면 됩니다~ cli를 다운 받아도 괜찮고 brew 명령어를 사용해도 좋습니다!!

이렇게 설치가 다 되었으면 heroku 명령어를 사용할 수 있다.

heroku 명령어 사용법

아래 화면처럼 버튼이 있는데 이것을 사용해서 넘어가면서 튜토리얼을 따라가면 nodejs github 하나를 clone해서 heroku에 올리면서 명령어를 익힐 수 있습니다.

나는 내가 만들어둔 깃허브 주소와 crud 게시판을 올려서 실행해보면서 명령어를 익혀보도록 하겠습니다.
깃허브 주소: https://github.com/YeeunJ/nodeJSstudy.git

git clone해서 폴더를 만들고 그 안으로 이동했다면 다음과 같은 명령어로 heroku를 사용할 수 있습니다.

$ heroku login // 현재 만들어놓은 계정으로 로그인
$ heroku logout //로그아웃
$ heroku create <사이트 이름>// 사이트 생성
-> 나중에 <사이트 이름>.herokuapp.com 으로 접속할 수 있습니다!!
(<사이트 이름>을 적지 않고 입력하면 자동 생성된 이름으로 만들어집니다~ㅎㅎ)

$ git push heroku master //git에 업로드
$ heroku logs --tail //log 내용 확인

위와 같은 명령어들이 있고 만약 git 폴더 안에서 그내용을 모두 올리고 싶다면 아래를 실행하면 됩니다!!

heroku login
heroku create
git add *
git commit -m "heroku upload"
git push heroku master

heroku로 push 할 때 주의할 점

먼저 heroku는 npm start를 사용해서 프로젝트를 실행하기 때문에 package.json 파일에서 명령어 설정을 해주어야 합니다!!

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js" //추가된 부분!!
  },

이런 식으로 script안에 start라는 명령어를 사용해서 로컬에서 실행할때 썼던 명령어를 실행할 수 있도록 추가해주어야 합니다.

두번째로 포트번호를 설정해주어야 합니다. 저는 제 localhost에서 실행할때 3000포트를 사용해서 실행했는데 heroku에서 실행할때는 포트번호를 받아와서 실행할 수 있도록 코드를 추가해주어야 합니다.
index.js 파일에서 아래와 같이 수정하면 됩니다~!!

var port = process.env.PORT || 3000;; //추가된 코드!!
app.listen(port, function(){
  console.log('server on! http://localhost:'+port);
});

process.env.PORT로 heroku에서 port 번호를 받아와서 쓸 수 있습니다.

실행화면

이 두가지를 설정하고 실행해보면 아래와 같이 잘 실행 되는 것을 확인 할 수 있습니다.(관련 코드는 위의 github에 나와있습니다!!)