140811-「angular-seed」をGitHubにpushしただけで自動的にTravis CIでテスト＋Herokuへデプロイ

まずangular/angular-seedをgit cloneし、手元の環境（VirtualBox上のUbuntu Desktop 14.04）で正常に動くか確認する。

すると最後の「npm run protractor」だけがうまくいかない。「Starting selenium standalone server...」のところで落ちる。

ハマりました。俺の午前中を返せー。しかし良記事だなあ。 / “Protractor が動かなくてハマった | 1000g” http://t.co/yeJQckRpWN

— 植田 達郎 (@weed_7777) 2014, 8月 11

結局のところ Java に PATH が通っていなかったのが原因だった模様。 e2e テストは内部で Selenium Standalone Server を呼んでいますが、そこに Java が必要でした。原因は、具体的には、下記のコマンドでJavaを入れると、protractorのE2Eテストが動くようになる。

$ sudo apt-get install openjdk-7-jre-headless

これで

$ java -version

でバージョンが返ってこれば、パスが通っていることになる。

#angularSeed angular-seedをherokuにデプロイする。まずgit cloneでリポジトリを落とし、 $ npm install で依存関係をインストール。次に、heroku toolbeltをインストール。 herokuにログインし、ssh鍵を登録。

— 植田 達郎 (@weed_7777) 2014, 8月 11

この辺はherokuを使ったことがあればスイスイと。

#angularSeed package.jsonのdevDependencyは本番環境では使われない？ので、新たにdependencyという項目を作って、そこにbowerなどを入れると、herokuにデプロイした時にちゃんとbower installしてくれる。

— 植田 達郎 (@weed_7777) 2014, 8月 11

ここもbowerがどうしても実行できなくてハマりました。

heroku用のProcfileは"web: npm start"で良い。 / “herokuでnode.jsのexpress4アプリを動かすためのProcfileの書き方 - memorandum” http://t.co/eSGocBDBt7

— 植田 達郎 (@weed_7777) 2014, 8月 11

これもよくわからなくて困りました。

#angularSeed package.jsonの以下の行 "start": "http-server -a localhost -p 8000" を以下のようにする "start": "http-server" これで普通に80番ポートから見える。

— 植田 達郎 (@weed_7777) 2014, 8月 11

これでひと段落です。が、http-serverは8080番が使われていると自動的に8081番を使ったりするので、ローカルでは8080番、Herokuではprocess.env.PORTを使うように変更します。

具体的にはgulpを使います。まず、

$ npm install --dev-save gulp
$ npm install --dev-save gulp-shell

でインストールします。

次にpackage.jsonのscripts->startを'http-server'から'gulp'に変え、プロジェクトのルートフォルダにgulpfileを作って以下のようにします。

var gulp = require('gulp');
var shell = require('gulp-shell')

gulp.task('default', function () {
    var port = process.env.PORT ||8080;
    gulp.src('')
    .pipe(shell([
        './node_modules/http-server/bin/http-server -p '+ port
    ]))
})

これで確実にローカルでは8080番、Herokuではよしななポートで干してくれます。

angular-seedはTravis CIでテストできるようになっているので、せっかくなのでやりましょう。Travis CIのサイトに行って、CIにかけたいプロジェクトを選べば、あとはpushするたびにやってくれます。

ついでにTravisでHerokuへのデプロイもやってもらうことにしましょう。.travis.ymlに以下のように記述します。api_keyは「heroku auth:token」コマンドで確かめましょう。

deploy:
  provider: heroku
  api_key: ...
  app: my-app-123

これでGitHubにpushすれば自動的にテストが走りHerokuにデプロイしてくれます。ラクチン！