Laravel6 heroku Amazon AWS S3へ画像保存がされない。

Question

Laravel6で作成したアプリの画像保存にAmazon AWS S3を利用したいです。
AWS S3 アカウント作成　/ S3バケット作成 / 環境変数の設定
を行い、

コントローラーに下記を記載

  public function store(Request $request, Image $image, TwitterOAuth $twitter)
    {
        //AWS S3 保存処理
        $file = $request->file('file');
        $path = Storage::disk('s3')->putFile('/', $file, 'public');
        $image->image = $path;

        //ログインユーザーのIDを保存
        $image->user_id = auth()->user()->id;
        //タイトル保存処理
        $image->title = request('title');

        //コメント保存処理
        $image->comment = request('comment');

        $image->save();

    }

viewファイルは以下の様に書いています。

        <img src="{{ Storage::disk('s3')->url($image->image) }}" alt="投稿画像" style="height:300px;">

しかし、UPした画像がAWS S3に保存されません。
また、viewファイルのimgタグは

<img src="https://アプリ名.s3.ap-northeast-1.amazonaws.com/画像ファイル名.jpeg" alt="投稿画像" style="height: 300px;">

と出力されています。
画像ファイル名.jpegはなぜか、過去の投稿のファイル名が入っています。
laravel DBへの保存もされておりません。

試した事。
AWS S3の管理画面から画像をアップロードし、UPした画像のオブジェクト URLを　imgタグのsrc属性に代入してみるも、画像は表示されない。

Laravel Telescopeでログを確認すると、以下の様になっています。

POST /api/images status 500
GET /js/popper.js.map status 404
となっている事から投稿した画像が　AWS S3に届いていない。
AWS S3に画像が保存されていないのでGETされていない。
と認識しています。（ /js/popper.js.map　がなんなのかよくわかっていません。。。）

AWS　S3へ画像が保存できる様にするにはどうすればいいでしょうか？
また、AWS　S3へ保存した画像をlaravel側で呼び出すにはどうすればいいでしょうか？

Comments

[yu_1985]

Laravelのログは確認しましたか？

[Fukusuke0604]

コメントありがとうございます。
ログの確認方法で躓いていましたがLaravel Telescopeから、投稿の際のログを確認しました。
質問の本文に、ログの画像を追記しています。

POST /api/images status 500
GET /js/popper.js.map status 404
となっている事から投稿した画像が　AWS S3に届いていない。（保存されていない。）
AWS S3に画像が保存されていないのでGETされていない。
と認識しています。（ /js/popper.js.map　がなんなのかよくわかっていません。。。）

この場合、まずは保存の処理を見直す。という認識でいいでしょうか？

[yu_1985]

S3にアクセスするためには何らかのクレデンシャルが必要ですが、それは正しく設定していますか。

[Fukusuke0604]

AWS_ACCESS_KEY_ID=AWS 管理画面より取得したものを記載
AWS_SECRET_ACCESS_KEY=AWS 管理画面より取得したものを記載
AWS_DEFAULT_REGION=ap-northeast-1
AWS_BUCKET=バケット名

を.envに記載しております。
クレデンシャルというのは上記内容で間違い無いでしょうか？

これらはS3

[yu_1985]

.envは環境変数を設定するファイルであって、そこに設定するだけではダメです。
config/filesystems.phpはどう設定していますか？

[Fukusuke0604]

返信が遅くなりすみあません。
filesystems.phpにも以下の様に記載しております。

's3' => [
'driver' => 's3',
'key' => env('AWS_ACCESS_KEY_ID'),
'secret' => env('AWS_SECRET_ACCESS_KEY'),
'region' => env('AWS_DEFAULT_REGION'),
'bucket' => env('AWS_BUCKET'),
'url' => env('AWS_URL'),
],

[yu_1985]

環境変数にAWS_URLを設定していないにも関わらずurlにAWR_URLを渡そうとしているのが気になりますね。

また、S3にアップロードされているかどうかは実際にS3バケットの中身を確認してはどうでしょうか。

[Fukusuke0604]

コメントありがとうございます。
いろんな記事を見て混乱してしまったので、一旦バケットを削除し、以下の記事を参照し、再度バケットを作り直しました。
https://qiita.com/kouki_o9/items/dcc40b30924fd3b30787

しかし結果は変わらず画像が表示されず、実際にS3バケットの中身を確認しても何も保存されていません。

上記URLの記事には
/config/filesystems.phpを下記のように編集してください。となっており、その様に設定しました。

