画像ファイルをS3に保存できるようにしたい

[sugizakikun]

作業ブランチ

• https://github.com/sugizakikun/docker-laravel/pull/14
• https://github.com/sugizakikun/docker-laravel/pull/22

お世話になるであろう記事

基本実装

• LaravelでS3に画像アップロードする方法
• LaravelでAmazon S3にファイルをアップロードする【Larvel】【Amazon S3】

フロントエンド実装

• Bootstrapを使用したファイルアップロードボタンのデザインと最新機能（2024年版）

バックエンド実装

• Laravelでstorage配下の画像削除

何が幸せか

• webサーバーのストレージに影響を与えなくて済む。

• HTMLへのアクセスと画像へのアクセスを分けることができ、結果的に負荷を分散することができる。 -> もし、webサーバー上に画像が保存されていると、画像へのアクセスの際にwebサーバーにアクセスする必要があり、webサーバーの負荷が増えます。

[sugizakikun]

とりあえずWebサーバー上に画像を保存できるようになった。 一方成長。

[sugizakikun]

画像までのパスもstring型でDBに保存できるようになったぜ！

ProfileController.php

    public function update(Request $request, UpdateProfile $updateProfile)
    {
        // ディレクトリ名を任意の名前で設定します
        $dir = 'img';
        $path = $request->file('image')->store('public/' . $dir);

        $updateProfile->execute($path);

        // ページを更新します
        return redirect('/profile');
    }

UpdateProfile.php

class UpdateProfile
{
    public function execute(?string $path)
    {
        $user = Auth::user();

        $user->profile_image_key = $path;
        $user->save();
    }
}

[sugizakikun]

ただ画像が読み込めないので、下記の記事を参考にコマンドを打ち込む https://qiita.com/mako0104/items/69d25cb872868f3b210d

miki@naoki-osako-mac src % php artisan storage:link

   INFO  The [public/storage] link has been connected to [storage/app/public].

いや・・・アップロードした画像がS3に保存されて、保存されたやつを画面に読み込ませることが目標やから気にせんでいいか・・・

[sugizakikun]

疎通確認

    public function execute(?string $path)
    {

        $fileContents = Storage::get($path);

        Storage::disk('s3')->put('test.png', $fileContents);
        $path = Storage::disk('s3')->temporaryUrl('test.png', now()->addMinutes(5));

    }

上記のようにServiceクラスを直したらS3に画像がアップロードされたぴょん

[sugizakikun]

アクセス拒否されたんだよなぁ〜〜〜

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
 <Code>AccessDenied</Code>
 <Message>Access Denied</Message>
 <RequestId>YNP0GVC8M8JEGXE9</RequestId>

 <HostId>EHWLcPYxctNX69gq3ivwSHucr/+pOKKtxvuI9EpDcWPI/H7fJ6nJiHZgB+iFEii9DdPdSQFHPz4=</HostId>
</Error>

[sugizakikun]

にゃんこが表示された！！🐈

[sugizakikun]

とりあえず画像アップローダーは普段は表示させず、モーダルが起動した時にだけ表示させる方式で。

[sugizakikun]

結構GithubらしくなったのでいったんこのIsuueはCloseしまする。 パフォーマンス維持のためにも古い画像はS3から消すようにしました。