Angular2を最速でHerokuにDeployするMinimum Starter Kitを作成してみた
2016-02-21

Angular2を最速でHerokuにDeployするMinimum Starter Kitを作成してみた

Angular2学習のため、大量に素振りする必要がでてきたので、素振り用のStarterKitを作成してみました。

これから学習する方は、公式の5 Min Quickstartを最初にやる場合が多いと思うので、ベースは5 Min Quickstartを利用しています。
その上で、気軽にHerokuへDeployして公開できるよう工夫しました。

mitsuruog/angular2-minimum-starter: Minimum starter kit for angular2 https://github.com/mitsuruog/angular2-minimum-starter

5 Min QuickstartからHeroku Delpoyへの道

公式の5 Min Quickstartは、学習するための環境としては十分なのですが、
HerokuへDeployするために少し工夫が必要でしたので手順を紹介します。

Heroku上でのdevDependenciesのインストール

HerokuはDeployする前、package.jsonに書かれているdependenciesの内容をインストールしますが、通常はdevDependenciesをインストールしません。

そのため、Heroku上のNPM_CONFIG_PRODUCTION設定を無効にする必要があります。

heroku config:set NPM_CONFIG_PRODUCTION=false

この設定はHerokuのGUI上のSettingsのタブからでも設定できます。

Heroku上でのHTTP Serverの導入

5 Min Quickstartにはjohnpapa/lite-serverという、
Browsersyncをベースとした開発用のHTTPサーバーが含まれています。

しかし、lite-server上でLightweight development only node serverと謳われているため、別途HTTPサーバーを導入します。
今回はindexzero/http-serverを利用しました。

まず、package.jsondevDependenciesに追加します。

npm install http-server -D

次に、Heroku上でアプリを開始する際に実行するコマンドをpackage.jsonに追加しておきます。

package.json

-    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
+    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
+    "start-heroku": "concurrent \"npm run tsc\" \"npm run http-server\" "

最後に、Herokuがアプリを開始する際のコマンドを変更するためProcfileを作成し、先ほどのコマンドを設定します。
(Node.jsアプリの場合、Herokuはデフォルトでnpm run startを実行するようになっています。)

Procfile

web: npm run start-heroku

こちらで、Angular2のアプリをHeroku上にDeployできるはずです。

まとめ

gulpgruntなどを利用するとローカルでbuildプロセスを実行することも可能ですが、素振り程度で依存するもどうかと思い簡単なものを作成してみました。

Angular2学習のため、大量に素振りする必要がある人にはちょうどいいと思います。