'cloud' => env('FILESYSTEM_CLOUD', 's3'),
's3' => [
'driver' => 's3',
'key' => env('AWS_ACCESS_KEY_ID'),
'secret' => env('AWS_SECRET_ACCESS_KEY'),
'region' => env('AWS_DEFAULT_REGION'),
'bucket' => env('AWS_BUCKET'),
'url' => env('AWS_URL'),
'endpoint' => env('AWS_ENDPOINT'),
],

.envファイルも記事を参照しました。設定は以下です。
AWS_ACCESS_KEY_ID='AWSで作成したS3用ユーザーのAccess key ID'
AWS_SECRET_ACCESS_KEY='AWSで作成したS3用ユーザーのSecret access key'
AWS_DEFAULT_REGION=ap-northeast-1(東京リージョンの場合)
AWS_BUCKET='作成したバケット名'

コントローラー側の保存処理は以下です。

use Illuminate\Support\Facades\Storage; //Storageクラス使用

public function store(Request $request, Image $image, TwitterOAuth $twitter)
{
/**
*
*Imageクラス、TwitterOAuthクラスはAppServiceProvider.phpに登録しています。
*
*/

//ログインユーザーのIDを保存
$image->user_id = auth()->user()->id;
//タイトル保存処理
$image->title = request('title');

//画像保存処理
$file_name = date('Ymd_His') . '_' . request()->canvas->getClientOriginalName();
request()->canvas->move('storage/images', $file_name);
$image->image = $file_name;

//AWS S3画像保存処理
// バケットへアップロード
$path = Storage::disk('s3')->putFile('/', $file_name, 'public');
// アップロードした画像のフルパスを取得
$image->path = Storage::disk('s3')->url($path);

//コメント保存処理
$image->comment = request('comment');

$image->save();
}

//AWS S3画像保存処理
// バケットへアップロード
$path = Storage::disk('s3')->putFile('/', $file_name, 'public');
// アップロードした画像のフルパスを取得
$image->path = Storage::disk('s3')->url($path);

store　functionに上記コードを追加したのですが、結果Laravelローカルストレージにも投稿が保存されなくなっています。
$path に Storage::disk('s3')->putFile('/', $file_name, 'public'); が代入されません。

view側の画像の呼び出しは以下の様に書いています。
<img src="{{ Storage::disk('s3')->url($image->path) }}" alt="投稿画像" style="height:300px;">

試したこと
// バケットへアップロードができていない。
アップロードができていないからviewへ画像が表示されない。

ということで、S3バケットの管理画面からファイルをアップロードして、オブジェクトの概要からオブジェクト URLをコピーして、viewファイルの画像の箇所に
<img src="オブジェクト URL" alt="投稿画像" style="height:300px;">
としてみても画像が表示されません。。。。

S3へ画像をアップロードできない。
S3管理画面から画像をアップロード。オブジェクト URLを　img src=""に渡しても何も表示されない。

現状はこの様になっているのですが、なぜS3へのアップロードも、S3からの取得もできないのか、、、、

[yu_1985]

'url' => env('AWS_URL'),
'endpoint' => env('AWS_ENDPOINT'),

これらは環境変数を設定していませんよね。
環境変数を適切に設定するか、これらを設定から削除したらどうなるでしょう。

あと、

> オブジェクト URLを　img src=""に渡しても何も表示されない。

これは該当のオブジェクトを公開していないからではないでしょうか。

いずれにせよ、まずはエラーログを出力してそれを見るべきです。

[Fukusuke0604]

コメントありがとうございます。

エラーログの確認の仕方が　telescopeからログを確認する方法が分からず、telescopeからのログを見ているのですが、

POST /api/images status 500
GET /show status 500

となっており、ウェブサーバー上でエラーが起きている。という事までしかわかりません。

laravel.logがstorage/logs/ 内に無く（gitにpushされてないのでcloneした際にlogsディレクトリの中が空になっているんだと思います。）laravel.logをstorage/logs/ 内に作成したのですが何も出力されていません。

今回のようなケースの時、どのようにログを確認すれば良いでしょうか?

Answer 1

コメント頂いていたログから確認していく。という方法では解決策を見つけ出すことはできませんでした。。。。

しかし、下記記事を参照に進めてAWS S3へ画像の保存できる様になりました。
https://qiita.com/nobu0717/items/51dfcecda90d3c5958b8

コメント頂いた方には本当にありがとうございました。