MEAN.JSのサンプルをheroku上で動かす
MEANスタック(MongoDB, Express, Angular.js, Node.js)を利用してアプリを作ってみたくなったので備忘録として動くまでにやったことを残しておく．
【目標】
yo meanjs で作成したサンプルがheroku上で動作する
【前提条件】
・git, yo, grunt, node.js, mongoなどは既に導入済み
・yo meanjsが実行できる
【手順】
1. yeomanを利用したサンプルの作成
・アプリ用のディレクトリを用意
mkdir TEST
cd TEST
・yeomanの実行
yo meanjs
$ yo meanjs
_-----_
| |
|--(o)--| .--------------------------.
`---------´ | Welcome to Yeoman, |
( _´U`_ ) | ladies and gentlemen! |
/___A___\ '__________________________'
| ~ |
__'.___.'__
´ ` |° ´ Y `
You're using the official MEAN.JS generator.
?What would you like to call your application?TEST
?How would you describe your application?Full-Stack JavaScript with MongoDB, Express, AngularJS, and Node.jss)
?How would you describe your application in comma seperated key words?MongoDB, Express, AngularJS, Node.jss)
?What is your company/author name?Xenon
?Would you like to generate the article example CRUD module?Yes
?Which AngularJS modules would you like to include?ngCookies, ngAnimate, ngTouch, ngSanitize
とりあえず全部Yes（Default）にした．
しばらくするとインストールが完了する．
・ローカルでの動作チェック（mongodbを起動しておく）
mongod
grunt
ブラウザで見ると動いてた．
2.herokuアプリの作成とconfig設定
・herokuアプリの作成（createをつかうとgitの登録もしてくれる）
heroku create [適当なアプリ名]
もしくは
heroku create
$ heroku create
Creating mighty-river-7706... done, stack is cedar
https://mighty-river-7706.herokuapp.com/ | git@heroku.com:mighty-river-7706.git
アプリ名を指定しないとアプリ名が自動生成される
・mongoHQアドオンの追加（MongoDBの利用を可能にする）
heroku addons:add mongohq --app [アプリ名]
・heroku上の環境変数を設定（production環境にする）
heroku config:set NODE_ENV=production --app [アプリ名]
・メインのビルドパックとしてbuildpack-multiを登録
heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi.git
herokuは標準だと一つのbuildpackしか使えないっぽいが，buildpack-multiは.buildpacksファイルに記載された複数のビルドパックを利用可能にする
・buildpack-multiで利用するビルドパック一覧を作成
vim .buildpacks
https://github.com/shunjikonishi/heroku-buildpack-with-grunt-task
https://github.com/heroku/heroku-buildpack-nodejs.git
この二つを登録．
一つ目はheroku上でgruntタスクを実行できるようにするビルドパック
二つ目はnodejsをheroku上で利用するためのビルドパック（公式が用意してくれている）
・configの確認
heroku config --app [アプリ名]
$ heroku config --app mighty-river-7706
=== mighty-river-7706 Config Vars
BUILDPACK_URL: https://github.com/ddollar/heroku-buildpack-multi.git
MONGOHQ_URL: mongodb://heroku:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
NODE_ENV: production
こんな感じ．herokuへMEANのアプリを登録する準備ができた．
3.MEANアプリのherokuへのデプロイ
・buildの実行
grunt build
$ grunt build
Running "jshint:all" (jshint) task
>> 53 files lint free.
Running "csslint:all" (csslint) task
>> 2 files lint free.
Running "loadConfig" task
NODE_ENV is not defined! Using default development environment
Running "ngAnnotate:production" (ngAnnotate) task
>> 1 file successfully generated.
Running "uglify:production" (uglify) task
>> 1 file created.
Running "cssmin:combine" (cssmin) task
File public/dist/application.min.css created: 506 B → 424 B
Done, without errors.
※cssmin:combineが正しく実行されていることを確認する
※/public/dist以下にminifyされたjsファイルが作成されているかを確認
→dist以下のファイルの中身が空になっていることがある．この場合herokuへpushしてもエラーは起きないがherokuアプリを開いても何も表示されない．
→ローカルのgrunt build時のNODE_ENVの環境を変えてみたりするとうまくいった．
（おまけ）ローカルでgrunt buildするときのNODE_ENVの設定方法
NODE_ENV=production grunt build
これだけ．ちなみにNODE_ENVのデフォルトはdevelopmentになっている．
・gitへのコミット
git init
git add -A
git commit -am "first commit"
・commitした内容をherokuへpush
git push heroku master
・herokuアプリの確認
heroku open
ブラウザが自動的に開いてローカルで見たものMEANアプリと同じ画面が表示されるはず．
【参考にしたサイト】
たくさん．
