概要
手順は基本的には下記の内容に従って、いくつか不足している箇所があったので補足していきます。
まず、今回デプロイしようとしているアプリケーションが、いままでのトラディショナルなRailsアプリケーションとどのような構造の違いがあるのかを説明します。
デプロイしようとしているアプリケーションは、
- Railsアプリケーションと同じリポジトリで管理してclientという名前のディレクトリにすべてのクライアントサイドのコードをいれています
- また、クライアントサイドのコードはRailsのアセットパイプラインの外に配置しています
.
├── Gemfile
├── Gemfile.lock
├── README.md
├── Rakefile
├── app
├── bin
├── client <-すべてのクライアントサイドのコードはここ
├── config
├── config.ru
├── db
├── doc
├── lib
├── log
├── public
├── spec
├── tmp
└── vendor
下記のURLと同じような構成になっています。
ローカルでの開発時には、
- APIだけを担うRailsサーバをたちあげます
- クライアントサイドのコードはgrunt serveを立ち上げて実装していきます
プロダクション環境では1.だけを立ち上げて、2.はコンパイルされたファイルを1.のサーバで配信するかたちになるので、通常のRailsアプリケーションとは異なり工夫が必要になってきます。
実際の手順
それでは、具体的にHerokuにデプロイするために必要な手順をご紹介します。
まず、通常のRailsアプリケーションをデプロイするbuildpackとクライアントサイドのコードをコンパイルするためのbuildpackが必要になります。
複数のbuildpackを扱えるようにHerokuの設定に下記を追加します。
$ heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi.git
さらに、プロジェクトディレクトリの直下に.buildpacksというファイルを作成して下記の内容にします。
https://github.com/getgamba/heroku-buildpack-nodejs-grunt-compass.git
https://github.com/heroku/heroku-buildpack-ruby.git
クライアントサイドのコードをコンパイルするためのbuildpack用に環境変数を追加します。
$ heroku config:set NODE_ENV=production
heroku上でクライアントサイドのコードをコンパイルするために必要なパッケージをclient/package.jsonに記述します。
// client/package.json
{
"name": "gamba",
"version": "0.0.0",
"description": "gamba is great communication tool for team.",
"dependencies": {
"source-map": "^0.1.37",
"load-grunt-tasks": "^0.6.0",
"time-grunt": "^0.3.1",
"grunt": "^0.4.1",
"grunt-autoprefixer": "^0.7.3",
"grunt-concurrent": "^0.5.0",
"grunt-connect-proxy": "^0.1.10",
"grunt-contrib-clean": "^0.5.0",
"grunt-contrib-compass": "^0.7.2",
"grunt-contrib-concat": "^0.4.0",
"grunt-contrib-connect": "^0.7.1",
"grunt-contrib-copy": "^0.5.0",
"grunt-contrib-cssmin": "^0.9.0",
"grunt-contrib-htmlmin": "^0.3.0",
"grunt-contrib-imagemin": "^0.7.0",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-uglify": "^0.4.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-filerev": "^0.2.1",
"grunt-google-cdn": "^0.4.0",
"grunt-newer": "^0.7.0",
"grunt-ngmin": "^0.0.3",
"grunt-protractor-runner": "^1.1.0",
"grunt-rails-server": "^0.1.0",
"grunt-shell-spawn": "^0.3.0",
"grunt-svgmin": "^0.4.0",
"grunt-usemin": "^2.1.1",
"grunt-wiredep": "^1.7.0",
"jshint-stylish": "^0.2.0"
},
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"test": "grunt test"
}
}
client/Gruntfile.coffeeにbuildpackから呼ばれるタスクを登録します。今回のプロジェクトではbuildというタスクにクライアントサイドのコードをコンパイルする内容を登録しています。
grunt.registerTask "heroku:production", [
"build"
]
これでpushしてherokuにデプロイします。
$ git push heroku master
bowerやnpmで必要なパッケージをいれてクライアントサイドのコードがコンパイルされ、アセットコンパイルなどRailsアプリケーション側の一連の処理がされ、デプロイが完了します。
以上です。