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.jsonのdevDependenciesに追加します。
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 できるはずです。
まとめ
gulpやgruntなどを利用するとローカルで build プロセスを実行することも可能ですが、素振り程度で依存するもどうかと思い簡単なものを作成してみました。
Angular2 学習のため、大量に素振りする必要がある人にはちょうどいいと思います。