88386


※[他質問サイト](https://teratail.com/questions/of5gf7t2phurg5)でも同様の質問をしています。解決した場合はそちらも更新します。よろしくお願いします。

### 前提

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

ActiveStorage、S3のセットアップは以下を参考にして設定しました。  
[[Rails] ActiveStorage + Amazon
S3のセットアップ手順をざっくり説明！](https://zenn.dev/kurao/articles/ce8e583450c76e)

以前までは画像が保存できないエラーが生じていました。  
[S3に画像ファイルをアップロードできない](https://teratail.com/questions/3aylzv3ia4g0s8)

### 実現したいこと

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

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

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

### 該当のソースコード

[code]

    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
    
[/code]

[code]

    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
    
[/code]

[code]

    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) %>
    
[/code]

[code]

    class Message < ApplicationRecord
    （省略）
      has_one_attached :image
    end
    
[/code]

[code]

    <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>
    
    
[/code]

[code]

    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
    
[/code]

### 試したこと

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

[Rails 6
ActiveStorageを使用してS3に画像ファイルをアップロードし、取得した画像をリサイズして表示する方法](https://qiita.com/tsubasan1122/items/0171fe04754a760f7e4a)  
[DM機能の実装(メッセージ投稿)](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>

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

[code]

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

### 追記(20220410)

開発ツールでの検証です。  
そもそも画像を取得できていない状況です。  
[![画像の説明をここに入力](https://i.stack.imgur.com/vOUvB.png)](https://i.stack.imgur.com/vOUvB.png)


CC BY-SA 4.0
2022-04-08T06:17:29.503
88222
2022-04-18T16:09:24.670
2022-04-10T06:19:37.387
51475
51475
question
ruby-on-rails amazon-s3
ActiveStorageを使用してAmazon S3に保存された画像を表示したい


原因はわからないままですが、動作確認用のテストアプリを作成した結果、問題なく実装できましたので同様の操作を行い問題が解決しました。

参考にした記事を添付します。  
[【Rails6.0】Active
Storageを用いた単数枚、複数枚画像投稿の実装手順をそれぞれ解説](https://techtechmedia.com/active-storage-
rails6/)  
[Rails 6
ActiveStorageを使用してS3に画像ファイルをアップロードし、取得した画像をリサイズして表示する方法](https://qiita.com/tsubasan1122/items/0171fe04754a760f7e4a)


CC BY-SA 4.0
2022-04-18T16:09:24.670
88386
2022-04-18T16:09:24.670
51475
88222
answer