Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

概要

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

まず、今回デプロイしようとしているアプリケーションが、いままでのトラディショナルな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アプリケーション側の一連の処理がされ、デプロイが完了します。

以上です。

hrtkmztn
Ruby, Ruby on Rails, GitHub, Rhodes, JQuery
gamba
「笑顔ではたらく」をつくる gamba!
http://www.getgamba.com/top
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away