AWS S3内の写真がLaravelのアプリ上で表示されません。

Question

前提・実現したいこと

**前提：**Laravelで作成したアプリをHerokuにデプロイしました。
**実現したいこと：**AWS S3のバケット内にある写真をアプリ上で表示したい。

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

特にこれといったエラーメッセージはありません。
写真を投稿すると指定のページへリダイレクトしてしまいアプリ上では投稿した画像が表示されません。
S3のバケット内には投稿した写真が存在します。

該当のソースコード

routes/web.php

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('login'); 

Route::group(['middleware' => 'auth'], function(){
    Route::get('/', 'StoriesController@index');
    Route::post('/', 'StoriesController@store');
});

Route::group(['middleware' => 'auth'], function(){
    Route::get('stories/create', 'StoriesController@add');
    Route::post('stories/create', 'StoriesController@upload');
    Route::get('/stories/delete', 'StoriesController@delete');
});

Route::get('/profile/delete', 'ProfileController@delete');

Route::group(['middleware' => 'auth','name'=>'profile'], function () {
    Route::get('/profile/edit', 'ProfileController@edit');
    Route::post('/profile/edit', 'ProfileController@update');
    Route::post('/profile/create', 'ProfileController@create');
    Route::get('profile/create3', 'ProfileController@index3');
});

Route::get('/home', 'StoriesController@index')->name('home');

Auth::routes();

app/Http/Controller/StoriesController.php※写真を投稿するアクションはstoreアクションです。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Story;
use App\Profile;
use Auth;
use App\Posts;
use App\History;
use App\Attachment;
use Carbon\Carbon;
use Storage;

class StoriesController extends Controller
{

  public function __construct()
    {
      $this->middleware('auth');
    }

  public function index(Request $request)
      {
        $images = Attachment::all();
        $cond_title = $request->cond_title;
      if ($cond_title != '') {
          $posts = Profile::where('title', $cond_title)->get();
      } else {
          $posts = Profile::all();
      }
         return view('stories.index2', compact('images','posts','cond_title'));
      }

  public function add()
    {
      return view('stories.create2');
    }

  public function store(Request $request)
  {
    $form = $request->file('images');
    $d = new \DateTime();
    $d->setTimeZone(new \DateTimeZone('Asia/Tokyo'));
    $dir = $d->format('Y/m');
    $path = Storage::disk('s3')->putFile('/',$form,'public');
    $data = $request->except('_token');

    foreach ($data['images'] as $k => $v) {

      $filename = '';

      $attachments = Attachment::take(1)->orderBy('id', 'desc')->get();

      foreach ($attachments as $attachment) {
        $filename = $attachment->id + 1 . '_' . $v->getClientOriginalName();
      }
      unset($attachment);

      if ($filename == false) {
        $filename = 1 . '_' . $v->getClientOriginalName();
      }
      $v->storeAs($path, $filename);

      $attachment_data = [
        'path' => $path,
        'name' => $filename
      ];   
      
      $a = new Attachment();
      $a->fill($attachment_data)->save();
    }
    unset($k, $v);
    return redirect('/');
  }

public function delete(Request $request)
  {
      $images = Attachment::find($request->id);
      $images->delete();
      return redirect('/');
  }  

  // public function upload(Request $request)
  //   {
  //     $this->validate($request, [
  //       'file' => [
  //         'required',
  //         'file',
  //         'image',
  //         'mimes:jpeg,png',
  //       ]
  //     ]);

  //     if ($request->file('images')->isValid([])) {
  //       $path = Storage::disk('s3')->putFile('/',$form,'public');
  //       return view('stories.index2')->with('filename', basename($path));
  //     } else {
  //       return redirect('/')
  //         ->back()
  //         ->withInput()
  //         ->withErrors();
  //     }
  //   }
}

resources/views/stories/create2.blade.php※写真を投稿するページ

@extends('layouts.front2')
@section('title','StoryCreate')

