【2019年6月版】Node.jsアプリをHerokuにデプロイする【エラー対処法も記載】

こんにちはMIYACHIN(@_38ch)です。

この記事では、簡易的なNode.jsアプリを作成して、Herokuにデプロイするまでの手順と、その間でつまづきやすい設定について書いていきます。

すでにHerokuにデプロイするところまで来ていて、エラーの対処法が気になる方は、記事の最後の方だけ読んでください。

この記事の内容

  • Heroku CLIをインストールする(3分)
  • Node.jsサンプルアプリを作成する(5分)
  • Herokuにデプロイする(3分)
  • エラーになった時に確認すべき項目

この記事の前提

  • Node.js/npmがすでにインストールされている
  • Gitがすでにインストールされている
  • Herokuのアカウントをすでに持っている

Heroku CLIをインストールする

Heroku CLIはターミナルから、Herokuに対して、ソースをpushしてデプロイをやってくれるコマンドです。基本的にはHerokuの公式ドキュメントを見ながら進めていきましょう

バージョンが確認できるようになれば成功です。

miyachin ~ $ heroku --version
heroku/7.25.0 darwin-x64 node-v11.14.0

Node.jsサンプルアプリを作成する

Hello Worldアプリを作成しましょう。まず、ディレクトリを新規作成して、Node.jsアプリの初期化作業をします。

cd node_app
npm init

npm initを実行するとpackage.jsonを作成するために何個か質問を聞かれますが、基本的にはEnterキーを押し続けて、前に進めれば十分です。

それでは実際に、Node.jsを書いていきましょう。Index.jsの中を以下のように書いていきます。

var http = require("http");
var port = process.env.PORT || 8000;
http.createServer(function (request, response) {
   response.writeHead(200, {"Content-Type": "text/plain"});
   response.end("Hello World");
}).listen(port);

このファイルを作成したあと、以下を実行するとローカルでNodeサーバーが立ち上がり、ブラウザのローカルホストのポート8000を見れば、Hello Worldが表示されます。

node index.js

Herokuにデプロイする

それでは、ローカルで動くことが確認できたので、Herokuにデプロイする準備をしていきましょう。

これも基本的には、Herokuのサイトに書いていますが、日本語で噛み砕いていきます。Herokuにデプロイするために、package.jsonを少し修正します。

修正する内容は以下の2点です。

  1. Node.jsのバージョンを定義する
  2. Start Scriptを定義する

1. Node.jsのバージョンを定義する

これは、Herokuにデプロイする際に、Heroku上にインストールするNode.jsのバージョンを指定するという意味で、公式サイトの「Specify the version of node」という項目に当たります。

基本的には自分がローカルで使っているNodeと同じバージョンでいいと思いますが、公式サイトのサンプルに、「10.x」とあるので、10系のNode.jsを使う方が良いのかもしれません。

これをpackage.jsonのお尻に追記します。

"engines": {
    "node": "10.x"
},

2. Start Scriptを定義する

Start ScriptはソースをHerokuにデプロイ後に、Heroku上でどのようにNode.jsアプリを起動させるかが定義されたものです。

package.jsonのscriptの箇所に、以下を追記しましょう。

"start": "node index.js"

これで、ローカルでも、npm startを実行すると、package.json経由で、node index.jsが実行され、nodeアプリが立ち上がるはずです。

これで、package.jsonの準備が整いました。それでは、実際にデプロイしていきましょう。

まずは、gitを使って、ローカルレポジトリにcommitしていきます。(この記事では、gitの仕組みについては解説しません)

git add .
git commit -m "Initial commit"
heroku login

heroku上にアプリをデプロイするための、空間を作ります。

heroku create

herokuにデプロイします。

git push heroku master

これだけです。デプロイが完了すれば、デプロイ先のURLがTerminal上に表示されるので、ブラウザで”Hello World”が確認できれば成功です!

エラーになった時に確認すべき項目

デプロイが正常に完了して、URLにアクセスしてもアプリがエラーになっている場合があります。その際は以下の項目を確認してみてください。

1. Nodeのポートが環境変数を見るように書かれているか?

ポイントはindex.jsに書いた

var port = process.env.PORT || 8000;

の部分です。Nodeを起動させるポートを指定する時は、まず、環境変数であるprocess.envから取得するようにしましょう。

2. 使っているnodeパッケージがpackage.jsonのdependenciesに記載されているか。

この記事でご紹介した、最低限のnode.jsファイルでは、記載する必要はないですが、もし、別途npm installしたパッケージがあるのであれば、package.jsonに追記しないといけません。

npm install {パッケージ名} --save 

で自動でpackage.jsonに追記してくれます。