質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Laravel 6

Laravel 6は、オープンソースなPHPのフレームワーク。Webアプリケーションの開発に適しており、バージョン6はLTSです。5.8での向上に加えて、セマンティックバージョニングの採用やLaravel Vaporとのコンパチビリティなどが変更されています。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

解決済

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

tkm0604
tkm0604

総合スコア345

Laravel 6

Laravel 6は、オープンソースなPHPのフレームワーク。Webアプリケーションの開発に適しており、バージョン6はLTSです。5.8での向上に加えて、セマンティックバージョニングの採用やLaravel Vaporとのコンパチビリティなどが変更されています。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

1回答

0評価

0クリップ

197閲覧

投稿2022/04/20 09:00

編集2022/05/13 19:23

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

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

PHP

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ファイルは以下の様に書いています。

PHP

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

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

HTML

<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側で呼び出すにはどうすればいいでしょうか?

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

yu_1985

2022/04/20 09:34

Laravelのログは確認しましたか?
tkm0604

2022/04/22 07:31 編集

コメントありがとうございます。 ログの確認方法で躓いていましたが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

2022/04/22 09:08

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

2022/04/22 09:53

AWS_ACCESS_KEY_ID=AWS 管理画面より取得したものを記載 AWS_SECRET_ACCESS_KEY=AWS 管理画面より取得したものを記載 AWS_DEFAULT_REGION=ap-northeast-1 AWS_BUCKET=バケット名 を.envに記載しております。 クレデンシャルというのは上記内容で間違い無いでしょうか? これらはS3
yu_1985

2022/04/22 10:03

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

2022/04/24 08:26

返信が遅くなりすみあません。 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

2022/04/25 06:20

環境変数にAWS_URLを設定していないにも関わらずurlにAWR_URLを渡そうとしているのが気になりますね。 また、S3にアップロードされているかどうかは実際にS3バケットの中身を確認してはどうでしょうか。
tkm0604

2022/04/25 10:25 編集

コメントありがとうございます。 いろんな記事を見て混乱してしまったので、一旦バケットを削除し、以下の記事を参照し、再度バケットを作り直しました。 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

2022/04/25 13:23

'url' => env('AWS_URL'), 'endpoint' => env('AWS_ENDPOINT'), これらは環境変数を設定していませんよね。 環境変数を適切に設定するか、これらを設定から削除したらどうなるでしょう。 あと、 > オブジェクト URLを img src=""に渡しても何も表示されない。 これは該当のオブジェクトを公開していないからではないでしょうか。 いずれにせよ、まずはエラーログを出力してそれを見るべきです。
tkm0604

2022/04/26 06:41

コメントありがとうございます。 エラーログの確認の仕方が telescopeからログを確認する方法が分からず、telescopeからのログを見ているのですが、 POST /api/images status 500 GET /show status 500 となっており、ウェブサーバー上でエラーが起きている。という事までしかわかりません。 laravel.logがstorage/logs/ 内に無く(gitにpushされてないのでcloneした際にlogsディレクトリの中が空になっているんだと思います。)laravel.logをstorage/logs/ 内に作成したのですが何も出力されていません。 今回のようなケースの時、どのようにログを確認すれば良いでしょうか?

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Laravel 6

Laravel 6は、オープンソースなPHPのフレームワーク。Webアプリケーションの開発に適しており、バージョン6はLTSです。5.8での向上に加えて、セマンティックバージョニングの採用やLaravel Vaporとのコンパチビリティなどが変更されています。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。