cloudfront経由でs3とelbに接続する

clooudfront(CDN、content delivery network)を設定することにより、画像、webサイトへのアクセスをより高速化することができます。

[前回の構成](https://qiita.com/Yuuki46240345/items/0ee089a49325463cab5a)が作成されていることを前提として進めます。

### 構成図
緑色の部分を作成します。
![Untitled Diagram-Page-2 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528444/2d21894b-6ca4-5f09-7ea6-90459131e296.jpeg)



## 今回の流れ
1. s3を作成する
2. acmを再作成する
3. elbのacmを変更する
3. cloudfrontを作成する
4. route53を変更する


### S3の設定をする
1. awsコンソールからs3を検索して「バケットの作成」を選択
2. リージョン:**バージニア北部**、バケット名を一意な値に設定して「次へ」
![スクリーンショット 2020-10-17 10.01.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528444/27755ed9-01d6-d78b-f1a7-03f82e826a7e.png)
1. オプションの設定は特に変えずに次へ
3. アクセス許可の設定ではチェックを外してください。
![スクリーンショット 2020-10-17 9.59.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528444/a8de1541-66a9-6e3c-64ae-6a79eb5867ef.png)
4. 設定できれば完了です

### acmの証明書を再発行する
今回はクライアントとcloudfront間、cloudfrontとelb間の二つをhttps通信する必要があるのでacmを作り直します。
[取得したドメイン名]と[*.取得したドメイン名]の二つを登録してください。
![d719a6ae-898e-e527-a2b3-70d27a0ddd65.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528444/dcba2bb3-8a90-5cf5-22cd-3d1e8f75d5fd.png)

### elbのacmを変更する
1. awsマネージドコンソールから[ec2]を検索してロードバランサーのタブを選択してください。
2. 画像のようにリスナーの編集を押します
![スクリーンショット 2020-11-03 11.31.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528444/b63ec72a-9e4e-dd4e-d7ba-429fc56d1142.png)
3. acmの証明書を先ほど作成したものに変更して更新します
![スクリーンショット 2020-11-03 11.29.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528444/457a0ca1-0fca-f6a4-69cf-7a95d3c74cce.png)


### cloudfrontを作成する
1. awsマネージドコンソールから[cloudfront]を検索して[Create Distribution]を押下してください
2. webを選択して[Get Started]
3. 下の画像となるようにelb接続の設定をします。変更点のみ画像用意しました。あとはデフォルトのままで大丈夫です。<br>
**注意！**Original Domain Nameにはプルダウンにあるelbではなく、カスタムドメインネームを入力します。
![screencapture-console-aws-amazon-cloudfront-home-2020-11-03-10_38_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528444/4709e140-aa83-97c4-5c6a-bcc7d511f3c3.png)
![スクリーンショット 2020-11-03 11.22.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528444/3f4e416e-f33a-427c-d930-4a91b5b22e48.png)

1. 作成したcloudfrontを選択しs3の設定をします。画像のようにcreate originを選択
![スクリーンショット 2020-11-03 10.46.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528444/31c8c640-a208-afdb-6df9-e6022717bbb5.png)
1. Original Domain Nameをプルダウンから先ほど作成したS3に設定して[create]を押下
2. 今度は右タブにある[Behaviors]からcreate behaviorsを選択
![スクリーンショット 2020-11-03 10.52.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528444/337f49b3-e066-d309-4e71-bdab9ba202d6.png)
1. 画像のようにパターンとViewer Protocol Policyを変更したら「create」押下
![スクリーンショット 2020-11-03 10.55.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528444/b2298412-ec5e-cfee-9feb-619eae345fa5.png)


### route53を再設定する
1. awsマネージドコンソールから[route53]を検索し、作成したホストゾーンを選択
2. 下の画像のようにcloudfrontとelbのレコードを設定する
![スクリーンショット 2020-11-03 9.51.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528444/af59f4a3-6697-3755-a952-4deb43161058.png)

### webサーバーにアクセス試してみる
https://ドメイン名->webサイトを表示
http://ドメイン名->https://ドメイン名にリダイレクトされてからwebサイトを表示

### s3にアクセスしてみる
1. awsマネージドコンソールからs3を検索して作成したバケットを選択
2. アップロードからjpgファイルを選択してアップロード
![スクリーンショット 2020-11-03 11.49.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528444/e49253ec-21c4-36c8-3eef-806a3fb6401a.png)
1. アップロードした画像を選択し、「公開する」を押下
![スクリーンショット 2020-11-03 11.52.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528444/9672ed6c-911e-bfbe-0ee6-68d9f63af213.png)

https://ドメイン名/画像名.jpg->s3の画像を表示
http://ドメイン名/画像名.jpg->https://ドメイン名/画像名.jpgにリダイレクトされてからs3の画像を表示