Help us understand the problem. What is going on with this article?

【Rails】Herokuで画像を投稿できるようにする方法(ActiveStorage + Amazon S3)

今回は、Rails 5.2で追加されたActiveStorageを使ってHerokuで画像をアップロードできるようにしたいと思います。

内容

  • ActiveStorageって何?
  • 最初に、Amazon S3でやること
  • 次に、Railsでやること
  • 最後に、Herokuでやること

ActiveStorageって何?

Amazon S3, GCS, AzureStorageなどのクラウドストレージに画像などのファイルをアップロードできるRailsの機能。
以前使われていた、CarrierWaveやPaperclipなどgemの代わりになる。

Active Storage の概要 | Railsガイドを参照

Rails バージョンの確認

$ rails -v
Rails 5.2.0

Active Storageを使うにはRails 5.2が必要です。
Rails 5.2 未満の場合はアップグレードしてください。

:beginner: ActiveStorageの使い方

わからない人のために載せておきます。
ここでは手短に、Userのアバター画像を管理する例を載せる。

$ rails active_storage:install
$ rails db:migrate
user.rb
class User < ApplicationRecord
  has_one_attached :avatar
end
edit.html.erb
<%= form.file_field :avatar %>
users_controller.rb
def create
  @user.create(...., avatar: params[:avatar])
end
show.html.erb
<% if @user.avatar.attached? %>
  <%= image_tag @user.avatar %>
<% end %>

詳しくはActiveStorageの使い方まとめをどうぞ。

手順

最初に、Amazon S3でやること

画像をアップロードする場所を用意

  1. AWSコンソール → サービス → ストレージ → S3
  2. バケットを作成する
    バケット = 画像などのファイルをアップロードできるところ
項目 入力・選択
パケット名 適当 ex: my-rails-app-first-bucket
リージョン :flag_jp: 東京
パブリックアクセス許可を管理する このバケットに読み取りアクセス権限をする
上記以外 全部デフォルトのままでok

アクセスキーを作る

  • AWSコンソール → サービス → セキュリティ → IAM
  • 個々の IAM ユーザーの作成」 → 「ユーザーの管理」 → 「ユーザーを追加」
項目 入力・選択
ユーザー名 適当 ex: TaroTanaka
アクセスの種類 プログラムによるアクセス
  • 「既存のポリシーを直接アタッチ」 → 「S3」で検索 → 「AmazonS3FullAccess」を選択 → 「次へ」 → 「ユーザーの作成」
  • 表示された「アクセスキー ID」と「シークレットアクセスキー」 をメモ帳などにコピペして保管する。

次に、Railsでやること

必要なGemのインストール

Gemfile
gem "aws-sdk-s3", require: false #追記
$ bundle install

S3へのアクセスキーを入力

$ EDITOR=vim rails credentials:edit

ここでActiveSupport::MessageEncryptor::InvalidMessageと言われたら credentials.yml.encを削除してからもう一度実行してください。 (@kenzoukenzou104809さんありがとうございます。参考記事 )

# コメントアウトを解除する
aws:
 access_key_id: #ここに自分のアクセスキーIDをコピペ
 secret_access_key: #ここに自分のシークレットアクセスキーをコピペ

:bulb: iキーで編集開始、escで編集終了 、 ZZで保存して終了

後から入力を確認したいときは

$ rails credentials:show

:information_source: 入力内容は config/master.key を使って暗号化され、 config/credentials.yml.enc が生成されます。これは中身が暗号化されているのでGitで管理しても大丈夫です。

Herokuでの画像の保存先をAmazon S3に変更

config/storage.yml
amazon:
  # 以下3行はそのまま
  service: S3
  access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
  secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
  # 以下2行は変える
  region: ap-northeast-1 #東京
  bucket: my-rails-app-first-bucket #自分で作成したS3のバケットの名前

config/environments/production.rb
config.active_storage.service = :amazon #amazonに変更

最後に、Herokuでやること

$ heroku buildpacks:add -i 1 https://github.com/heroku/heroku-buildpack-activestorage-preview
$ git add .
$ git commit -m "added s3 to production"
$ git push heroku master

Railsプロジェックトのマスターキー(config/master.keyの中身)をコピーします

$ heroku config:set RAILS_MASTER_KEY=マスターキーをここに貼り付け
$ heroku run rails db:migrate
$ heroku open

これで以上です。:tada:
お疲れ様です〜:coffee:

参考文献

Rails 5.2 credentials – cedarcode – Medium
Active Storage Overview - Ruby on Rails Guides
Ruby on rails Store Images on Amazon S3 Part 1 016
Ruby on rails Store Images on Amazon S3 Part 2 017
herokuでCredentialsとActive Storageを使う

hmmrjn
社会人1年目でWebエンジニアやってます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした