S3静的ウェブサイトをCloudFrontで高速化、HTTPS化

# はじめに
前回S3を使用して静的ウェヴサイトをホスティングできたので、今回はCloudFrontというCDNサービスを使って、配信の高速化、HTTPS化していきたいと思います。

# 前提
S3に静的ウェブサイトをホスティング済であること。
ここまでは前回の記事参照
[S3で静的ウェブサイトをホスティングする](https://qiita.com/koyama_0122/items/33b95558bbeab22b7666)

# CloudFrontを使用する目的
・　静的コンテンツをキャッシュし、オリジンサーバーの代わりに配信することによって高速化する。
・　S3のみの配信である場合は、URLがHTTPで始まるウェブサイトになっているため、通信を暗号化できていない。
　（HTTPSで始まるウェブサイトにする。）

# 手順
### 1. CloudFrontディストリビューションの作成
#### ① CloudFrontの画面で「CloudFrontディストリビューションを作成」をクリック
![スクリーンショット (31)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/f93b2d69-4088-42db-4523-c309b3ce5038.jpeg)

#### ② ディストリビューションの設定
![スクリーンショット (32)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/a286c9c5-3dbe-0b63-c715-57e50e3243a5.jpeg)
オリジンドメインをクリックすると、S3のバケット名が出てくるので、選択。

![スクリーンショット (33)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/e344fac9-f4ef-85f2-c5d7-e1222deb9877.jpeg)
S3のバケットを選択すると「名前」の欄は自動で埋まります。

![スクリーンショット (34)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/525b2657-4538-6bd8-2138-6baae9faa2d0.jpeg)
「S3バケットアクセス」と「バケットポリシー」はどちらも「はい」を選択。
「S3バケットアクセス」で「はい」を選択すると、「新しいOAIを作成」が出てくるのでクリック。
![スクリーンショット (36)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/9ec00627-6b77-22f1-c713-c0662d980bc4.jpeg)
オリジンアクセスアイデンティティは任意の名前で作成。

![スクリーンショット (35)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/5f89f535-3d8d-901b-4c00-9492c9c5080c.jpeg)
「ビューワー」の「ビューワープロトコルポリシー」で「Redirect HTTP to HTTPS」を選択。

![スクリーンショット (37)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/3b7fc004-4a64-52a6-179d-7dc439a7a5c3.jpeg)
「デフォルトルートオブジェクト‐オプション」にS3バケット内の、最初に表示させるhtmlファイル名を入力。

全て設定したら、「ディストリビューションを作成」をクリック。

![スクリーンショット (38).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/e31011de-bef5-f6e7-b2cc-2319aad231ef.png)
ディストリビューションが作成されました。

### 2. ウェブサイトの表示
![スクリーンショット (39)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/ea10b703-80ca-c35a-b644-e2afa0baa695.jpeg)
ディストリビューションを作成し終えたら、CloudFrontの画面で今作ったディストリビューションのステータスが「有効」になていることを確認し、ドメイン名をコピーします。
このドメイン名を使ってブラウザで開くと
![スクリーンショット (41).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/29ad1e66-6ef7-3a9a-11ff-5908eb9108a3.png)
Hello AWSが表示されました。

### 3. S3のバケットポリシーの変更
今の状態だと、CloudFrontディストリビューションのドメイン名、S3バケットのエンドポイントどちらからもサイトが表示される状態になっているので、エンドポイントからの配信を制限するため、S3のバケットポリシーを変更します。
まず、S3の「アクセス許可」を開きます。
![スクリーンショット (43)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/33837435-f87f-94b3-7da3-90ed5b549bf6.jpeg)
アクセスがパブリックな状態になっています。
なので、バケットポリシーを編集します。
![スクリーンショット (45)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/aca0ea46-9cbe-ff52-14f5-3fb92a209d6a.jpeg)
赤枠がCloudFrontを構築したときにできた新しいポリシーで、青枠が既存のポリシーです。
なので、青枠の
```
      {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::hello-aws-site/*"
      },
```
を削除します。
よって、新しいバケットポリシーは
```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "2",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E3JM1W7B4NZDRS"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::hello-aws-site/*"
        }
    ]
}
```
となります。
バケットポリシーを変更することによって、
![スクリーンショット (46)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/9cccc021-7e5e-040e-264f-108f161466b9.jpeg)
パブリックマークが消えます。

### 4. パブリックアクセスの設定変更
![スクリーンショット (50)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/d6d3a82f-436a-468b-6c31-2dbdb5408bc6.jpeg)
ブロックパブリックアクセス（バケット設定）の「編集」をクリック

![スクリーンショット (48)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/18b5e1ed-7568-9265-70f7-bbb6248c5ea7.jpeg)
「パブリックアクセスをすべてブロック」にチェック
「変更の保存」をクリック

### 5. 動作確認
##### ①　バケットウェブサイトエンドポイントからアクセスした場合
![スクリーンショット (47).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/1a17512b-cc99-4217-6f56-1571db878ec2.png)

##### ②　CloudFrontディストリビューションのドメイン名からアクセスした場合
![スクリーンショット (41).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2222596/019c7e63-c5f4-77cd-5a30-b9c910fa128b.png)

無事確認できました。

以上になります。