AWS S3 Laravel 画像ファイルアップロード時にエラーが発生する

# 目的

- 画像ファイルのアップロード時にpublic指定してアップロードしたところ

# 実施環境

- ハードウェア環境

| 項目 | 情報 |
| --- | --- |
| OS | macOS Catalina(10.15.5) |
| ハードウェア | MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) |
| プロセッサ | 2 GHz クアッドコアIntel Core i5 |
| メモリ | 32 GB 3733 MHz LPDDR4 |
| グラフィックス | Intel Iris Plus Graphics 1536 MB |

- ソフトウェア環境(AWS EC2 AmazonLinux2内に下記の環境を構築、構築方法はこちら→[AWS EC2 AmazonLinux2だけでLaravelのアプリをデプロイする](https://qiita.com/miriwo/items/b39d1ac6289c54cc2cfd))

| 項目 | 情報 | 備考 |
| --- | --- | --- |
| AWS EC2インスタンス | AmazonLinux2 | こちらの方法を用いてイメージからインスタンスを作成→[AWS EC2 をMacで使ってみよう!](https://qiita.com/miriwo/items/a1ab84c098008e43d042) |
| PHP | 7.4.5 | こちらの方法でインストール→[AWS EC2 AmazonLinux2 PHPをインストールする](https://qiita.com/miriwo/items/7d94303e7185e4118f52) |
| composer | 1.10.7 | こちらの方法でインストール→[AWS EC2 AmazonLinux2 composerをインストールする](https://qiita.com/miriwo/items/b25f9d4d74b7103f6ff6) |
| MySQL | 8.0.20 for Linux on x86_64	 | こちらの方法でインストール→[AWS EC2 AmazonLinux2 MySQLを使えるようにする](https://qiita.com/miriwo/items/c0ba0ff17c329700fc9e) 

# 問題までの経緯

1. 下記の方法にてS3に対する画像アップロード処理を実装した。
     - [AWS S3 Laravelアプリから画像ファイルをアップロードする](https://qiita.com/miriwo/items/7812851dfffadf4a0578)
1. 画像アップロード時の処理を下記の様に修正してpublic状態でアップロードできる様にした。
     - 修正前

         ```アプリ名ディレクトリ/app/Http/Controllers/ImageController.php
         Storage::disk('s3')->putFile('/test', $request->file('file'));
         ```
     - 修正後

         ```アプリ名ディレクトリ/app/Http/Controllers/ImageController.php
         Storage::disk('s3')->putFile('/test', $request->file('file'), 'public');
         ```
1. 処理の動作を確認するためブラウザから画像のアップロードを行った。

# 問題

- 下記エラーが発生する。

     ```text
     Error executing "PutObject" on "https://S3のバケットURL/test/8iPIwmDI2VX6qOZwUq9XCJSLPGxGox2kxpfcOAkT.png"; AWS HTTP error: Client error: `PUT https://S3のバケットURL/test/8iPIwmDI2VX6qOZwUq9XCJSLPGxGox2kxpfcOAkT.png` resulted in a `403 Forbidden` response: <?xml version="1.0" encoding="UTF-8"?> <Error><Code>AccessDenied</Code><Message>Access Denied</Message><RequestId>5D23B7 (truncated...) AccessDenied (client): Access Denied - <?xml version="1.0" encoding="UTF-8"?> <Error><Code>AccessDenied</Code><Message>Access Denied</Message><RequestId>5D23B7FF0F008DAE</RequestId><HostId>PETGLYLAydwTGLlN6wskfKQpjULz1bGIQqWZc12NaJvZfCN++WYmjIFJrVoA2V8LNUK+fQwwoJk=</HostId></Error>
    ```
- ブラウザでのエラー画面の表示を下記に記載する。

     ![🧨_Error_executing__PutObject__on__https___image-upload-miriwo_s3_ap-northeast-1_amazonaws_com_test_8iPIwmDI2VX6qOZwUq9XCJSLPGxGox2kxpfcOAkT_png___AWS_HTTP_error__Client_error__`PUT_https___image-upload-miriwo_s3_ap-northeast-1_amazonaws_co.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f014f679-8cba-e5d6-9731-5121cfb39e2d.png)


# 問題解決までの経緯

1. AWSのコンソールにログインしてS3のコンソールを開く。
1. アップロードを行うバケット名をクリックする。

     ![S3_Management_Console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f7665df7-14eb-ef12-a019-a5a172233b60.png)

1. 「アクセス権限」をクリックする。

     ![S3_Management_Console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/56c14174-86a7-25d7-64a2-b4a2283cc920.png)

1. 「パブリックアクセス」の「編集」をクリックする。

    ![S3_Management_Console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/4e5ddf4e-4204-14cd-5dd8-854faa2781a2.png)

1. 各チェックを外し「保存」をクリックする。

    ![S3_Management_Console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/130417dc-4b5f-e6a3-b81d-bda9a1d33dfb.png)

1. ブラウザから画像アップロードを実施したところエラーが解消され画像ファイルがアップロードされた。

# 参考文献

- [https://aws.amazon.com/jp/premiumsupport/knowledge-center/s3-troubleshoot-403/](https://aws.amazon.com/jp/premiumsupport/knowledge-center/s3-troubleshoot-403/)
- [https://aws.amazon.com/jp/premiumsupport/knowledge-center/s3-403-forbidden-error/](https://aws.amazon.com/jp/premiumsupport/knowledge-center/s3-403-forbidden-error/)