LoginSignup
7
8

More than 5 years have passed since last update.

Ruby on Rails ~herokuにアップしたRailsアプリで、Amazon S3(AWS)に画像を保存する(コードメモ)

Last updated at Posted at 2017-01-17

※Railsアプリのherokuへのデプロイは前回の記事を参照。
Ruby on Rails ~herokuにRailsアプリをデプロイ(アップロード)する方法(コードメモ)
〜 
http://qiita.com/wtb114/items/723d9ccdc00489476b8d

herokuにデプロイ後は多くの人が、
「せっかく本番環境のデプロイに成功したのに画像が保存されない。」という問題にぶつかります。
herokuでは、サムネイルなどに使用したアップロード画像を保存できないため、別にアップロードサーバーを用意する必要があります。

そこで、画像の保存先をAmazon S3に指定してみたいと思います。
(アプリはpaperclipを使用しています。)
※Amazon S3は1年間無料。(制限あり)

今回はUserページのavatarを、paperclipでアップロードできるように実装しています。

1.Amazon S3に登録。

https://aws.amazon.com/jp/?tag=vig-20
にアクセス。
アカウントを持っていない場合はサインアップしてログインしましょう。
途中クレジットカード情報の登録と認証電話のプロセスがあります。プランはひとまずBasic(無料)を選択。

・トップページの「アカウント」タブから「セキュリティ認証情報」をクリック。

・「アクセスキー」から「新しいアクセスキーを作成」。
アクセスキー情報を表示させ、大切に保管しておいてください。
アクセスキーIDとシークレットアクセスキーは後ほど使うのでメモしておいてからウィンドウを閉じてください。

・「サービス」タブから「ストレージ」の「S3」をクリック。

・「バケットを作成」から任意の名前で作成。リージョンは「Tokyo」を選択。

これでひとまず登録作業は完了です。

2.Gemfileの編集

Gemfile

  gem 'paperclip', '~> 4.3'
  gem 'aws-sdk', '< 2.0'

Gemfile.lockを削除後、

$ bundle install

3.paperclipの環境設定

1.で生成したアクセスキーIDとシークレットアクセスキー、バケット名を用意。
リージョンは適切な形に変換しホスト名を指定する必要があります。(Tokyoの場合は "ap-northeast-1"、ホスト名は"s3-ap-northeast-1.amazonaws.com")。
その他の場合は、下記を参照してください。
http://docs.aws.amazon.com/general/latest/gr/rande.html?tag=vig-20#s3_region

今回はユーザーページにアップロードする画像をAWSのS3にアップロードするので、
Userモデルに下記を追加します。

app/models/user.rb


  if Rails.env.production?
    S3_CREDENTIALS={access_key_id: "アクセスキーID", secret_access_key: "シークレットアクセスキー", bucket:"バケット名", s3_host_name: "s3-ap-northeast-1.amazonaws.com"}#東京の場合
  end

  if Rails.env.production?
  has_attached_file :avatar, storage: :s3, s3_credentials: S3_CREDENTIALS,
  styles: { medium: "300x300!", thumb: "100x100!>"}, path:":attachment/:id/:style.:extension"
  else
    has_attached_file :avatar, styles: { medium: "300x300!", thumb: "100x100!>"}
  end

以上で、paperclipでアップロードした画像がAmazon S3に保存されるようになります。

7
8
0

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
7
8