1. Heroku 에 Node Express 올리기

간단하게 Express 프레임 워크를 사용한 Node 백엔드 서버를 Heroku 서비스에 올려보도록 하겠습니다.

Heroku는 aws처럼 물리서버 없이도 서버를 구동시켜주는 좋은 서비스에요! 무료로 사용할 수 있는 서버의 범위도 훨씬 넓구요. 하지만 url이 뒤에 herokuapp이 붙는다는 걸 생각해두셔야합니다.

간단한 서버 만들기

$ mkdir name
$ cd name
$ yarn init

먼저 폴더를 만든 후 yarn init 으로 package.json을 만듭니다. yarn init 필요한 필드만 입력하시고 엔터쳐서 넘어가셔도 됩니다. 이후 이이름 폴더 내에 .gitignore 파일을 만들어 node_modules를 미리 추가해두면 git에 업로드할 때 node_modules 내의 라이브러리들이 올라가는 것을 방지할 수 있습니다.

$ yarn add express

저희는 express를 사용할 것이므로 yarn add express 를 통해 다운받아 줍니다. 

import Express from 'express';

const app = Express();

app.get('/', (req, res) => {
  res.send('index page');
});

app.listen(3000, () => {
  console.log(`3000번 port에 http server를 띄웠습니다.`);
});

그리고 이렇게 간단하게 작성해봅시다. 기본 url 에 접속하면 index page 라는 메세지를 띄우게 하는 코드입니다. 위에 const express = require("express") 대신 import 문법을 사용했는데요. 이렇게 하기위해서 다음 라이브러리 esm을 설치해주세요.

$ yarn add esm
$ node -r esm index.js

라이브러리를 yarn add를 통해 설치해 주신 뒤 node -r esm index.js 명령어로 실행하면 페이지가 잘 나오는 것을 확인해볼 수 있습니다. 

  "engines": {
    "node": "12.14.0",
    "npm": "6.13.4"
  },

다음으로 현재 사용하고 있는 노드의 버전과 npm의 버전을 적어주어야 하는데요. 이렇게 적어줘서 heroku cli 가 알 수 있게 해주어야 합니다. 위는 제가 사용하고 있는 버전인데요. 제가 글을 쓰고 있는 현재 노드 버전 중에서 제일 최신 버전이에요! 아래 버전들도 아마 지원될 겁니다.

$ node -v
$ npm -v

자신의 컴퓨터에 설치된 노드 버전과 npm 버전을 모르겠다면 해당 명령어를 통해 알아볼 수 있습니다.

heroku cli 설치

이젠 서버를 다 만들었으니 heroku 서비스에 올려볼게요! heroku 에 가입한 뒤 Documentation 에 들어가면 heroku cli 를 눌러 다운받아줍니다. 저렇게 인스톨러를 다운받아도 되고 brew 명령어를 통해 터미널에서 설치할 수도 있습니다. 

$ brew install heroku/brew/heroku

brew를 통해 설치하려면 위 명령어를 콘솔에 붙여넣어 주세요. 저도 간편하게 brew 명령어로 했어요!

$ git init 
$ heroku login

이젠 git init 을 해 줄 차례입니다. 깃을 통해 heroku 서비스를 이용할 수 있기 때문이에요. 로그인 후엔 깃에 커밋해주고 heroku create을 해줍니다. 특이하게도 heroku는 쉘에서 로그인하는 게 아니고 브라우저로 리다이렉트되서 로그인하더라구요!

포트 수정

const PORT = process.env.PORT ? process.env.PORT : 3000;

...

app.listen(PORT, ...

그리고 git에 push 하기 전에 포트 3000 을 바꿔줘야해요! 로컬호스트에서는 3000에서 돌렸지만, heroku에서는 지정된 포트를 사용해야 하기 때문에 process.env에서 Port를 찾아 저렇게 변수에 담은 뒤, app.listen의 포트도 수정해줍니다. 위처럼 바꿔주시면 돼요!

$ git add .
$ git commit -m 'first commit'
$ git push -u origin master
$ heroku create

다음은 깃허브에 올려서 코드 관리를 해볼게요. 이 부분은 불필요하신 분들은 안해도 되는 것 같습니다. github로 버전 관리를 하지 않으실 분들은 맨 마지막 줄의 heroku create만 해서 url 생성작업을 해주시면 됩니다.

heroku url 생성을 마쳤다면 두 번째 url인 git remote url 을가져와서 다음 명령어를 마무리합니다.

$ git remote add heroku {gitUrl}
$ git push heroku master
$ heroku open

아까 복사해 둔 url을 붙여넣어 원격 저장소를 설정하고 heroku 에 push 합니다. push 하면 이후 heroku open 을 통해 잘 설정되었는지 체크해보면 로컬호스트에서 돌렸던 것처럼 잘 작동할거에요!