LaravelでAWS S3に画像をアップロードできない

Question

前提・実現したいこと

Laravelで作成したアプリをHerokでデプロイしました。
AWS S3を使って画像をアップロードしたいのですが以下のようなエラーメッセージが表示されててしまいました。

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

Error executing "PutObject" on "https://takamasa.s3.amazonaws.com/lx8HW80N1V0FbV801PnRXctT2MK5G88OqOSKfqKN.png"; AWS HTTP error: Client error: `PUT https://takamasa.s3.amazonaws.com/lx8HW80N1V0FbV801PnRXctT2MK5G88OqOSKfqKN.png` resulted in a `400 Bad Request` response: <?xml version="1.0" encoding="UTF-8"?> <Error><Code>AuthorizationHeaderMalformed</Code><Message>The authorization header (truncated...) AuthorizationHeaderMalformed (client): The authorization header is malformed; the region 'us-east-1' is wrong; expecting 'us-east-2' - <?xml version="1.0" encoding="UTF-8"?> <Error><Code>AuthorizationHeaderMalformed</Code><Message>The authorization header is malformed; the region 'us-east-1' is wrong; expecting 'us-east-2'</Message><Region>us-east-2</Region><RequestId>28A0EBC02DEFF677</RequestId><HostId>1iU1JU6i14aQb01ldgyssDyUZltwmOtLbjgFhIQNXUmeETIDmINew6ldwtcHXAxkjyW2yPOr7oM=</HostId></Error>

該当のソースコード

上から順に、コントローラー、写真を投稿するフォーム、投稿した写真を表示するページのコードとなっております。

app/Http/Controllers/StoriesController.php

<?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('/');
  }  
}

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

試したこと

$ php artisan cache:clear
$ php artisan route:clear
$ php artisan config:clear

上記のコマンドを試したのですが変化が見られませんでした。
まだ初心者で至らぬところは多々あるかとは思いますが、力をお貸しいただければ幸いです。
よろしくお願い致します。

補足情報（FW/ツールのバージョンなど）

MacOS Catalina 10.15.4
Docker for Mac version 2.2.0.5
PHP 7.3.11
Composer 1.9.1
heroku/7.39.2 darwin-x64 node-v12.13.0

Answer 1

環境変数でS3バケットのリージョン名の指定は正しいでしょうか。

エラーで the region 'us-east-1' is wrong; expecting 'us-east-2' となっているので、us-east-2が正しいのではないかと思いました。

Comments

[helloo]

回答ありがとうございます。
ご指摘いただいた通り`region`を`us-east-2`に修正したところエラーメッセージは表示されなくなりました。
しかし、いざ画像を投稿を試みると指定したページにリダイレクトするだけで画像が投稿されません。
新しく質問を作成した方がよろしいでしょうか…？
お手数かけますが、返信いただけると幸いです。
よろしくお願いします。

[Lulucom]

> 画像が投稿されません
Amazon S3 コンソールでそのバケットを確認しても無いということでしょうか。

[helloo]

説明不足で申し訳ありません。
はい、S3のバケット内にはあるのですが、ページに表示されないと言う現象が起こっております。

[Lulucom]

表示に問題があるということなんですね。
Attachmentモデルに対応するテーブルはattachmentsでしょうか？該当のレコードのpathカラムには画像のパスは入っていますか？

[helloo]

はい。
Attachmentモデルに対応しているテーブルはおっしゃる通りattachmentsとなっております。
確認したところ、データベースは何も変化がありませんでした。
画像が投稿されていないことと同じ状況になっています。

[Lulucom]

問題なのはstoreアクションの方でしょうか？
（uploadアクションはもし無関係なのでしたら掲載されない方が良いかなと思いました）

次の部分でS3に保存されていると思います。
　$path = Storage::disk('s3')->putFile('/',$form,'public');

その$pathを以下の部分でAttachmentのためにセットする必要があるのではないでしょうか。
　$attachment_data = [
　　'path' => $path, // ← ここ
　　'name' => $filename
　];

[helloo]

ありがとうございます。
ご指摘して頂いたように、uploadアクションの削除、` 'path' => $path `
のように変更いたしましたが、再度画像を投稿するとS3には追加され、データベース側には変化なし。という状況に変わりはありませんでした。
お手数かけますがよろしくお願いします。

[Lulucom]

storeアクションのコードがよくわからないのですが、
　foreach ($data['images'] as $k => $v) {
のループ内が処理されていないのではないでしょうか。

[helloo]

申し訳ございません。そちらの関数は以下のサイトを参考に自分なりに作成したものとなります…。
https://liberty-dock.com/business_post/53069/

[Lulucom]

参考サイトは複数ファイルのアップロードの例ですが、今回は1ファイルのみではないでしょうか。1ファイルのみの例を参考にされると良いかと思います。

[helloo]

一応複数のファイルをアップロードが可能なアプリを作成し、画像をローカルに保存していた時はこのコードでも正常に機能していました…。

[Lulucom]

そうですか...
掲載のコードは、1ファイル向けのコードと複数ファイル向けのコードが混在していて、storeアクションはうまく動かない気がしているのですが...

[helloo]

はい…。
まだその見分けもつかないような初学者で申し訳ありません…。