Herokuでexpressを使うときに困ったこと（環境変数、ビルド、ポート）

Herokuにexpress（node）で作ったアプリを動かそうとしたら、立て続けに困ったことが起こったのを調べたことをメモしました。
何度もPRを送るのに気が引けましたが、なんとか乗り越えました。

環境変数を設定したい
ビルドされない
ビルドが通らない
アプリが起動しない

「ローカルの開発環境では問題なく動いているのに・・・」というのがモチベーションを打ち砕くのですが、あと少しです。

環境変数を設定したい

やり方は2通りありました。Heroku Cliで設定する方法と管理画面から設定する方法。どちらでもいいので、2通り書きます。

Heroku Cliで設定する

まず、Heroku Cliをインストールする必要があります。
Homebrew がインストールされているなら、以下のコマンドでサクっと入ります。

$ brew install heroku
$ heroku
 ▸    Add apps to this dashboard by favoriting them with heroku apps:favorites:add
See all add-ons with heroku addons
See all apps with heroku apps --all

See other CLI commands with heroku help

あとは設定するだけです。

$ heroku config:set KEY=VALUE

管理画面から設定する

ログイン後、Setting画面に行くと Config Variables というメニューがあります。 Reveal Config Vars というボタンをクリックすると Config Vars が表示されますので、そこに環境変数をaddしてください。

ビルドされない

設定をしなければ、ビルドはされません。初期状態では npm install と npm start だけはやってくれるようでした。
なので、 package.jsonのscriptsにpostinstallを追加してインストール後にビルドを実行するようにします。
以下のような感じです。

package.json

{
  "scripts": {
    "build": "webpack",
    "start": "node app.js",
    "postinstall": "npm run build"
  }
}

これはnpmの機能なのでローカルの開発環境でも npm install をしたあとにpostinstallが動くようになっているので、確認してみてください。

環境変数の受け取り方

環境変数をコードで受け取るには、 process.env から受け取ります。環境変数に KEY=VALUE を設定していると以下のようになります。

$ node
> process.env.KEY
'VALUE'
>

ローカルの開発環境でも確認したい

ローカルで動くか確認するには少し面倒ですが、 node-foremanを使えば簡単です。

$ npm install -D foreman

次に .env ファイルに環境変数を書きます。

KEY1=VALUE1
KEY2=VALUE2
KEY3=VALUE3

あとは環境変数を読んでからnpmを実行するようにするだけです。

$ node_modules/foreman/nf.js npm start

ビルドが通らない

ローカルでビルドコマンドを叩いても問題ないのだから、大丈夫だと油断しているとハマります。ハマりました。
Herokuはproduction環境なので、package.jsonのdependecies、devDependeciesが正しく登録されていないと、ライブラリが足りずにビルドされません。
ローカルの開発環境で確認するには、npmの設定を変える必要があります。
以下のコマンドで変更して、ビルドをしてみてください。

$ npm config get production
false
$ npm config set production true
$ npm config get production
true

ちなみに、package.jsonの中を入れ替えたりしていると汚くなってしまいますが、 fixpack を使うと整形してくれるので便利です！
https://github.com/henrikjoreteg/fixpack
使い方は簡単です。npmでグローバルにインストールして、package.jsonのあるディレクトリでコマンドを叩くだけです。

$ npm install -g fixpack
$ fixpack

設定ファイルで自分好みに整形することもできますので、こういうのが気になる人は使ってみてはどうでしょうか。

アプリが起動しない

ビルドも通ったのに、アプリはエラー画面のままでした。管理画面を見ても何も変化はないのです。エラー画面にログを見なさいと書いてあるので見てみましょう。

$ heroku logs --app my-app

my-appのところは自分のアプリ名を入れてください。そうすると、ログがバーっと出てきます。

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

こんなログが出てたら、ポートがあっていない可能性があります。
Heroku側から動的に生成されたポートで動くようにしていなければ、いけないそうです。こんな感じです。

server.js

import * as express from 'express'
const app = express ()

app.set ('port', (process.env.PORT || 8080))
app.listen (app.get ('port'), (error: any) => {
    console.info (`PORT: ${app.get ('port')}`)
})

これでようやく動くようになりました！