Rails3.1 with Compassをherokuにdeployする

心機一転、Compassを利用してブログのデザインをリニューアルしたので、Compassのセットアップ方法と、herokuへのデプロイ時のメモを残しておきます。Compassのご紹介はまた次回に！

Compass Study
Compass Study / Calsidyrose

環境

Rails 3.1.3
ruby 1.9.2 p290

Compass

Compassは現時点で最新のものを入れておきます。

Gemfileに追記
gem 'compass', "~> 0.12.alpha.3"

bundleしてから、次のコマンドでCompassの基本的なファイルを生成します。--syntax sassを指定しない場合はscssで生成されますが、Rails3.1系を使うなら迷いなくsassを使う方が良いでしょう。生成されるファイルの構成の理由についてはCompass Best Practicesを読むとそういうものなんだなぁと分かります。

Railsへのセットアップ
$ compass init rails --using blueprint --syntax sass
directory app/stylesheets/
directory app/stylesheets/partials/
directory public/images/
directory public/stylesheets/
   create config/compass.rb
   create app/stylesheets/screen.sass
   create app/stylesheets/partials/_base.sass
   create app/stylesheets/print.sass
   create app/stylesheets/ie.sass
   create public/images/grid.png

Congratulations! Your rails project has been configured to use Compass.
Just a couple more things left to do.

Add the following to your Gemfile:

    gem "compass", ">= 0.12.alpha.3"

Then, make sure you restart your server.

Sass will automatically compile your stylesheets during the next
page request and keep them up to date when they change.

Now add these lines to the head of your layout(s):


  <%= stylesheet_link_tag 'screen.css', :media => 'screen, projection' %>
  <%= stylesheet_link_tag 'print.css', :media => 'print' %>

stylesheetsディレクトリはassets以下に移動しておきます。また、public/images以下に作られたgrid.pngもassets以下に移動しておきます。

$ cp -r app/stylesheets app/assets
$ rm -rf app/stylesheets
$ mv public/images/grid.png app/assets/images

application.html.erbのheadタグ内に次のコードを追加。


  <%= stylesheet_link_tag 'screen.css', :media => 'screen, projection' %>
  <%= stylesheet_link_tag 'print.css', :media => 'print' %>

Hamlで書くなら以下のようにします。

%head
  = stylesheet_link_tag 'screen.css', :media => 'screen, projection'
  = stylesheet_link_tag 'print.css', :media => 'print'
  
  = stylesheet_link_tag 'ie.css', :media => 'screen, projection'

heroku

何はともあれheroku_sanをいれておきましょう。

Gemfileに追記
gem 'heroku_san', :group => :development

bundleしてからConfigファイルを作成し、Heroku Appを作成します。

コマンドライン
$ rake heroku:create_config

Rails 3.1からはCedarスタックでアプリケーションを作成する必要があります。Bambooでも運用できないことはないのですが、Compassとの組み合わせだとかなり難しいので、せめてCompassを使う場合はCedarで作った方が無難です。

例：このブログのheroku.yml
production:
  app: mah-lab-cedar
  stack: cedar
  config:
    BUNDLE_WITHOUT: "development:test"
    TZ: "Asia/Tokyo"

staging:
  app: mah-lab-cedar-staging
  stack: cedar
  config: &default
    BUNDLE_WITHOUT: "development:test"
    TZ: "Asia/Tokyo"
コマンドライン
$ rake all heroku:create heroku:rack_env
$ rake all heroku:config

既にBambooスタックで運用しているアプリケーションをCedarに移行する場合、Heroku側で移行する仕組みは用意されていないため、DBを手動で移行する必要があります。（heroku db:pullとpushを使う等）

アプリケーションを作成してherokuにデプロイする前に、以下の作業をします。

必要なGemfileの追加
gem 'pg', :group => [:production]
sqlite3がproductionでbundleされないようにする
gem 'sqlite3', :group => [:development, :test]
config/environments/production.rbのconfig.assets.compileの値を以下の通り変更する
config.assets.compile = true

後はheroku_sanが上手いことデプロイしてくれます。

$ rake staging deploy

このブログは実際にRails3.1 + Compassの構成で作成しているので、このブログのソースコードを見て頂くのでも良いと思います。