田舎の技術者が奮闘中

php ruby node.js javascript などのスクリプト言語とサーバー(Chef、Vagrant)に関して書きます。

ruby on rails3 + paperclip + amazon S3 に画像をアップしてみる

はい、rails初心者です。
初回はrailsからAWSのS3に画像をアップしてみます。


ほとんどrails触ったことないんで、実際に完成できるか心配ですが頑張ってみます。
(環境に関しては次回まとめます。ちなみに nginx + passenger + mysqlです。)

railsのインストールなどは行なっている前提で書きます。

まず画像アップ用のプラグインは「paperclip」を利用します。
他にもDragonflyなどもあるらしいですが、情報が少なかったので今回は「paperclip」で!

Gemfileを修正

まず「paperclip」は必要だが、他にも「aws-sdk」が必要なのでGemfileに書き込む。

gem 'paperclip'
gem 'aws-sdk', '~> 1.3.4'

書き込みが完了したら、「bundle install」を行う。

$ bundle install

modelの準備

今回は新たにmodelを作成する。

rails g scaffold item name:string

テーブル準備

rake db:migrate

Modelの修正を行う。

class Item < ActiveRecord::Base
 has_attached_file :photo,
  :styles => {
   :thumb  => "100x100",
   :medium => "200x200",
   :large => "600x400"
  },
   :storage => :s3,
   :s3_credentials => "#{Rails.root}/config/s3.yml",
   :url => "AWS_URL",
   :s3_host_name => "AWS_URL",
   :path => ":attachment/:id/:style.:extension"
end

s3_credentialsで呼び出しているs3.ymlファイルを新規で作成。
※設定はAWSから取得する。

development:
  bucket: myappdevelopment
  access_key_id: your key
  secret_access_key: your key

test:
  bucket: myapptest
  access_key_id: your key
  secret_access_key: your key

production:
  bucket: myapp
  access_key_id: your key
  secret_access_key: your key


画像の情報を保存するためにitemsテーブルを変更するので
マイグレーション用のスクリプトを作成する。
※各カラムのphoto_○○は、has_attached_fileの引数で指定した名称になる。

$ rails g migration add_photo_columns_to_item
class AddPhotoColumnsToItem < ActiveRecord::Migration
  def self.up
    add_column :items, :photo_file_name,    :string
    add_column :items, :photo_content_type, :string
    add_column :items, :photo_file_size,    :integer
    add_column :items, :photo_updated_at,   :datetime
  end

  def self.down
    remove_column :items, :photo_file_name
    remove_column :items, :photo_content_type
    remove_column :items, :photo_file_size
    remove_column :items, :photo_updated_at
  end
end

マイグレーションする。

rake db:migrate

viewの修正

_form.html.erbを編集

#一行目編集
<%= form_for @item , :html => { :multipart => true } do |f| %>
#formタグの中に追加
<%= f.file_field :photo %>

show.html.erbを編集

<%= image_tag @product.photo.url %>
<%= image_tag @product.photo.url(:medium) %>
<%= image_tag @product.photo(:thumb) %>
<%= image_tag @product.photo(:large) %>


とりあえずS3にはアップできたが、表示側が見れないorz
多分modelの設定だと思うが。。。とりあえずDocumentを読んでみる。
※「s3_host_name => "AWS_URL"」を追加すると正常に見れます。
よくわからないですが、勝手に違うリージョンに行ってたみたいです・・・なんでですかね?

https://github.com/thoughtbot/paperclip
http://rubydoc.info/gems/paperclip/Paperclip/Storage/S3