AWS S3にアップロードした画像を表示したい

Question

動画投稿機能をつけた簡易的なSNSサイトを作成中です。
先日herokuで公開したのですが、投稿画像やプロフィール画像を表示することができなかったため、
Amazon S3にて画像を管理しようと考えました。
Amazon S3に画像をアップロードするところまでは行きましたがその後viewでの表示がうまく行きません。
画像を表示するにはどのようにすればいいでしょうか？
コントローラー

コード
public function store(Request $request)
    {
        //バリデーション
        $validator = Validator::make($request->all() , ['caption' => 'required|max:255', ]);

        //エラーの場合
        if ($validator->fails())
        {
            return redirect()->back()->withErrors($validator->errors())->withInput();
        }

        // Postモデル作成
        $post = new Post;
        $post->caption = $request->caption;
        $post->user_id = Auth::user()->id;

        $post->save();
        
        if($request->photo == null){
            return redirect('/');
        }
        
      
        //$request->photo->storeAs('public/post_images', $post->id . '.jpg');
        $request->photo->storeAs('public/post_images', $post->id . '.jpg',  ['disk' => 's3']);
    
        
        return redirect('/');
    }

view

 <div class="card">
        <div class="card-header align-items-center d-flex">
          <a class="no-text-decoration" href="/users/{{ $post->user->id }}">
            @if ($post->user->profile_photo)
                <img class="post-profile-icon round-img" src="{{ asset('storage/user_images/' . $post->user->profile_photo) }}"/>
            @else
                <img class="post-profile-icon round-img" src="{{ asset('/images/blank_profile.png') }}"/>
            @endif
          </a>
          <a class="black-color no-text-decoration" title="{{ $post->user->name }}" href="/users/{{ $post->user->id }}">
            <strong>{{ $post->user->name }}</strong>
          </a>
          @if ($post->user->id == Auth::user()->id)
          	<a class="ml-auto mx-0 my-auto" rel="nofollow" href="/postsdelete/{{ $post->id }}">
              <div class="delete-post-icon">
              </div>
          	</a>
          @endif
        </div>
         <span style=" margin-left: 10px; margin-top: 10px; margin-right: 10px; margin-bottom: 5px;">{{ $post->caption }}</span>
         //画像表示
        <a href="/users/{{ $post->user->id }}">
          <img src="/storage/post_images/{{ $post->id }}.jpg" class="card-img-top" alt="" />
        </a>

public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('caption');
            $table->integer('user_id');
            $table->timestamps();
        });
    }

どうかご教授いただければと思います。よろしくお願いいたします。

Comments

[Lulucom]

Amazon S3 コンソールでそのバケットの中を確認するとpublic/post_images/の中に該当ファイルは存在していますか？

[takamori]

返信ありがとうございます！
もう一度post_imagesの中をみましたが保存はされているようでした。
post_imagesの中の画像を追加しました

[Lulucom]

public/post_images ではなく post_images ということでしょうか？

[takamori]

回答ありがとうございます
すみません、public/post_imagesで間違い無いです

Answer 1

バケット内の public/post_images/ に保存されているのでしたら、以下のように URL を取得できないでしょうか。

  <img src="{{ Storage::disk('s3')->url("public/post_images/{$post->id}.jpg") }}" class="card-img-top" alt="" />

（追記）ファイルのURLへのアクセスが拒否される場合は、ファイル視認性を設定する。

PostController@store

$request->photo->storeAs('public/post_images', $post->id . '.jpg', ['disk' => 's3', 'visibility' => 'public']);
// あるいは
$request->photo->storePubliclyAs('public/post_images', $post->id . '.jpg', ['disk' => 's3']);

Comments

[takamori]

回答ありがとうございます
教えていただいたコードと入れ替えてみたのですが、

syntax error, unexpected '}', expecting ',' or ')'
上記のエラーが出てしまいました。どのように直せば良いでしょうか？

[Lulucom]

ごめんなさい修正しました。

[takamori]

回答ありがとうございます
syntax errorはなくなりましたが画像は表示されないままでした

[Lulucom]

表示されない画像のURLをHTMLソースで確認できると思います。
Amazon S3 コンソールで確認できる該当ファイルのオブジェクトURLと比べると違っていますか？

[takamori]

返信ありがとうございます
https://s3.console.aws.amazon.com/s3/buckets/バケット名/public/post_images/?region=ap-northeast-1
urlはこんな感じです

[Lulucom]

それは質問に添付された画面（Amazon S3 コンソール）のURLのようですね。それではなく、その画面に表示されている該当ファイル名をクリックすると、該当ファイルの詳細ページを見れると思います。その詳細ページで表示されている「オブジェクトURL」のことです。
また、画像が表示されないページのHTMLソースを見ることはできますか？問題となっているimgタグのsrc属性はどのようなURLになっているでしょうか。
これらのURLが一致していれば画像は表示されると思うのですが...。

[takamori]

返信ありがとうございます
https://バケット名.s3-ap-northeast-1.amazonaws.com/public/post_images/3.jpg
このようになっていました。
一致しているように見えます

[Lulucom]

そのURLにブラウザからアクセスすると画像は表示されますか？

[takamori]

返信ありがとうございます
アクセスしようとすると以下のエラーが出ました
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>E4A2AA86155D7D45</RequestId>
<HostId>
mt8OPc5UYJB0a6pReIvoAFbmvhvyoRVYS5IUhoWNhQ/X2P4WZybMrUC9vR7JArq/p8GgPm9o66M=
</HostId>
</Error>

バケットやアカウントのアクセスブロック設定は全てオフにしています

[Lulucom]

PostController@storeの中でファイルを保存する部分を以下のようにするとどうでしょうか。
$request->photo->storeAs('public/post_images', $post->id . '.jpg', ['disk' => 's3', 'visibility' => 'public']);
あるいは、
$request->photo->storePubliclyAs('public/post_images', $post->id . '.jpg', ['disk' => 's3']);

新たに保存されたファイルは見れるようになるでしょうか。

[takamori]

返信ありがとうございます
教えていただいた通りに@storeのファイルを保存する記述を変更したら画像を表示できるようになりました！
visibility' => 'public'の記述はどのユーザーからもアクセス可能にするという意味でしょうか？

[Lulucom]

はい、ドキュメントで以下のように書かれていました。
> ファイルをpublicとして宣言するのは、他からのアクセスを全般的に許可することを表明することです。
https://readouble.com/laravel/5.5/ja/filesystem.html#file-visibility

回答も追記しておきます。

[takamori]

すごく助かりました！

最後まで丁寧に教えていただきありがとうございました！