366
316

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Railsでcarrierwaveを使ってAWS S3に画像をアップロードする手順を画像付きで説明する

Last updated at Posted at 2017-02-22

概要

タイトルまま。そのままやれば10分でrailsに画像アップローダー機能が追加されるはず。

前提

  • railsインストール済
  • AWSアカウント作成済み

手順

AWSでユーザーを作成し、S3バケットを作成する。次に、railsでcarriewaveの設定する。

AWS

IAM設定

IAMユーザ作成

  • AWSコンソールにログインしてIAMサービスにアクセスする
    https://gyazo.com/2fb2114c4f300d6633fc1ab79d862a5c

  • ユーザを追加する
    https://gyazo.com/a90614dd9d284f1ae6ad699b60e89b4a

  • ユーザー名を入力し、アクセスの種類をプログラムによるアクセスにする
    https://gyazo.com/115afc09d7e3513c791af3156ffbbdd5

  • 上記で作成したユーザにS3へアクセスできる権限を追加
    https://gyazo.com/f0eb22ad0774f2015b75c151a33aeca4

  • 設定を確認しユーザ作成を完了する
    https://gyazo.com/165d7e2f55a98625df0c9e55e62f646a

IAMユーザのアクセスキーを入手する

  • ユーザーを選択
    https://gyazo.com/d691057f84a01f438cd8407d3196fe0c

  • アクセスキーを追加
    https://gyazo.com/7948222e4e7510dfd5ec88f83ad5dd60

  • アクセスキーとシークレットアクセスキーをメモする。(下記キーは事例のため開示しているけど、本来は絶対に秘密にすべき文字列です。)
    https://gyazo.com/adcc51e0a8fb0a888ca11c94f28675ca

S3バケット作成

  • S3にアクセスする
    https://gyazo.com/e6b273c94aa5e94641b5b8daf9f48200
    https://gyazo.com/85cba09f8cb838412908d1d5ecc3ffd5

  • バケット名を入力して、リージョンを選択して、作成する
    https://gyazo.com/9a1ec4f4c0cceb94eb1911be478962f9

rails & carrierwave

photoモデルをつくって、imageカラムに画像をアップロード出来るように設定します。

gemインストール

carrierwave gemを追加してインストールします。

# for image uploader with AWS S3
gem 'carrierwave'
gem 'fog'
$ bundle install

画像保存用のモデル作成

photoモデルを追加して、imageカラムを設定します。

$ rails g model photo
db/migrate/20170101010101_create_photos.rb
class CreatePhotos < ActiveRecord::Migration
  def change
    create_table :photos do |t|
      t.string :image
      t.timestamps
    end
  end
end

$ rake db:migrate

carrierwaveの設定

Uploaderクラスを追加します。名前はなんでもいいです。今回はImageにします。

rails generate uploader Image

最低限の設定をする。(ほぼデフォルト)。今回は、developmentとtest環境はlocalファイル、それ以外(productionやstaging)はS3を使う設定をする。重要なのは、最初の2-8行。

app/uploaders/image_uploader.rb
class ImageUploader < CarrierWave::Uploader::Base
  if Rails.env.development?
    storage :file
  elsif Rails.env.test?
  	storage :file
  else
    storage :fog
  end

  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  def extension_whitelist
    %w(png jpg)
  end

  def filename
    original_filename if original_filename
  end
end

前半で設定した内容を元に設定する

  • aws_access_key_id S3用に用意したIAMユーザーのアクセスキー
  • aws_secret_access_key S3用に用意したIAMユーザーのシークレットアクセスキー
  • region S3のリージョン
  • config.fog_directory S3のバケット名
config/initializers/carrierwave.rb
unless Rails.env.development? || Rails.env.test?
  CarrierWave.configure do |config|
    config.fog_credentials = {
      provider: 'AWS',
      aws_access_key_id: 'AKIAJMOPEQF3VXSKWXOQ',
      aws_secret_access_key: '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',
      region: 'ap-northeast-1'
    }
  
    config.fog_directory  = 'rails-photo-123'
    config.cache_storage = :fog
  end
end

画像用モデルをcarrierwave用に修正する

photoモデルのimageカラムにmount_uploaderを設定する。

app/models/photo.rb
class Photo < ActiveRecord::Base
  mount_uploader :image, ImageUploader
end

これで終了。

使い方

アップロード

mount_uploaderを設定したカラムをfile_fieldで呼び出せばstore_dirに保存されます。

app/views/photos/new.html.erb
<%= f.file_field :image %>

画像表示

image.to_sで画像表示用のリンクが取得できます。

app/views/photos/show.html.erb
<%= image_tag photo.image.to_s %>

複数のカラム

image.to_sで画像表示用のリンクが取得できます。

app/views/photos/show.html.erb
<%= image_tag photo.image.to_s %>

アップロード用のカラムを追加

さらにアップロードしたいカラムを追加したい場合は、migrationで普通にstring属性のカラムを追加して、モデルでmount_uploaderを追加するだけ。

app/models/photo.rb
class Photo < ActiveRecord::Base
  mount_uploader :image, ImageUploader
  mount_uploader :kudamono, ImageUploader
  mount_uploader :yasai, ImageUploader
  mount_uploader :okazu, ImageUploader
end

store_dirの説明

"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  • modelがモデル。ここでははphoto
  • mounted_asがカラム。ここではimage
  • ローカルファイルに保存する場合はpublic配下に保存される。
366
316
11

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
366
316

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?