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

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

February 21, 2016

4 min read

mitsuruogMitsuru Ogawa

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

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

mitsuruog/angular2-minimum-starter: Minimum starter kit for angular2

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 学習のため、大量に素振りする必要がある人にはちょうどいいと思います。