Rails 4でHeroku Pushまでの詳細手順 [haml/bootstrap 3.0/postgresql or MySQL]

短時間でプロトタイプを制作する場合には、インフラ構築のコストが低いHerokuはベストな選択肢のひとつです。ということで、Ruby 2.1とRails 4.0のプロジェクトをHerokuにPushするまでの手順を書いておきます。DBはPostgreSQL or MySQL、テンプレートエンジンはHaml、CSSフレームワークはBootstrap 3.0を使います。

この記事の一連のコマンドを半自動化できる『Application Template』を作りました。詳しくは『Rails4 x herokuアプリを5分でスタートできるapplication template作ってみた!』をご参照ください!

(03/21 09:40) かなりの分量ですので、タイトルを「簡単手順 => 詳細手順」に変更


🐰 手順詳細

Ruby 2.1をインストール

Ruby 2.0 => 2.1は今のところ問題もなく使えています。ということでRVM or Rbenvで2.1をインストールしてプロジェクトを開始するのをお勧めします。ちなみにHerokuは12/25(Ruby 2.1リリース日)から2.1対応しています。

Heroku Toolbeltをインストール

Herokuを使う上で欠かせない、コマンドラインツールのHeroku Toolbeltをサイトからダウンロードしてインストールしてください。

PostgreSQL/pgの導入

Mac or CentOS限定ですが、Mac MountainLion/CentOS 6.4へのPostgreSQL 9.2の導入手順をよかったらご参考いただきつつ、PostgreSQLおよびgem pgをインストールしてください。MySQLの場合はここは読み飛ばしてください。

Railsプロジェクト作成

Railsの新規プロジェクトを作成。

# Heroku標準のPosgreSQLを使う場合
rails new test-app --database=postgresql --skip-test-unit --skip-bundle
# MySQLを使う場合
rails new test-app --database=mysql --skip-test-unit --skip-bundle

Rails用の.gitignoreを作成します。.gitignoreを生成するgitignore-boilerplatesを使う場合はこちら。(Macでのインストール方法は、brew install giboを実行)

# gibo --listでパラメータ確認可能
gibo OSX Ruby Rails JetBrains SASS SublimeText > .gitignore

gitignore-boilerplatesを使わないで、GitHubから.gitignoreのテンプレートをダウンロードする場合はこちら。

wget https://raw.github.com/github/gitignore/master/Rails.gitignore;mv Rails.gitignore .gitignore

.gitignoreから次のコードを削除。

config/initializers/secret_token.rb

Gitリポジトリ作成を作成します。

git init
git add -A
git commit -m "new project"

Gemfileの設定

Gemfileを編集して、bundle installでGemをインストール。

(gemは適宜カスタマイズしてください)

ruby '2.1.0'
# Bower Manager => https://rails-assets.org/
source 'https://rails-assets.org'
# turbolinks support
gem 'jquery-turbolinks'
# Source Map
gem 'coffee-rails-source-maps'
gem 'sass-rails-source-maps'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby
# CSS Support
gem 'less-rails'
# App Server
gem 'puma'
# Presenter Layer
gem 'draper'
# Haml
gem 'haml-rails'
# Assets log cleaner
gem 'quiet_assets'
# Form Builders
gem 'simple_form'
# # Process Management
gem 'foreman'
# HTML5 Validator
gem 'html5_validators'
# PG/MySQL Log Formatter
gem 'rails-flog'
# Migration Helper
gem 'migrant'
# Pagenation
gem 'kaminari'
# NewRelic
gem 'newrelic_rpm'
# Airbrake
gem 'airbrake'
# HTML Parser
gem 'nokogiri'
# App configuration
gem 'figaro'
# Rack Profiler
gem 'rack-mini-profiler'
# Hash extensions
gem 'hashie'
group :development do
# Converter erb => haml
gem 'erb2haml'
end
group :development, :test do
# Rails application preloader
gem 'spring'
# Railsコンソールの多機能版
gem 'pry-rails'
# pryの入力に色付け
gem 'pry-coolline'
# デバッカー
gem 'pry-byebug'
# Pryでの便利コマンド
gem 'pry-doc'
# PryでのSQLの結果を綺麗に表示
gem 'hirb'
gem 'hirb-unicode'
# pryの色付けをしてくれる
gem 'awesome_print'
# Rspec
gem 'rspec-rails'
gem 'rake_shared_context'
# fixtureの代わり
gem "factory_girl_rails"
# テスト環境のテーブルをきれいにする
gem 'database_rewinder'
# Guard
gem 'guard-rspec'
gem 'guard-spring'
end
group :production, :staging do
# ログ保存先変更、静的アセット Heroku 向けに調整
gem 'rails_12factor'
end

