自分用メモです。
前提条件
- 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"