こんにちは。たなかです。
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サービスで画像のアップロードは割と頻出する実装なので、自分の中でもしっかりまとめて、いろいろ応用が効くようにしていきたいっすね。
今回はここまで。
参考サイト