Rails
Heroku
AngularJS

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

More than 3 years have passed since last update.


概要

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

http://www.angularonrails.com/deploy-angular-rails-single-page-application-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と同じような構成になっています。

http://qiita.com/zoetro/items/46d2a8b57f2645bb5033

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


  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アプリケーション側の一連の処理がされ、デプロイが完了します。

以上です。