[ Rails ] CarrierWave + fog でS3に画像アップロードしたい!

rails-logo

 

こんにちは。たなかです。

RailsのWebサービスで、画像アップロード機能を実装する機会に恵まれたので、ついでに記事にしよっかなって具合でこの記事を書いてます。

 

Webサービス開発していると、『画像をアップロードしたい!』みたいなことはよくあると思うので、手順をメモしておく意味もこめてシェアしてみようかなと思います。

 

画像アップロード機能の準備

gemの導入

 

Gemfileに以下を追記します。

# AWS S3 upload
gem 'carrierwave'
gem 'fog'

追記できたらbundle install。

アップローダーの作成

続いてアップローダーを作成します。
アップロードに関する設定を行ったりできます。

$ rails g uploader image

以下のようなログが出れば成功

create  app/uploaders/image_uploader.rb

さっそく出来上がったapp/uploaders/image_uploader.rbを見に行きます。

 class ImageUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  # include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  # Provide a default URL as a default if there hasn't been a file uploaded:
  # def default_url(*args)
  #   # For Rails 3.1+ asset pipeline compatibility:
  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
  #
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  # end

  # Process files as they are uploaded:
  # process scale: [200, 300]
  #
  # def scale(width, height)
  #   # do something
  # end

  # Create different versions of your uploaded files:
  # version :thumb do
  #   process resize_to_fit: [50, 50]
  # end

  # Add a white list of extensions which are allowed to be uploaded.
  # For images you might use something like this:
  # def extension_whitelist
  #   %w(jpg jpeg gif png)
  # end

  # Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  # def filename
  #   "something.jpg" if original_filename
  # end
end

今回は上記から以下の3カ所を変更しました。

 # storage :file
 storage :fog
  def extension_whitelist
    %w(jpg jpeg gif png)
  end
  def filename
    original_filename if original_filename
  end

モデルにmount_uploaderを追加

今回はお知らせを担当するnewsモデルに画像を追加したいので、news.rbにmount_uploaderを追記してやります。

class News < ApplicationRecord
  mount_uploader :image, ImageUploader
end

モデルに文字通り、image_uploaderをマウント(取り付け)してやる感じです。

Carrierwave.rbを作成

 CarrierWave.configure do |config|
  config.fog_credentials = {
    provider: 'AWS',
    aws_access_key_id: 'xxxxxxxxxxxxxxxxxxxx',
    aws_secret_access_key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    region: 'ap-northeast-1'
  }

  config.fog_directory  = 'xxxxxxxxx'
  config.cache_storage = :fog
end

画像アップロード機能の実装

例えば今回たなかはshopに紐づくshop_imagesを作成したかったので、以下のようなフォームを作成しました。

 
<%= form_with model:shop, url: root_path, method: method do |f| %>

  <%= f.fields_for :shop_images do |image| %>
    <%= image.label :image, "画像" %>
    <%= image.file_field :image %>

  <% end %>

  <%= button_tag '作成', type: :button, class: 'btn btn-primary', data: { action: shop_resource_path, status: 'saved' }, id: 'shop-submit' %>

<% end %>

※ブログ展開用に一部ソースを書き換えてます

画像アップロードの確認

AWS S3にログインして、該当のバケットを確認。

バケット名/uploads/shop/image/1 のような具合に階層分けされてアップロードできていました。よっしゃ。

まとめ

 

というわけでCarrierWaveとfogを使ったS3への画像アップロード実装でした。

オーソドックスな方法かと思いますが、初学者には結構重め。

Railsもまだよくわかってないのに、AWS?ファイルストレージ?なにそれ美味しいの?って感じになりがちです。

とはいえ、Webサービスで画像のアップロードは割と頻出する実装なので、自分の中でもしっかりまとめて、いろいろ応用が効くようにしていきたいっすね。

 

今回はここまで。

参考サイト

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です