Edited at

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

More than 3 years have passed since last update.

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のリポジトリ