Railsの基本的な設定

config/application.rbの中にあるYourAppName::Application.configure内に以下を追加。

# Set timezone
config.time_zone = 'Tokyo'
config.active_record.default_timezone = :local
# 日本語化
I18n.enforce_available_locales = true
config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]
config.i18n.default_locale = :ja
# generatorの設定
config.generators do |g|
g.orm :active_record
g.template_engine :haml
g.test_framework :rspec, :fixture => true
g.fixture_replacement :factory_girl, :dir => "spec/factories"
g.view_specs false
g.controller_specs false
g.routing_specs false
g.helper_specs false
g.request_specs false
g.assets false
g.helper false
end
# libファイルの自動読み込み
config.autoload_paths += %W(#{config.root}/lib)
config.autoload_paths += Dir["#{config.root}/lib/**/"]

続いてsecret_tokenの設定。/config/initializers/secret_token.rbのsecret_key_baseを設定。sometokenのところにはもともとのトークンをセット。

TestApp::Application.config.secret_key_base = ENV['SECRET_KEY_BASE'] || 'sometoken'

Railsの日本語化ファイルを設定する。

wget https://raw.github.com/svenfuchs/rails-i18n/master/rails/locale/ja.yml -P config/locales/

application.jsに以下を追加してturbolinksで$(document).ready()のイベントが発行するように修正。

//= require jquery
//= require jquery.turbolinks
//= require turbolinks

Hamlへの変換

ViewのERBhamlに変換。

# erb => hamlに変換。erbは削除
rake haml:replace_erbs
# erb => hamlに変換。erbは残す
rake haml:convert_erbs

Bootstrap/Bootswach/Font-Awaresomeを使う手順

Bootstrap CDNから使いたい『Bootstrap/Bootswach/Font-Awaresome』の種類を選択。
app/view/layouts/application.html.hamlに次のように記述。
(バージョンや書き方がよく変わるのでBootstrap CDN側を参照のこと)

%script{:src=>'//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js'}
%link{:href=>'//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css', :rel=>'stylesheet'}
%link{:href=>'//netdna.bootstrapcdn.com/bootswatch/3.0.3/simplex/bootstrap.min.css', :rel=>'stylesheet'}

simple_formの設定

simple formの初期設定(bootstrap対応)。

rails g simple_form:install --bootstrap

figaroの設定

Herokuの定数管理にお勧めのGem「laserlemon/figaro」です。Figaroの設定ファイルの生成。

rails g figaro:install

kaminariの設定

Railsのページネーションgem「kaminari」の設定ファイルを生成。

rails g kaminari:config
rails g kaminari:views bootstrap

Databaseの設定

次にDB関連の設定。まずは、database.ymlの修正。developmentとtestの設定に以下を追加。

host: localhost

PostgreSQLのユーザーを作成。途中でパスワードを聞かれますが、開発/テスト環境の場合は入力せずにENTERだけでOKと思います。

createuser test-app -s

続いてdevelopmentのDBの作成。(testも一緒に作成されます)

bundle exec rake RAILS_ENV=development db:create

Pumaの設定

さらにアプリケーションサーバのpumaを設定。以前はunicornをつかっていましたが、Herokuでasset compile時に極まれによくわからないエラーが発生してしまうので、解決できずに乗り換えました。herokuの時にはpumaも性能よさそうですよ

ということでconfig/initializers/after_initialize.rbを作成して、次の内容を記述。

Rails.application.config.after_initialize do
ActiveRecord::Base.connection_pool.disconnect!
ActiveSupport.on_load(:active_record) do
if Rails.application.config.database_configuration
config = Rails.application.config.database_configuration[Rails.env]
config['reaping_frequency'] = ENV['DB_REAP_FREQ'] || 10 # seconds
config['pool'] = ENV['DB_POOL'] || 5
ActiveRecord::Base.establish_connection(config)
end
end
end

Procfileに次のコードを追加(or新規作成)。

web: bundle exec puma -t ${PUMA_MIN_THREADS:-8}:${PUMA_MAX_THREADS:-12} -w ${PUMA_WORKERS:-2} -p $PORT -e ${RACK_ENV:-development}

pumaの起動。

foreman start

http://0.0.0.0:5000をブラウザで開いてエラーが出ていないことを確認。

Rails 4 初期画面

RSpec/Spring/Guardの設定

RSpecのひな型の作成。

rails g rspec:install

.RSpecにはRSpecコマンドの引数を記述できます。次のとおり編集。
(詳細はRSpec –helpを参照)

echo '--color --drb -f d' > .rspec

spec/spec_helper.rbに以下を追加。

# 追加
require 'factory_girl_rails'
# 削除
require 'rspec/autorun'
# RSpec.configure do |config|の中に追加
config.before :suite do
DatabaseRewinder.clean_all
end
config.after :each do
DatabaseRewinder.clean
end
config.before :all do
FactoryGirl.reload
end
config.include FactoryGirl::Syntax::Methods

続いてSpringのbinファイルを追加。

wget https://raw.github.com/jonleighton/spring/master/bin/spring -P bin/
sudo chmod a+x bin/spring

さらにGuardの設定ファイルを追加。

bundle exec guard init

生成されたGuardfileの内容を変更。

guard :rspec do
# ↓ 以下に変更
guard :rspec, cmd: 'spring rspec -f doc' do

scaffold表示まで

scaffoldの作成してビューを追加。

rails g scaffold product name price:integer

config/routes.rbにて、ルートアクセス設定を追加。

root :to => 'products#index'

DBのマイグレーション。

bundle exec Rake RAILS_ENV=development db:migrate

http://0.0.0.0:5000でscaffordしたビューが見れることをブラウザで確認。

Herokuのアプリを作成

Herokuにアプリを登録。

heroku create test-app

secret_tokenを生成

次のコマンドを実行して、Herokuにsecret_tokenを生成してセット。

heroku config:set SECRET_KEY_BASE=`rake secret`

タイムゾーンの設定

HerokuのタイムゾーンをTokyoに設定。

heroku config:add TZ=Asia/Tokyo

NewRelicの導入

Herokuのアイドリング防止とエラー検出などを兼ねてNewRelicを導入。

まずは無料プランでセットアップ。

heroku addons:add newrelic

次のコマンドでブラウザが起動してNewRelicの管理画面が開きます。

heroku addons:open newrelic

Get Started』ボタン => 2の『Generate Licence Key』ボタン => 4の『Download the newrelic.yml file』ボタンを実行。ymlファイルを/config/に置きます。

/config/newrelic.ymlの中でapplication名を変更。

(test-appは自分のアプリケーション名に変更してください)

app_name: test-app

あとはdeployして5分後くらいに、Heroku addons:open newrelicを実行すればNew Relic上でHerokuのパフォーマンスをチェックできます。

でモニタリング画面が表示されるようになったら、『Applications』=>『test-app』=>『Settings』=>『Availability Monitoring』=>『URL to ping』のフォームにhttp://test-app.herokuapp.com/などHerokuで発行されたURLを記入して『Save to Change』ボタンを実行。

これで定期的にデフォルトでは1分おきにURLの死活監視をしてくれるようになるっぽいです!

Logentriesの導入

Logentries』はログの保存や検索をサポートしてくれるサービスです。ログの中で特定のキーワードがあった場合にはエラーをメールしてくれます。Herokuの場合は致命的なエラーのキーワードがあらかじめ登録されているので、簡単にスタートできます。

heroku addons:add logentries

MySQLを使う場合

ここからはMySQLを使う場合限定です。まずはHerokuアドオンのClearDBをアドオンを追加。

heroku addons:add cleardb:ignite

次のコマンドを実行すると、CLEARDB_DATABASE_URLの設定情報が見えます。

heroku config | grep CLEARDB_DATABASE_URL
#=> CLEARDB_DATABASE_URL: mysql://xxxx

このMySQL://xxxx以下をHerokuのDATABASE_URLにセット。

アダプタはmysql2にするように注意が必要。

heroku config:set DATABASE_URL='mysql2 xxx' --app mimimiru-wh

HerokuへのPush

HerokuへのPushを行う前に、Gitに最新のコードをコミット。

git add . -A
git commit -m "add scaffold"

いよいよ、HerokuへのPush。

git push heroku master

あとはmigrationの実行。

heroku run rake db:migrate

次のコマンドを実行するとブラウザが起動するので確認。

heroku open

😼 補足bundle execの省略

rbenv環境で、「rbenv-binstubs」を使うと、bundle execを省略できます。bundle install(bundle)の際に次のコマンドを入力してください。

bundle install --binstubs=.bundle/bin

🐹 Heroku両記事まとめ

herokuのDBにローカルのrailsアプリケーションからアクセス

AnosideをさくらのVPSからHerokuに移した話

SidekiqやMandrill、MySQLのデータをPostgreSQLのデータにコンバートする方法などが書かれています。

🐮 個人で使えそうなテック系サービス

kimono

Webサイトの特定箇所をWeb APIライクにJSON形式で取得できるサービス。

RSS-to-Email | MailChimp

RSSからメールを自動生成してくれるサービス・メルマガが充実している海外ならでは!

🎉 おもしろそうなGem

Railsなプロジェクトで利用している便利なGem一覧 - TIM Labs

モダンなRubyGemが数多くあります。Active Recordを簡単に書くことができる「Squeel」や「awesome_nested_fields」とか、これから試してみたい!

🐯 参考リンク

@yoneappさんにconfig.serve_static_assets = trueを使わない方がいいよとドバイスをいただきました。助かりました。ありがとうございます! ^^

Ruby on Rails 4への移行でハマったポイント - Qiita [キータ]

Rails使いよspork, zeusからspringへ! | Act as Professional - hiroki.jp

ruby on rails - Heroku Config Secret Key Base Error - Stack Overflow

Rails4をHerokuに(クラウドに一歩一歩近づく) - 五十の手習い日記

Rails4時代の高速テスト環境 Rspec+Guard+FactoryGirl+Spring[NEW!] - Qiita [キータ]

Herokuで強制的にdb:migrateをやり直す。 - このブログは証明できない。

Herokuにmaster以外のブランチをデプロイする方法 stackoverflow

Ruby 2.0.0-p247 + Rails 4.0.0 + minimum-omniauth-scaffold - Qiita [キータ]

Pete : Avoid Heroku idling with New Relic pings

Getting Started with Rails 4.x on Heroku | Heroku Dev Center

Heroku+Rails4+Devise+MySQL+Redis - 成らぬは人の為さぬなりけり

rails 4 enabled rails to serve static assets: is it correct? (on heroku) - Stack Overflow

Code from the sideline — Rails Quick Tip: Set a secret token for Heroku deploy

🎃 変更来歴

(13/09/29 20:25) rails_config/simple_formを追加

(13/09/30 05:20) 記述ミスの修正、おまけの追加

(13/12/01 12:50) postgresql用のユーザー作成の手順を追記、gem『rails_12factor』を追加

(13/12/03 21:45) Herokuにマスタ以外のブランチをデプロイする方法を追加

(13/12/05 08:55) Herokuタイムゾーン設定を追加、ERB=>hamlへの変換を追加

(13/12/06 20:45) Herokuへの環境変数の設定と確認

(13/12/23 12:05) config.serve_static_assets = falseを削除

(13/12/23 15:20) rails-assetsを追加

(13/12/28 10:10) newrelicの記述を追加

(14/01/01 16:05) guard/spring/kaminari/figaro/pumaの設定を追加、unicorn、.Ruby-versionを削除

(14/01/03 23:55) Application Templateへのリンクを追加

(14/02/02 20:55) Heroku両記事まとめを追加

(14/03/21 09:40) かなりの分量ですので、タイトルを「簡単手順 => 詳細手順」に変更

📚 おすすめの書籍

💩 欲しいものリスト公開しました