ActiveStorageを使用してAmazon S3に保存された画像を表示したい

Question

※他質問サイトでも同様の質問をしています。解決した場合はそちらも更新します。よろしくお願いします。

前提

railsでDM機能を作成しています。
ActiveStorageを使用してS3に画像ファイルをアップロードし、画像をブラウザに表示したいのですが、実装中に以下の問題が発生しました。

ActiveStorage、S3のセットアップは以下を参考にして設定しました。
https://zenn.dev/kurao/articles/ce8e583450c76e

以前までは画像が保存できないエラーが生じていました。
https://teratail.com/questions/3aylzv3ia4g0s8

実現したいこと

フォームから送信した画像をブラウザに表示したいです。
送信したメッセージはLINEのように蓄積されていきます。

発生している問題・エラーメッセージ

S3のオブジェクトには画像が保存されているのですが、ブラウザに表示されない問題が発生しています。

該当のソースコード

Rails.application.configure do
config.web_console.whitelisted_ips = '0.0.0.0/0'
  # ...
	
  config.active_storage.service = :amazon

  # ...

  Rails.application.routes.default_url_options[:host] = 'localhost'
  Rails.application.routes.default_url_options[:port] = 3000
end

class CreateActiveStorageTables < ActiveRecord::Migration[5.2]
  def change
    create_table :active_storage_blobs do |t|
      t.string   :key,        null: false
      t.string   :filename,   null: false
      t.string   :content_type
      t.text     :metadata
      t.bigint   :byte_size,  null: false
      t.string   :checksum,   null: false
      t.datetime :created_at, null: false

      t.index [ :key ], unique: true
    end

    create_table :active_storage_attachments do |t|
      t.string     :name,     null: false
      t.references :record,   null: false, polymorphic: true, index: false
      t.references :blob,     null: false

      t.datetime :created_at, null: false

      t.index [ :record_type, :record_id, :name, :blob_id ], name: "index_active_storage_attachments_uniqueness", unique: true
      t.foreign_key :active_storage_blobs, column: :blob_id
    end
  end
end

amazon:
  service: S3
  access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
  secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
  region: <%= Rails.application.credentials.dig(:aws, :s3, :region) %>
  bucket: <%= Rails.application.credentials.dig(:aws, :s3, :bucket) %>

class Message < ApplicationRecord
（省略）
  has_one_attached :image
end

<div class="row my-5">
（省略）
  <% if @messages.present? %>
（省略）
<!-- 画像を表示するコード -->
    <%= image_tag @message.image.variant(resize:'500x500'), class: 'message-image' if @message.image.attached? %>
<!--  -->

  <% else %>
    <p>メッセージはまだありません。</p>
  <% end %>


  <%= form_with model: @message do |f| %>
（省略）
<!-- 画像を選択するコード -->
    <div class="field">
      <%= f.file_field :images, direct_upload: true %>
    </div>
<!--  -->

    <div class="form-group">
      <%= f.submit "送信", class: "btn btn-primary" %>
    </div>
  <% end %>
</div>

class MessagesController < ApplicationController

  def create
    if Entry.where(user_id: current_user.id, room_id: params[:message][:room_id]).present?
      @message = Message.new(message_params)
      if @message.save
        redirect_to "/rooms/#{@message.room_id}"
      end
    else
      flash[:alert] = "メッセージ送信に失敗しました。"
    end
  end

  private

  def message_params
    params.require(:message).permit(:user_id, :content, :image, :room_id).merge(user_id: current_user.id)
  end
end

試したこと

以下記事を参考にしており、ビューのコードに問題があるかと
複数の記事を参考にして変えてみましたが、解決に至っていません。

https://qiita.com/tsubasan1122/items/0171fe04754a760f7e4a
https://shangang7321.hatenablog.com/entry/2020/09/04/093647

補足情報（FW/ツールのバージョンなど）

ruby '3.0.2'
rails ' 6.0.4'

追記(20220408)

以下記事を参考にS3の公開設定を行いましたが、解決には至っていません。
https://qiita.com/dayjournal/items/c827a17917127bff3906

