質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

解決済

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

kyosuke
kyosuke

総合スコア39

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

1回答

0評価

0クリップ

442閲覧

投稿2022/04/06 10:03

編集2022/05/12 11:32

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

前提

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

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

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

実現したいこと

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

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

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

該当のソースコード

config/environment/development.rb

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

db/migrate/(日付)_create_active_storage_tables.active_storage.rb

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

config/storage.yml

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) %>

app/models/message.rb

class Message < ApplicationRecord (省略) has_one_attached :image end

app/views/rooms/show.html.erb

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

messages_controller.rb

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)

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

no1knows

2022/04/08 13:11

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

2022/04/10 06:17

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

2022/04/10 08:24

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

2022/04/11 06:59 編集

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

2022/04/11 15:57

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

2022/04/18 16:05

no1knowsさん、有難うございます。 返信が遅くなり申し訳ございません。また、投げやりな質問となってしまい失礼しました。 頂いたアドバイスをもとに勉強してまいります。 テストアプリを作成して動作確認をしました。原因は変わらずわからないですが問題なく実装できそうです!(別の問題は発生しましたが) いきなりS3から実装しようとしうまくいきませんでしたが、まずはActiveStorageの実装から行った結果、解決しました。有難うございました。
no1knows

2022/04/18 22:57

ひとまず前に進んだようで良かったです! Railsは新規プロジェクトでもrails g scaffoldを使えばすぐに簡単なアプリが作れてしまいます。 なので困ったときは問題を分解する意味で、まずは「簡単なアプリを作ってその機能だけを実装する」という形を取ると良いと思います。 (今回であればrails g scaffold User name:stringを作ってそれにActiveStorageを追加するとかそのくらい簡単なもので大丈夫です。) 参考までに僕の好きな記事です:http://kanjihtmt.github.io/blog/2015/04/02/scaffold/ とはいえ、最初のうちは質問するしないの判断が難しいと思うので、こういったところでじゃんじゃん質問してみてください!(適切な質問であれば、回答がつきやすいです。) あとどうやって解決したのかを記載してから、解決済みにしておいていただけると今後、他の方が読んだときの参考になるかと思います。
kyosuke

2022/04/20 01:38

有難うございます。 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

2022/04/21 04:03

お気遣いいただきありがとうございます! 僕はどうやれば解決できるかの道筋を示しただけで回答したわけではないのでスコアはなくて大丈夫です! 今後の方のために↑の内容を記載して解決済みにしてください! 本来であれば、このように「答えを教える」のではなく、「考え方を伝える」ことができると、自己解決できるようになってくるのでエンジニアとしてのレベルがグッとあがっていいんじゃないかと思うのですが、それを仕組み化(サービス化)するのはなかなか難しいなぁといつも思っています。 本件と全く関係ないのですが、下記でデバッグのやり方も見ておくと今後非常に良いかと思います。 https://www.youtube.com/watch?v=5fyrGslhUcY あとゆくゆくは下記のようなやり方も知っておくと便利だったりします! https://qiita.com/hypermkt/items/ad1d2854717f4c25a69d

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。