HerokuにTypeScriptのアプリをデプロイしたら見事にハマった話

Heroku Advent Calendar 2018 5日目の記事です。

今日は題名の通り、HerokuにTypeScriptのアプリをデプロイしたら見事にハマった話をします。

ただ外部サービスやアドオン、DBなどの話は 出てきません

普通に設定をミスして*.tsコンパイルされなかった話をします。

ハマったポイントは次の2つです。

  1. Release Phaseでコンパイルしていた
  2. Procfileの実行コマンドで yarn install していた

Release Phaseでコンパイルしていた

みなさん、Release Phase使ってますか? 僕は名前的にReleaseに伴う作業を記述した通りにやってくれるものだと信じていました。

でも実はRelease Phaseはone-off dyno上で動きます。 なのでRelease Phaseでコンパイルしたところでweb dynoにはJSファイルは1つもありません。(=> したがってweb dynoには実行ファイルが1つもない。) ということで、web dyno上でコンパイルするためにRelease PhaseではなくProcfileを使うことにしました。(そこでもまたどハマりしたのですが。。。) (web dynoとかone-off dynoについてはこの記事を参照してください。)

Procfileの実行コマンドで yarn install していた

Procfileは各dynoにやって欲しい作業を記述するファイルです。 よくわからないけど、 web: bundle exec rails server -p $PORT って書いておくファイルです。

今回はProcfile内に web : yarn install --production=false && tsc && foobar... と記述しました。

(わざわざ yarn install --production=false としたのは、tsc や型定義ファイルを devDependencies に入れておきたかったからです。 だって本番環境の動作には不要な感じがしませんか?)

Herokuはデプロイ後、60秒でwebプロセスが$PORTにバインディングされないとエラーでコケます。 今回はyarn install し直しているので、当然のように60秒で作業が完了するわけもなくエラーでコケました。

したがって、大人しくtsc や型定義ファイルをdependenciesに入れて、HerokuのBuild時にコンパイルに必要なファイルが全てインストールされるようにしました。

これでようやく無事にHerokuにデプロイされるようになりました〜!(ここまで約1時間)

結論

HerokuにTypeScriptのプロジェクトをデプロイするときは必要な型定義ファイルやtscdependencies に入れましょう。