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 # <= こうなっていれば成功< span>

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

🐹 参考リンク

• HerokuとRailsで手早くWebサイトを作る

• Railsアプリ作成 + Herokuデプロイ

• RailsアプリをPostgreSQLで開発してHerokuにデプロイするまでの簡単まとめ

• Herokuのwebサーバをthinに変更する

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

📚 おすすめの書籍