酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

HerokuにRails 3.2.9/Bootstrapでデプロイ 最短・簡単ガイドだよ!

Heroku + Rails 3.2.9 + Bootstrap + Haml + PostgreSQL でデプロイするまでの最短ガイドを作りました!

fpu_tmp_1353848330.5039_237fab

Heroku ユーザー登録

Herokuでユーザー登録をします。 アカウント作成時に使ったメールアドレスとパスワードは後で使うのでメモっておいてください。

fpu_tmp_1353828845.2153_57ac05

Heroku Toolbeltをインストールします。Heroku Toolbeltの機能は;

  • Heroku client - Heroku appsを管理するためのCLI
  • Foreman - ローカルでHerokuアップを動かすためのオプション
  • Git - HerokuへのPush/ソースのバージョン管理

fpu_tmp_1353829261.6919_09c68e

ローカル環境設定

任意でrailsのアップデートを実行します。

コンソール
1
rvmsudo gem update rails

gem herokuをインストールします。

コンソール
1
gem install 'heroku'

アカウント作成時に使ったメールアドレスとパスワードを事前に設定します。 これによってデプロイのたびに、パスワードを聞かれるのを防ぎます。

コンソール
1
2
3
4
5
heroku keys:add
Enter your Heroku credentials.
Email: email@example.com
Password: your-password
Uploading ssh public key /Users/joe/.ssh/id_rsa.pub

Rails プロジェクト作成 〜 index.html表示まで

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

コンソール
1
rails new test-app --skip-test-unit -d postgresql

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

コンソール
1
2
3
git init
git add -A
git commit -m "create new project"

herokuコマンドを使って、heroku上にアプリケーションを作成します。 (test-appだとすでに使われてて動かないので、使われてなさそうな名前がいいっすよ〜)

コンソール
1
2
3
4
heroku create test-app --stack cedar
> Creating test-app... done, stack is cedar
> http://test-app.herokuapp.com/ | git@heroku.com:test-app.git
> Git remote heroku added # <= こうなっていれば成功

http://test-app.herokuapp.com/ をブラウザで表示されることを確認。

Rails Gem登録 〜 scaffold表示まで

gemfileを編集して、プロジェクトに任意のGemを追加。 (gemは適宜カスタマイズしてください)

gemfile
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
source 'https://rubygems.org'
ruby "1.9.3"

gem 'rails'

# Bootstrap
gem 'less-rails'
gem 'less-rails-bootstrap'

# Form Builders
gem 'simple_form'
gem 'country_select'

# Haml
gem 'haml-rails'

# jQuery/json
gem 'jquery-rails'
gem 'jquery-cookie-rails' # jquery-cookie
gem 'json'

# Presenter
gem 'draper'

# Thin
gem 'thin'

group :assets do
  gem 'coffee-rails'
  gem 'therubyracer'
  gem 'uglifier'
end

group :development do
  # 環境変数をロードして複数のプロセスを実行する作業を自動化
  gem 'foreman'

  # viewやcssの変更を監視してブラウザを自動的にリロードする
  gem 'guard-livereload'
  gem 'em-websocket'

  # デバッガー
  gem 'pry-rails'
end

group :development, :test do
  gem 'mysql2'

  # Rspec
  gem 'rspec-rails'

  # FactoryGirl
  gem 'factory_girl_rails'

  # 設定をロードしたサーバーによってテストを高速化
  gem 'spork'

  # ファイルの変更を検知する。OSX用
  gem 'rb-fsevent'

  # テスト結果をGrowlで通知する
  gem 'growl'

  # ファイルの変更を監視してテストを自動化
  gem 'guard-rspec'

  # 設定ファイルの変更を監視してテストサーバーを再起動
  gem 'guard-spork'

  gem 'rails3-generators', :git => 'https://github.com/neocoin/rails3-generators.git'
end

group :postgres do
  gem 'pg'
end

Gemをインストール。

コンソール
1
bundle install

config/application.rbの設定です。
(class Application < Rails::Application内に追記してください)

config/application.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# LESS
config.app_generators.stylesheet_engine :less
config.less.paths << "#{Rails.root}/lib/less/protractor/stylesheets"
config.less.compress = true
config.assets.compress = true
config.assets.initialize_on_precompile=false # herokuでasset:precomileエラー対策

# Set timezone
config.time_zone = 'Tokyo'
config.active_record.default_timezone = :local

# 日本語化
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"
end

