S3からAPIを介して取得した画像をブラウザに表示する

Question

###前提・実現したいこと
RubyOnRailsやJavaScriptを始めて3ヶ月程度のものです。

まだわからないことが多く、打開のきっかけになればと思い質問しました。
そのため勘違いしている部分もあるかと思いますがよろしくお願いします。

まず実現したいことは、商品の一覧を画像付きで表示する
サイトを作成することです。
画像は全てAmazonS3上にpng形式で保存されています。

今のところ自分の中で考えている流れとしては、

・ ajaxでRubyOnRailsで作ったAPIへ通信
・ APIでAmazonS3から画像を取得
・ 取得してきた画像をブラウザに反映

というものです。

###試したこと、問題点

いくつかの記事を見ながら、「S3にある画像を取得しローカルに保存する」ということは
出来ました。(下記のコード)

ただ、やりたいことは保存ではなく、ブラウザに表示できる形でAPIから
レスポンスを受け取ることです。

Utils.rb

def download_to_s3()
  bucket = Aws::S3::Resource.new(
                               :region =>   ENV['aws_s3_region'],
                               :access_key_id =>     ENV['aws_access_key_id'],
                               :secret_access_key => ENV['aws_secret_access_key']
                             ).bucket(ENV['aws_s3_bucket_name'])
                             
   object = bucket.object("key")

   File.open("sample.png", "wb") do |file|
     object.get do |chunk|
       file.write(chunk)
     end   
  end                                                
end

知りたいこと

S3から画像を取得してくるところまでは出来ているため、今回の質問で知りたいのは
Webブラウザで表示できるようにレスポンスを作るには、どのようにすれば良いかということです。

方針等でも良いので、よろしくお願いいたします。

補足内容

• APIの作成にはRESTAPIを実現するためのGrapeというフレームワークを利用しています。
• WebブラウザはとりあえずSafariに表示してみようと思っています。

Answer 1

一番簡単なのは

1. Amazon S3 上で画像を参照できるように 静的ウェブサイトホスティング設定を行う
2. 画像 URL を取得し、 HTML の img 要素で出力する

だと思います。ただしアクセス権限の管理（認証中ユーザーにのみ表示させる、など）が不要な場合に限ります。

画像の URL はクライアントアプリだけで組み立てられるもの(つまり URL があらかじめわかっている）のであれば サーバーサイドへのリクエストは必要ないかも知れません。

サーバーサイドで URL を保有している場合は、クライアントアプリからサーバーサイドへ画像のURLを問い合わせ、レスポンスされた画像のURL を img 要素で出力します。商品の一覧ということなので、おそらくこの流れになると思います。

<img src="http://examplebucket.s3-website-us-east-1.amazonaws.com/photo.jpg" />

• [参考:Amazon S3 での静的ウェブサイトのホスティング](Amazon Simple Storage Service https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/WebsiteHosting.html)