自分用メモです。

前提条件

gitがインストールされている
node/npmがインストールされている

1) 適当なangular2アプリを作る

「My First Angular App」と画面に表示するだけのやつを使う。

$ git clone https://github.com/ringtail003/angular2-starter.git

試しにローカルで動かしてみる

$ npm install
$ npm start

ただこれだけのアプリ。公式ドキュメントに沿ってSystemJS/lite-serverで動いている。

2) herokuの準備

アカウントを作る

CLIから操作するためのツールをインストール

コマンドがインストールされたか確認

$ heroku --version

CLIでログイン

$ heroku login
Enter your Heroku credentials.
Email: [email address]
Password (typing will be hidden): [password]

Logged in as [email address]

heroku上にアプリケーションを作る

$ heroku create

ランダムなアプリケーション名が割り当てられ、アクセスするためのURLとソースをpushする先のgitリポジトリが表示される。

Creating app... done, stack is cedar-14
https://[name].herokuapp.com/ | https://git.heroku.com/[name].git

リモートリポジトリは自動的に追加されている。

$ git remote -v
heroku https://git.heroku.com/[name].git (fetch)
heroku https://git.heroku.com/[name].git (push)

デプロイ

pushするとデプロイしてくれる。

$ git push heroku master

Counting objects: 15, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (14/14), done.
Writing objects: 100% (15/15), 2.06 KiB | 0 bytes/s, done.
Total 15 (delta 3), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Node.js app detected
...
To https://git.heroku.com/[name].git
 * [new branch]      master -> master

サイトを見てみよう

まずローカルで確認

$ heroku local web
23:00:37 web.1 |  > angular2-starter@ start /Users/test/angular2-starter
23:00:37 web.1 |  > concurrent "npm run tsc:w" "npm run lite"

ページが表示された。よし。

プロセスが動いているか確認

$ heroku ps:scale web=1
Scaling dynos... done, now running web at 1:Free

動いてるっぽい。よし。

デプロイした先のサイトを確認

$ heroku open

ダメっぽい。

ログを見る

$ heroku logs --tail

2016-04-17T13:58:31.063991+00:00 heroku[web.1]: Process exited with status 1
2016-04-17T13:58:31.072938+00:00 heroku[web.1]: State changed from starting to crashed
2016-04-17T14:03:32.112698+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=...

crashedだそうだ。

もうちょっと設定する

package.json

package.jsonがある事でnodeのアプリと判断してくれるらしい。何も指定しないと最新バージョンが使われるそうなのでローカルと合わせるために固定しておく。

{
  engines: {
    node: 5.10.1,
    npm: 3.8.3
  }

heroku用の設定を追加

// package.json
"scripts": {
  ...
  "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
+  "heroku": "concurrent \"npm run tsc\" \"npm run lite\" "

Procfile

ルートディレクトリに拡張子なしでProcfileを作る。
herokuがデフォルトで実行するスクリプトを変更することができる。
（Procfileがない場合はweb: npm startが実行される）

// Procfile
web: npm run heroku

PRODUCTION設定をオフにする

これをしないとデプロイした時にpackage.jsonのdevDependenciesがインストールされない。

$ heroku config:set NPM_CONFIG_PRODUCTION=false

デプロイして再びサイトを見る

$ git add .
$ git commit -m "add config for heroku"
$ git push heroku master

$ heroku open

動いた。よし。

メモ

http-server

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

このページを参考にhttp-serverに変えたかったのだけどこのエラーで処理がストップするため断念。このエラーは実はいつも出ているけど、npmの処理は続行されていた。http-serverを使った時だけ$ heroku local webがエラーで止まる。

依存バージョン

angular2がbeta版なのでバージョンが違うとエラーで動かなかったりする。正常に動いたバージョンをメモ。（すでにちょっと古い）

"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"