rm /blog

IT系技術職のおっさんがIT技術とかライブとか日常とか雑多に語るブログです。* 本ブログに書かれている内容は個人の意見・感想であり、特定の組織に属するものではありません。/All opinions are my own.*

Heroku上にNode.jsのアプリケーションをDeployする備忘録

Heroku上にNode.jsのアプリケーションをDeployする簡易手順の覚書。
自分用の備忘録の色が強いです。


前提条件

git CLIがインストールされてること
https://git-scm.com/book/ja/v2/%E4%BD%BF%E3%81%84%E5%A7%8B%E3%82%81%E3%82%8B-Git%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

heroku CLIがインストールされてること
https://devcenter.heroku.com/articles/heroku-cli

Node.jsがインストールされてること
https://nodejs.org/ja/download/

(1)herokuでアプリケーションを作る

heroku loginする

heroku login
heroku: Press any key to open up the browser to login or q to exit:
Opening browser to https://cli-auth.heroku.com/auth/browser/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
Logging in... done
Logged in as [user name]

heroku loginって打つと↑の2行目のメッセージが出るので未入力でEnter押す。
そうするとブラウザでHerokuのログイン画面が出るので、ログイン。
ログインするとCLIに戻ってきて4行目に「こいつでログインしました」という情報が出てくる。

heroku createでアプリつくる

heroku create [application-name]
Creating ⬢ [application-name]... done
https://[application-name].herokuapp.com/ | https://git.heroku.com/[application-name].git

Herokuの画面上でも出来る。

application-nameはherokuのURLの一部になる。
なので誰かが使用済みの名前は使えない。
文字で始まってなければならず(数字や記号を一文字目に持ってこれない)、最低3文字以上指定が必要。
使えるのは文字、数字、ハイフンのみ。

これで作成完了するとhttps://[application-name].herokuapp.com/というURLが出来上がってる。
何もdeployしてない状態なので、Herokuの用意したデフォルトの初期ページが表示される。

(2)リポジトリをつくる

application-nameのディレクトリを作って中に移動する

cd [application-name]


git initする

git init


herokuと繋げる

heroku git:remote -a [application-name]


この項(2)はHerokuのアプリケーションDeployページに全部載っている。

(3)Node.jsで適当になんかつくる

Node.jsで適当になんかつくる。

まずnpm initする。

npm init

この際、指定するpackage nameは作成したapplication nameと同じにしておく。

とりあえず適当になんかつくる。
簡単に以下のようなコードにしておく。

const express = require('express');
const app = express();
const port = process.env.PORT || 4000;

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

app.listen(port , ()=>{
   console.log('server listened by port ' + String(port) + ' ...');
});

赤太字の部分が重要で、ローカルで動かす分には空いてるポートを適当に決め打ちで(ハードコーディングして)も良いのだが、herokuの場合、起動するポートをprocess.env.PORTという環境変数値から呼び出すようで、この記述をしていないとHeroku上でアプリケーションが起動しない。
実際に起動するのはHeroku上で空いてるポートになるようで、deployの度に毎回変わる。

expressを使ってるのでnpm installする。

npm install --save express

赤太字の部分がやはり重要で、これを指定してpackage.jsonのdependenciesに記録しないとheroku上で動いてくれない。
これはexpressに限らず、他にnpmで持ってきた各種のパッケージがある場合は、herokuに渡す前にそれらを全てpackage.jsonに書いておく必要がある。

とりあえずローカルで動くか確かめてみる。

node index.js

動くの確認できたらpackage.jsonに以下赤太字の記述を追加する。

{
  "name": "[application-name]",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    ,"start" : "node index.js"
  },
  "author": "me",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

Herokuはpackage.jsonのscripts.startという要素に記述されたコマンドでアプリケーションを実行しようとする。
逆に言うとこの記述がないとheroku上でアプリケーションが起動できない。

(4)herokuにdeploy

git addする

git add .


git commitする

git commit -m "first commit"


git pushする

git push heroku master


この後標準出力にべらべらと出てくるが、herokuのgitにpushすれば、後はherokuが勝手にdeployまでしてくれる。
簡単!
以後も何らかの変更を行ったと、(4)の一連の手順を踏めばherokuまで反映される。
実行完了したらhttps://[application-name].herokuapp.com/にアクセスして、反映されているか見る。
なお、無料枠だと、60分アクセスしないとsleep状態になり、次のアクセスでプロセスの起動から走るので、遅くなる。