・ブロックパブリックアクセスをオフに設定
・バケットポリシーを以下に編集

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Statement1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::バケット名/*"
        }
    ]
}

###追記(20220410)

開発ツールでの検証です。
そもそも画像を取得できていない状況です。

Comments

[no1knows]

ブラウザに表示されない問題が発生しています。
→WEB系であれば、まずはブラウザの開発者ツールでエラーが出ていないか確認しましょう。
特に画像のURLが期待通りになっているか、拡張子はきちんと設定されているかなどですね。

[kyosuke]

ご返信有難うございます！
開発ツールで確認したところ、```<p></p>```の間に含まれるはずの画像が取得できていない状況でした。
S3の設定に問題があるのでしょうか？

本文に追記しましたのでご確認をお願いいたします。

[no1knows]

まずはレコードに値が保存されているかを確認してください。
S3にデータがあるかどうかではなく、DBの該当カラムにS3のURLが入っているかということです。
たぶんレコードが空になっているんじゃないかと思いますが・・・もし、そうであれば保存する際のコードを見直してみてください。

[kyosuke]

有難うございます。以下コマンドで確認したところ、過去保存したデータが存在していました。
irb(main):001:0> ActiveStorage::Blob.all
とすると、表示するコードに誤りがあるということになりますでしょうか。
一方、active_storage_attachmentsテーブルは空でしたが、空は正常なのでしょうか。
お手数お掛けします。よろしくお願い致します。

[no1knows]

kyosukeさんが今後どういった方向性でキャリアを積んでいくのかにもよりますが、基本的に「人に聞くより自身で調べる力」と「問題を分解する力」を身につけることがとても大切になるかと思います。

> 一方、active_storage_attachmentsテーブルは空でしたが、空は正常なのでしょうか。

→「active_storage_attachments」ってなんだろう？検索してみよう
→検索結果の1ページ目にテーブルデータにまで言及した記事が見つかった！
（https://blog.kozakana.net/2018/03/try_active_storage/）
→1つの画像をアップロードしているのにそれぞれのテーブルにレコードが作られているぞ。。。
→このレコードが作られていないのが問題なんだな・・・（問題箇所の見当がつく）

なので、できれば「このレコードが空なのでしょうか？」という質問ではなくて、「レコードが空なのはおかしいので調べてみます。」もしくは「レコードが空だったので、アソシエーションなんかも見直したけどわかりません。」とかのほうが適切な返答かなぁと個人的には思います。

またActiveStorageでS3への実装方法の記事を参考にしていますが、経験が浅いうちは、評価が高い記事を探したほうがよいです。（今回の記事がどうのこうのという話ではありません。）
具体的にはいいねがたくさんついているとか、Railsで有名な方が書いた記事、あとは会社のブログで書いている記事など信頼のおける情報かどうかを判断する目を養うと実装のスピードが段違いになるかと思います。

まぁ、そうは言っても実装を進めたいはずなので…僕のおすすめとしては、ActiveStorageの動作確認用テストアプリを1から作って動作確認→その後、今のアプリの間違いを探すようにするとよいかと思います。
参考になるかわからないですが、随分前に僕がActiveStorageを動作確認したものは下記の記事でした。
S3についてはあまり言及されていないので、それは別の記事を探して設定した覚えがあります。
https://bagelee.com/programming/ruby-on-rails/active-storage-direct-upload/

[kyosuke]

no1knowsさん、有難うございます。
返信が遅くなり申し訳ございません。また、投げやりな質問となってしまい失礼しました。
頂いたアドバイスをもとに勉強してまいります。

テストアプリを作成して動作確認をしました。原因は変わらずわからないですが問題なく実装できそうです！（別の問題は発生しましたが）
いきなりS3から実装しようとしうまくいきませんでしたが、まずはActiveStorageの実装から行った結果、解決しました。有難うございました。

[no1knows]

ひとまず前に進んだようで良かったです！
Railsは新規プロジェクトでもrails g scaffoldを使えばすぐに簡単なアプリが作れてしまいます。
なので困ったときは問題を分解する意味で、まずは「簡単なアプリを作ってその機能だけを実装する」という形を取ると良いと思います。
（今回であればrails g scaffold User name:stringを作ってそれにActiveStorageを追加するとかそのくらい簡単なもので大丈夫です。）

参考までに僕の好きな記事です：http://kanjihtmt.github.io/blog/2015/04/02/scaffold/

とはいえ、最初のうちは質問するしないの判断が難しいと思うので、こういったところでじゃんじゃん質問してみてください！（適切な質問であれば、回答がつきやすいです。）

あとどうやって解決したのかを記載してから、解決済みにしておいていただけると今後、他の方が読んだときの参考になるかと思います。

[kyosuke]

有難うございます。

scaffoldでテストアプリを作成したのちに、ActiveStorageを追加し、ストレージの保存先をS3に変更し実装できました。その操作を作成中のアプリに再現しました。
no1knowsさんに教えていただいた記事含め以下を参考にしています。
https://techtechmedia.com/active-storage-rails6/
https://bagelee.com/programming/ruby-on-rails/active-storage-direct-upload/
https://qiita.com/tsubasan1122/items/0171fe04754a760f7e4a

no1knowsさんにスコアを付与したいのでこちらを元に解決方法に記載いただけないでしょうか。

[no1knows]

お気遣いいただきありがとうございます！
僕はどうやれば解決できるかの道筋を示しただけで回答したわけではないのでスコアはなくて大丈夫です！
今後の方のために↑の内容を記載して解決済みにしてください！

本来であれば、このように「答えを教える」のではなく、「考え方を伝える」ことができると、自己解決できるようになってくるのでエンジニアとしてのレベルがグッとあがっていいんじゃないかと思うのですが、それを仕組み化（サービス化）するのはなかなか難しいなぁといつも思っています。

本件と全く関係ないのですが、下記でデバッグのやり方も見ておくと今後非常に良いかと思います。
https://www.youtube.com/watch?v=5fyrGslhUcY

あとゆくゆくは下記のようなやり方も知っておくと便利だったりします！
https://qiita.com/hypermkt/items/ad1d2854717f4c25a69d

Answer 1

scaffoldでテストアプリを作成したのちに、ActiveStorageを追加し、ストレージの保存先をS3に変更し実装できました。その操作を作成中のアプリに再現しました。
以下を参考にしています。
https://techtechmedia.com/active-storage-rails6/
https://bagelee.com/programming/ruby-on-rails/active-storage-direct-upload/
https://qiita.com/tsubasan1122/items/0171fe04754a760f7e4a