Yeomanで作ったWebアプリケーションをHerokuにデプロイしてみる

Yeomanで作成したWebアプリケーションを、Herokuにデプロイしました。
Herokuは簡単にWebアプリケーションを公開するには便利ですね。

事前準備

事前準備として以下をインストールしておきます。

nodejs
Grunt
Yeoman
Herokuのアカウントとツールベルト

Yeoman?

Webアプリケーションのテンプレを自動生成するツールです。
Javascriptのライブラリとかフロントエンドまわりは、セットアップがダルいのでYeoman使うと便利になります。

Yeomanでアプリケーションの生成

では早速アプリケーションを生成してみます。

とりあえずAngularのアプリケーションとして生成するので事前にgenerator-angularをインストールします。

generator-angularのインストール

$ npm install -g generator-angular

アプリケーションの生成

$ mkdir deploy-yeoman-app-to-heroku
$ cd deploy-yeoman-app-to-heroku
$ yo angular

プロンプトでいろいろ聞かれますが、今回は全部ENTER押して進んでいきます。
アプリケーションを起動します。

アプリケーションの起動

$ grunt serve

やったー！Yeoman + AngularJS の初期画面表示を成功しました。

grunt serve を、一旦Control + C で止めます。

Herokuにデプロイ

今度はこのおじさんをHerokuにデプロイしてやりましょう。Yeomanがgenerator-herokuを使えるようにインストールします。

generator-herokuのインストール

$ npm install -g generator-heroku

herokuの設定を生成する

$ yo heroku
[?] Do you want a separate git repository in dist/? No
   create heroku/Procfile
   create heroku/server.js
   create heroku/distpackage.json
Please add this copy task rule to your Gruntfile:
    copy: {
        dist: {
            files: [{
                expand: true,
                dest: '<%= yeoman.dist %>',
                cwd: 'heroku',
                src: '*',
                rename: function (dest, src) {
                    var path = require('path');
                    if (src === 'distpackage.json') {
                        return path.join(dest, 'package.json');
                    }
                    return path.join(dest, src);
                }
            }]
        }
    }

You're all set! Now run
        heroku apps:create
and push your dist directory with
        git subtree push --prefix dist heroku master

Gruntfileのcopyタスクに追記してくれと、標準出力に書いてあるので追記します。
Gruntでheroku用にビルドしたアプリケーションを、distディレクトリに格納する設定となります。

下記が変更差分です。
https://github.com/kai-zoa/deploy-yeoman-app-to-heroku/commit/90365ca0827f5f2809c3c9344205fe9793b3d405
ここで.gitignoreの変更もしていて、これをやらないとビルドしたアプリケーションが、中途半端にherokuにデプロイされてしまうので、書き換えておきましょう。

準備ができたらビルドします。

ビルド

$ grunt build

下記を実行して http://localhost:1203/ を開けばビルド一式の動作確認もできます。

ビルドしたアプリケーションの動作確認

$ cd dist && npm install
$ node server.js

ではディプロイしてみます。

Herokuにデプロイ

# [heroku login]はあらかじめしておいてください。
$ heroku create deploy-yeoman-app-to-heroku # アプリケーションの名前は適当につけてください
$ git subtree push --prefix dist heroku master

openすればデプロイがうまくいってることを確認できます！

デプロイされたアプリケーションを開く

$ heroku open

一応作ったものは下記にあげておきました。
GitHubのリポジトリ