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


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


😎 Herokuユーザー登録

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

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

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

🍄 ローカル環境設定

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

rvmsudo gem update rails

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

gem install 'heroku'

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

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の新規プロジェクトを作成します。

rails new test-app --skip-test-unit -d postgresql

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

Git init
Git add -A
Git commit -m "create new project"

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

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は適宜カスタマイズしてください)

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'
# ファイルの変更を検知する。macOS用
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をインストール。

bundle install

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

# 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のタイムゾーン設定。

heroku config:add TZ=Asia/Tokyo

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

rm -rf app/assets/stylesheets/application.css
rails generate LESS:assets application

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

// = require_tree .
@import "twitter/bootstrap";

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

//= require Twitter/bootstrap
//= require jQuery.Cookie
$(document).ready(function(){
});

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

mv app/views/layouts/application.html.erb app/views/layouts/application.html.haml

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

!!! 5
%html
%head
%title TEST_APP
= stylesheet_link_tag "application", :media => "all"
= javascript_include_tag "application"
= csrf_meta_tags
%body
= yield

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

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

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

rails generate simple_form:install --bootstrap

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

rails generate rspec:install

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

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

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

mv public/index.html public/_____index.html

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

rails g scaffold product name price:integer

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

root :to => "products#index"

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

Web: bundle exec rails server thin -p $PORT -e $RACK_ENV

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

foreman check
>valid procfile detected (web) ← 成功

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

echo "RACK_ENV=development" >>.env

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

.env

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

Git add . -A
Git commit -m "add scafford"
Git push herokuマスタ
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

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

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の作成を実行。

Rake db:create RAILES_ENV='development'
Rake db:create RAILES_ENV='test'

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

foreman start

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

🏀 補足 : コマンド系

Herokuコマンド一覧

# 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マスタ
# 環境変数のセット
Heroku config:add USERNAME=admin PASSWORD=xxx
# ログ確認
Heroku logs -t
# Herokuプロセス情報の表示
Heroku ps
# Heroku環境変数の表示
Heroku config

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

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

🏈 参考リンク

📚 おすすめの書籍