Heroku & Express Quick Start
최근에 알게 된 Heroku에 대한 설명과 Express를 배포하는 과정을 정리하겠습니다. 본 포스팅은 총 3가지의 section으로 나뉩니다.
- Heroku 소개
- Heroku 가입 및 App 생성
- Heroku App에 Express 배포
Heroku?
PaaS(Platform as a Service)의 대표적인 서비스로 서버, 저장소, 네트워크, 호스팅 등 인프라와 빌드, 배포를 간단하게 해주는 서비스입니다.
개인적으로는 5개까지 무료로 호스팅이 된다는 점이 좋았는데 이 부분을 활용해 도메인이 필요한 테스트라던지, 포트폴리오로 활용해도 좋을 것 같습니다.
다만 무료의 경우 30분 동안 사용하지 않을 경우 sleep mode로 전환되어 다시 실행되려면 약간의 delay가 존재합니다. 물론 돈을 주면 그런 문제는 없습니다.
Heroku 가입 및 App 생성
우선 공식 홈페이지에 접속해 Sign up 버튼을 클릭합니다.
필수 정보들을 입력 후 계정 생성 버튼을 클릭합니다.
가입한 이메일로 승인 링크가 발송됩니다. 메일 본문 내용에서 링크를 클릭합니다.
클릭하면 패스워드를 입력하라는 화면이 나옵니다. 패스워드를 입력하면 가입이 완료되고 로그인됩니다.
로그인이 되면 아래 화면으로 리다이렉트 됩니다. 여기서 Create a new app을 클릭합니다.
App name을 입력합니다. 여기에 입력하는 이름은 domain 이름에도 반영됩니다. 나라는 미국와 영국만 선택 가능하므로 따로 변경 없이 Create app 버튼을 클릭합니다.
위에서 버튼을 클릭하면 놀랍게도 서버가 만들어 집니다. 아래에서 Open app 버튼을 클릭합니다.
우리가 위에서 입력한 App name을 기반으로 도메인을 가진 서버가 제공됩니다.
이렇게 간단하게 Heroku를 활용하여 서버를 생성했습니다. 이제 이 서버에 express를 배포하여 동작하도록 하겠습니다.
Heroku에 Express 배포
위 과정에서 Create app 버튼을 클릭하게 되면 친철하게도 아래와 같이 배포하는 명령어들을 절차대로 설명하는 부분을 확인할 수 있습니다.
위 명령어들을 사용하려면 우선 heroku-cli를 설치해야 합니다. 링크를 클릭하여 OS에 맞는 heroku-cli를 설치합니다.
설치 후 heroku-cli를 이용하여 login 합니다. login 과정에서 q를 제외한 아무 키나 입력을 해야 합니다.
키를 누르면 다음과 같이 브라우저에서 Log In 페이지가 뜨게 됩니다
이미 브라우져에서 Heroku에 로그인 되어 따로 계정을 묻진 않았습니다. 버튼을 누르니 아래와 같이 Heroku-cli에 로그인에 성공했다는 페이지가 나옵니다.
Heroku- cli를 확인하면 로그인 되었으니 이제 배포할 Express 파일을 준비하겠습니다. 최대한 간단하게 Express 공식 홈페이지에 나와있는 코드를 사용했습니다.
const express = require('express')
const app = express()
const port = 3000app.get('/', (req, res) => res.send('Hello World!'))
app.listen(process.env.PORT || port, () => console.log(`Example app listening`))
위에서 process.env.PORT는 Heroku가 실행 될 App에 포트를 env를 통해 동적으로 주기 때문에 추가했습니다. 그렇지 않을 경우 아래와 같이 PORT 바인딩에 실패했다는 에러 메시지가 발생합니다.
다음은 packge.json 파일입니다. express를 설치하였고 Heroku가 빌드과정에서 Procfile 파일이 없을 경우 npm start를 실행하므로 추가하였습니다.
{
"name": "heroku",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"start": "node app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1"
}
}Heroku에 배포할 파일이 작성되었으니 위에서 설명한 명령어들을 차례대로 수행합니다.
cd my-project/
git init
app.js와 package.json 생성
heroku git:remote -a sjk5766-express
git add .
git commit -am "first code push"
git push heroku master위에서 마지막 git push heroku master를 수행하게 되면 빌드 로그도 같이 볼 수 있습니다.
위에서 표시한 사이트로 접속하면 우리가 배포한 코드가 적용된 서버를 확인할 수 있습니다.
Travis-ci를 학습하다가 알게 된 Heroku 포스팅을 먼저 작성하게 되었네요. 서두에서 언급했듯이 5개까지 무료 호스팅이 가능해 저도 종종 사용할 일이 있을 것 같습니다.
