Yeomanで作成したWebアプリケーションを、Herokuにデプロイしました。
Herokuは簡単にWebアプリケーションを公開するには便利ですね。
事前準備
事前準備として以下をインストールしておきます。
nodejs
Grunt
Yeoman
Herokuのアカウントとツールベルト
Yeoman?
Webアプリケーションのテンプレを自動生成するツールです。
Javascriptのライブラリとかフロントエンドまわりは、セットアップがダルいのでYeoman使うと便利になります。
Yeomanでアプリケーションの生成
では早速アプリケーションを生成してみます。
とりあえず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を使えるようにインストールします。
$ npm install -g generator-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 login]はあらかじめしておいてください。
$ heroku create deploy-yeoman-app-to-heroku # アプリケーションの名前は適当につけてください
$ git subtree push --prefix dist heroku master
openすればデプロイがうまくいってることを確認できます！
$ heroku open
一応作ったものは下記にあげておきました。
GitHubのリポジトリ