# load original validator(オリジナルのバリデーターがある場合のみ)
config.autoload_paths += %W(#{config.root}/lib/validators)

Herokuのタイムゾーン設定。

コンソール
1
heroku config:add TZ=Asia/Tokyo

application.cssを削除して、lessファイルを生成

コンソール
1
2
rm -rf app/assets/stylesheets/application.css
rails generate less:assets application

bootstrapのcssを読み込むように設定を追加する。 app/assets/stylesheets/application.css.lessに以下んコードを追加。

app/assets/stylesheets/application.css.less
1
2
// = require_tree .
@import "twitter/bootstrap";

bootstrapのjavascriptを読み込むようにするために、app/assets/javascripts/application.jsに以下のコードを追加。

app/assets/javascripts/application.js
1
2
3
4
5
6
//= require twitter/bootstrap
//= require jquery.cookie

$(document).ready(function(){

});

application.html.erbファイルをhamlにファイル名を変更。

コンソール
1
mv app/views/layouts/application.html.erb app/views/layouts/application.html.haml

application.html.hamlの中身もhaml形式にする。

application.html.haml
1
2
3
4
5
6
7
8
9
!!! 5
%html
  %head
    %title TEST_APP
    = stylesheet_link_tag "application", :media => "all"
    = javascript_include_tag "application"
    = csrf_meta_tags
  %body
    = yield

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

コンソール
1
2
wget https://raw.github.com/svenfuchs/rails-i18n/master/rails/locale/ja.yml
mv ja.yml config/locales/ja.yml

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

コンソール
1
rails generate simple_form:install --bootstrap

railsへのrspecのインストールと雛形を作成

コンソール
1
rails generate rspec:install

rspecの設定ファイル”spec/spec_helper.rb”を修正(コメントアウトする)

spec/spec_helper.rb
1
2
#config.fixture_path = "#{::Rails.root}/spec/fixtures"
#config.use_transactional_fixtures = true

scaffoldを追加の前にpublic/index.htmlをリネーム(無効化する)。

コンソール
1
mv public/index.html public/_____index.html

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

コンソール
1
rails g scaffold product name price:integer

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

config/routes.rb
1
root :to => "products#index"

Herokuでthinが動くようにする。 プロジェクト直下にProcfileを新規作成。

Procfile
1
web: bundle exec rails server thin -p $PORT -e $RACK_ENV

設定画反映されたかチェック。

コンソール
1
2
foreman check
>valid procfile detected (web) ← 成功

$RACK_ENVをセットするファイルを作成

コンソール
1
echo "RACK_ENV=development" >>.env

gitに.envが記録されないようにする。 プロジェクト直下の.gitignoreに以下を追加。

.gitignore
1
.env

Herokuへのアプリのデプロイ => DBのマイグレーション。

コンソール
1
2
3
4
git add . -A
git commit -m "add scafford"
git push heroku master
heroku run rake db:migrate

ブラウザでscaffordしたビューが見れることを確認。 デプロイまでの最短ガイドは以上っす。

Thank very much you for your kind attention.

関連記事

開発サーバをThinからPowに切り替えて開発効率アップ! (Mac限定) にてPowに関する記事を載せました。Guardが更に活用できると思います。よかったらぜひ見てください。

補足 : ローカルでのテスト環境の構築

config/database.ymlを以下の通り編集する。今回は

  • “development”, “test” => mysql
  • “production” => postgreSQL

とした場合の設定です。環境に合わせて調整を。

config/database.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
development:
  adapter: mysql2
  encoding: utf8
  reconnect: false
  database: test-app_development
  pool: 5
  username: root
  password:
  socket: /var/lib/mysql/mysql.sock

test:
  adapter: mysql2
  encoding: utf8
  reconnect: false
  database: test-app_test
  pool: 5
  username: root
  password:
  socket: /var/lib/mysql/mysql.sock

production:
  adapter: postgresql
  encoding: unicode
  database: test-app_production
  pool: 5
  username:
  password:

DBの作成を実行。

コンソール
1
2
rake db:create RAILES_ENV='development'
rake db:create RAILES_ENV='test'

サーバプロセスを起動する。

コンソール
1
foreman start

http://0.0.0.0:5000/_____index.htmlを表示してDBに接続されていることを確認する。

補足 : コマンド系

Heroku コマンド一覧

コンソール
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# herokuへのログイン
heroku login
Email: email@example.com
Password: your-password

# アプリの作成
heroku create

# マイグレーション
heroku run rake db:migrate

# アプリのデプロイ
git add . -A
git commit -m "add function"
git push heroku master

# 環境変数のセット
heroku config:add USERNAME=admin PASSWORD=xxx

# ログ確認
heroku logs -t

# heroku プロセス情報の表示
heroku ps

# heroku 環境変数の表示 
heroku config

既存モデルのRspec雛形を作成するコマンド。

コンソール
1
rails generate rspec:model products

テスト環境は以下の通りです。

OS : Mac Lion(OS X 10.7)
Rails : 3.2.9
haml : 3.1.7
coffee-script : 3.2.1

Special Thanks

おすすめの書籍