@section('content')
<link href="{{ asset('/css/main22.css' )}}" rel="stylesheet">

<div class="poststory">
    <h1>Post Story</h1>
</div>
@if ($errors->any())
<ul>
    @foreach($errors->all() as $error)
    <li>{{ $error }}</li>
    @endforeach
</ul>
@endif
<form action="{{ url('/') }}" method="POST" enctype="multipart/form-data">
    
    <div class="form">
        <label for="photo" class="file">Choose Image or Video</label>
        <div class="post">
            <input type="file" class="here" name="images">
            
        </div>
    </div>
    <br>
    </div>

    {{ csrf_field() }}
    <div class="post">
        <div class="btn postbtn">
            <input type="submit" value="post" />
        </div>
    </div>
</form>

@endsection

resources/views/stories/index2.blade.php※投稿した写真を表示したいページ

@extends('layouts.front2')
@section('title','mainpage')

@section('content')

<link rel="stylesheet" href="{{ asset('css/main2.css') }}">

<div class="profile">
    <div class="name">
        @guest
        <a class="nav-link2" href="{{ route('register')}}">{{ __('Create Accout!')}}</a>
        @else
        <a id="navbarDropdown" class="nav-link2" href="#" role="button">
            {{ Auth::user()->name }}<span class="caret"></span></a>
        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
            @csrf
        </form>
        @endguest
    </div>

<div class="aboutme">
  <tbody>
    @foreach($posts as $profile)
        <tr>
            <td>{{ \Str::limit($profile->title, 100) }}</td>
            <td>{{ \Str::limit($profile->body, 250) }}</td>
        </tr>
        <a href="{{ action('ProfileController@delete', ['id' => $profile->id]) }}">delete</a>
        <a href="{{ action('ProfileController@update', ['id' => $profile->id]) }}" class="update">update</a>
    @endforeach
</tbody>
<br>
</div>
</div>

<div class="new">
    <div class="newtitle">
        <h1>New</h1>
    </div>
    <div class="container1">
        @foreach ($images as $image)
        <img src="{{ $image->path }}" class="images" style="height: 250px; width: 250px; border-radius: 50%;">
       <a href="{{ action('StoriesController@delete', ['id' => $image->id]) }}">delete</a>
        @endforeach
    <div class="more">
            more...
    </div>
    </div>
</div>


{{ csrf_field() }}
@endsection

試したこと

必要な環境変数の設定。

初心者で至らぬ点は多々あるかとは思いますが、ご教授いただけると幸いです。
何卒よろしくお願いします。

Answer 1

bucketの設定が「公開」になっているかも確認すべきポイントかと思います。

Comments

[helloo]

回答ありがとうございます。
S3を確認したところアクセスの箇所に”オブジェクトは公開できます”とありました。
またバケット内にある画像を公開しても変化は見受けられませんでした…。

Answer 2

 <img src="{{ $image->path }}" 

ここで $image->path が src に書かれるわけなので、この結果は「S3 のバケットの中のパス」となっていなければなりません。
S3 にアクセスしてオブジェクトの概要を見ると、オブジェクトURL が出ますが、それと同じになってますか？

Comments

[helloo]

回答ありがとうございます。
写真を投稿すると、投稿した画像のimg要素が表示されないので、srcにS3のバケットの中のパスになっているのか確認できないのですが、このような場合はどのように対処すればよろしいでしょうか。
返信いただけると幸いです。
よろしくお願いします。

[tacsheaven]

表示しているブラウザで、「ソースを表示」とか、あるいは開発ツールで見るとかすれば、img 要素のソース部分が見えるはずですよ。

[helloo]

返信ありがとうございます。
開発ツールは掲載したコードの通りなのですが、ブラウザ上で写真を投稿しソースを表示するとimg要素が存在していない状況です。
よろしくお願いします。

[tacsheaven]

とすると、$images が空、ということでしょうから、そこを確認しましょう。

[helloo]

確認してみます。ありがとうございます。