Angular/Railsシングルページアプリケーション(SPA)をHerokuにデプロイする

概要

手順は基本的には下記の内容に従って、いくつか不足している箇所があったので補足していきます。

まず、今回デプロイしようとしているアプリケーションが、いままでのトラディショナルなRailsアプリケーションとどのような構造の違いがあるのかを説明します。

デプロイしようとしているアプリケーションは、

1. Railsアプリケーションと同じリポジトリで管理してclientという名前のディレクトリにすべてのクライアントサイドのコードをいれています
2. また、クライアントサイドのコードはRailsのアセットパイプラインの外に配置しています

.
├── Gemfile
├── Gemfile.lock
├── README.md
├── Rakefile
├── app
├── bin
├── client <-すべてのクライアントサイドのコードはここ
├── config
├── config.ru
├── db
├── doc
├── lib
├── log
├── public
├── spec
├── tmp
└── vendor

下記のURLと同じような構成になっています。

ローカルでの開発時には、

1. APIだけを担うRailsサーバをたちあげます
2. クライアントサイドのコードは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アプリケーション側の一連の処理がされ、デプロイが完了します。

以上です。