angular2をherokuでデプロイするまで


自分用メモです。

## 前提条件

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

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

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


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

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

```
$ npm install
$ npm start
```

![スクリーンショット 2016-04-17 22.34.35.png](https://qiita-image-store.s3.amazonaws.com/0/102284/48ed3bca-9b61-dc85-7061-eb77f7a6727c.png "スクリーンショット 2016-04-17 22.34.35.png")

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

## 2) herokuの準備

#### アカウントを作る

https://www.heroku.com/

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

https://toolbelt.heroku.com/

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

```
$ 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
```

![スクリーンショット 2016-04-17 23.05.15.png](https://qiita-image-store.s3.amazonaws.com/0/102284/4b88f18e-3a0f-821f-91a2-c1ff665a0e95.png "スクリーンショット 2016-04-17 23.05.15.png")

ダメっぽい。

#### ログを見る

```
$ 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用の設定を追加

```diff
// 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
```


![スクリーンショット 2016-04-17 22.34.35.png](https://qiita-image-store.s3.amazonaws.com/0/102284/48ed3bca-9b61-dc85-7061-eb77f7a6727c.png "スクリーンショット 2016-04-17 22.34.35.png")

動いた。よし。

## メモ

#### http-server

[Angular2を最速でHerokuにDeployするMinimum Starter Kitを作成してみた](http://blog.mitsuruog.info/2016/02/angular2-minimum-starter.html)  

このページを参考に`http-server`に変えたかったのだけど[このエラー](https://github.com/angular/angular/issues/6468)で処理がストップするため断念。このエラーは実はいつも出ているけど、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"

```