【AWS S3 Cloud Front】Laravel からS3に画像を保存する 

# 概要

S3バケットを作成し、Laravelから使えるようにするためのメモです


# 参考記事


[一番参考にした記事](https://kkznch.hatenablog.com/entry/2018/03/06/154554)
[Route53とCloudFrontとS3で静的コンテンツをホスティングするメモ] (https://qiita.com/buta/items/06a7e147d865fb862783)



## S3バケットの作成

AWSマネジメントコンソールからS3を開き、「バケットを作成する」を押す

![スクリーンショット (143)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/b545fb9d-57bd-08d7-0f8c-14c8eb8c199c.jpeg)

「バケット名」と「リージョン」のみ入力し次に進む


![スクリーンショット (146)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/d46d2bd9-e81c-d74b-f55c-28b87d858bee.jpeg)

「パブリックアクセスを全てブロック」にチェックを入れる

また、「システムのアクセス許可」を無効にしておきます

![スクリーンショット (147)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/907533ac-1ed1-0e76-3697-9b12ff42a7cf.jpeg)


設定の内容を確認して「バケットを作成」を押します

![スクリーンショット (148)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/dd7c6021-5f68-b614-e58d-20a5267e333c.jpeg)


![スクリーンショット (149)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/1043b172-cdc4-ef47-0bef-79beb41d6eae.jpeg)


これでS3バケットの作成が完了しました


## AWSのアクセスキーを準備する

※[こちらの記事](https://qiita.com/hamashin/items/364e8a16eda7f93cbd43)でIAMを使ったマネジメントコンソールへのアクセス制御を行っているのが前提です。


AWSのマネジメントコンソールのIAMを選択し以下の表示になったら

1 ユーザを選択
2 「認証情報」
3 「アクセスキーの作成」

の順に進むと以下の画面になる

![スクリーンショット (152)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/ab2ccac1-c270-d5a9-4ed2-37ba7158e020.jpeg)


**`csv`のダウンのロードを行っておく**

![スクリーンショット (151)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/3ebd55ca-30ae-1077-1567-309d536046e2.jpeg)




## S3とLaravelを結びつける

### `filesystem`を入れます

```
cd /var/www/{プロジェクト名} && composer require league/flysystem-aws-s3-v3
```

### `.env`を編集

以下を足します

```
AWS_ACCESS_KEY_ID={上で取得したアクセスキー}
AWS_SECRET_ACCESS_KEY={上で取得したシークレットアクセスキー}
AWS_DEFAULT_REGION=ap-northeast-1
AWS_BUCKET={上で作ったバケット名}
```

## 具体的な使い方

### 使いたいControler

使いたいコントローラに以下を足す

```

use Illuminate\Support\Facades\Storage;

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

// S3に格納する処理
public function store(Request $request) {

//リクエストから画像を受ける
$image = $request->file('image');

// 第一引数:保存場所(バケット内)のパス
// 第二引数:保存したい画像
// 第三引数: 外部からアクセスするのに必要らしい
Storage::disk('s3')->putFile('/',$image,'public');
}
```

AWS S3のバケット内を確認して画像が保存されていれば成功です

![スクリーンショット (153)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/585eaaa4-048d-1c82-1ccf-bff8b8dffc72.jpeg)


## CloudFront経由でのアクセス設定

マネジメントコンソールから「Cloud Front」を選択し以下の画面へ
`Create Distribution`を押下


![スクリーンショット (185)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/c3d8bd2a-cbed-daab-08a6-d064637a18aa.jpeg)

以下の画面でWEBの方の`Get Started`を押下

![スクリーンショット (186)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/521c73bd-0ba7-26b3-aec9-f1a88d52d02d.jpeg)

「Origin Domain Name」で上で作ったs3を選択し
それ以外はそのままで下にスクロールし、次に進みます

![スクリーンショット (187)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/2bd3c444-73c7-eb4c-9724-abca25749aac.jpeg)

画像では「status」が`In Progress`となっていますが、
`Deployed`となれば完了です

![スクリーンショット (188)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/58a98c6a-72b0-e27c-37ef-745dd91a6f36.jpeg)

## Cloud Front のサブドメイン設定

Route53 でs3(cloud front)用のサブドメインを設定します


**【前提】ドメインの設定は終わっている**

###cloud front 用SSL発行しなおす

![スクリーンショット (239)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/a74338e6-6c33-c95b-2572-3e7f3e7da6a2.jpeg)

![スクリーンショット (240)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/c4eb5f60-4007-593d-e53a-18ae5cbfb856.jpeg)

![スクリーンショット (242)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/8dfcf906-c83b-3d5d-9c86-72bc3acb41cd.jpeg)


![スクリーンショット (247)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/548b9a3e-ee66-b488-9463-6e43fbb24ead.jpeg)

そのまま右下の「確認」を押下

![スクリーンショット (213)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/1951a0b8-ac1d-a857-6db8-a4302079b132.jpeg)

右下の「確認とリクエスト」を押下

![スクリーンショット (214)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/1a3b9ca6-bc39-0ac0-5cb3-fd2efcfdc8f4.jpeg)

ドメインの「▶」押すと出てくる、「Route53でのレコードの作成」の青いボタンを押し、

その後「続行」を押下


![スクリーンショット (215)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/193e0edb-53f6-fd75-435a-25c062bedbb0.jpeg)

直後は画像のように検証保留中となっていますが、この部分が「発行済み」に変わると完了です

![スクリーンショット (217)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/51341f7f-04a6-dbb6-1cc1-e62b6d4bcafb.jpeg)


再びCloud Front の Distrubution のEditに戻ると`Custom SSL Certificate`が選択可能になっています。チェックを入れた後、先ほど取得したSSL証明書を選択し、編集を終了します。


![スクリーンショット (244)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/427232e9-4b1d-b98b-fa8e-0f646b63e1d0.jpeg)

その後、DistributionのDomain Nameをコピーしておきます

![スクリーンショット (241)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/90ef48e0-f872-b668-f472-db17710562e5.jpeg)




### Route53でサブドメイン設定 

Route53で既に作成してあるホストゾーンを選択し以下の画面に入り、

①「レコードセットの作成」を選択。
②右側に現れるフォームの「名前」の部分でサブドメインを設定し、値にコピーしたDomain Nameをペーストする。タイプを「CNAME - 正規名」を選択
③作成ボタンを押す

これで、今設定した`サブドメイン/ファイルパス`で画像にアクセスすることができます

![スクリーンショット (249)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508788/ef47b486-c796-6566-4a79-98daa7426713.jpeg)