angular-fullstackをherokuにデプロイする方法

angular-fullstack公式のherokuの項に書いてあるが、動作しなかったので動作する方法を説明する。
　
前提としている環境は下記の通り。
OS: ubuntu 14.04
node.js v6.3.1
angular-fullstack 3.7.6
　

gitをインストール

herokuにデプロイするのにgitを使うのでインストールする。
下記URL参照
Ubuntu 14.04 で Git の最新を使う
　

heroku toolbeltをインストール

下記URL参照
Heroku Command Line
　

herokuにMongoLabをアドオンする

参考文献:mLab MongoDB
下記コマンドを実行する（公式と同じ手順）

heroku addons:create mongolab --app foo

※fooはherokuのアプリ名を指定する
※アドオンを登録するにはherokuのアカウントに事前にクレジットカードを登録しておく必要がある。登録していないとエラーになる。
　

oAuthのキーを設定する

twitter, facebook, google+のoAuthを使う場合、下記コマンドを実行する（公式と同じ手順）

heroku config:set FACEBOOK_ID=id --app foo
heroku config:set FACEBOOK_SECRET=secret --app foo

※twitter, goolge+についても同様の手順で設定する
　

デプロイする

参考文献:Deploy to heroku is not working using yo angular-fullstack:heroku #1966
※ アプリ名がfooの場合

mkdir dist
cd dist
git init
heroku login (if you are not already authenticated)
heroku git:remote --app foo
cd ..
grunt build
grunt buildcontrol:heroku

typescriptを使っている場合の注意点

参考文献:
issue with postinstall script #74
fix(build): remove need for installing typings from the internet
typescriptを使っている場合、「grunt buildcontrol:heroku」で失敗する。
これは、dist/package.jsonに書かれている「”postinstall”: “./node_modules/.bin/typings install”」が不要なためのようだ。
おそらくdist/package.jsonはカレントのpackage.jsonをコピーしただけなので、カレントでは必要な「typings install」だが、デプロイでは不要のなのにコピーしてしまっているためと思われる。
よって、「grunt build」した後、dist/package.jsonに書かれている「”postinstall”: “./node_modules/.bin/typings install”」を削除してから「grunt buildcontrol:heroku」をすること。
※ 毎回「grunt build」でdist/package.jsonが生成されるので、面倒だが手作業で削除するのが必要があるようだ。

なお、上記手順でデプロイしたアプリは下記URLにある。
http://angularfullstack.herokuapp.com/
　

Tweet

Check