【Route 53】CloudFront の静的なウェブサイトにドメイン使用してみた

# 背景・目的
[Amazon Route53 でドメインを登録してみた](https://qiita.com/zumax/items/154243d4cb0eaa255032)や、[【Route 53】S3バケットの静的なウェブサイトにドメインを使用してみた](https://qiita.com/zumax/items/f09349191cf16f8cfeb5)では、DNSレコードの作成〜静的ウェブサイトを作成までを、Route 53を使って試しました。

今回は、CloudFrontでRoute 53を設定してみます。

# まとめ
今回、下記のような環境を構築します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/37d5ec81-f7c4-75e7-62f1-b453f2e5747c.png)


# 概要
## パブリック証明書
> Amazon CloudFront ディストリビューションがビューワー CloudFront が HTTPS を使用するように を設定して、 がビューワーと CloudFront 通信するときに接続が暗号化されるようにするには、パブリック証明書が必要です。

- ビューワーとCloudFrontディストリビューションがHTTPSを使用して通信するには、パブリック証明書が必要

## ACMの料金
https://aws.amazon.com/jp/certificate-manager/pricing/

> AWS Certificate Manager でプロビジョニングされたパブリック SSL/TLS 証明書は無料です。お支払いいただくのは、アプリケーションを実行するために作成した AWS リソースの料金のみです。
ACM を介して AWS Private Certificate Authority (CA) を管理する場合は、AWS Private CA の料金ページで詳細と例をご覧ください。

- パブリック証明書は無料
- プライベートCAは別途かかる

# 実践
[Amazon CloudFront ディストリビューションを使用して静的ウェブサイトを提供する](https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/getting-started-cloudfront-overview.html)を基に試してみます。

## ステップ 1: ドメインを作成する

[Amazon Route 53](https://qiita.com/zumax/items/154243d4cb0eaa255032#%E5%AE%9F%E8%B7%B5) でドメインを登録してみたで作成したドメインを使用します。

## ステップ 2: パブリック証明書のリクエスト
1. AWSにサインインします
1. AWS Certificate Manager (ACM)に移動します
1. リージョンは、バージニアに移動します。（CloudFrontは、グローバルサービスのため）
1. ナビゲーションペインで「証明書をリクエスト」をクリックします
1. 証明書タイプでは、「パブリック証明書をリクエスト」を選択し、「次へ」をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/33ac56cc-e586-99e8-5799-f14929e2c1ef.png)
1. 完全修飾ドメイン名を入力します
1. 「この証明書に別の名前を追加」をクリックし、ドメイン名の前にアスタリスクを入力し、すべてのサブドメインに対してワイルドカード証明書を要求します
1. 下記を入力し、「リクエスト」をクリックします
    - 検証方法：DNS検証
    - キーアルゴリズム：RSA 2048
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/2ac14aa4-fc3c-2018-2326-8d6b65a7f695.png)
1. 作成直後は、ステータスは、「保留中の検証」になります
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/3d2bf3a3-3ea5-c193-3deb-827af119f918.png)
1. 証明書IDをクリックします
1. ドメインで「Route 53でレコードを作成」をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/ddbd655c-4123-91dd-e380-4412785c4f43.png)
1. Route 53でDNSレコードを作成で、「レコードを作成」をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/48aa919e-bf1a-9e04-1e94-caa7f9fbbea6.png)

1. 証明書のステータスが、「発行済み」になりました！
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/8919e829-1cf2-7e12-e9db-62b2240379ad.png)

## ステップ 3: サブドメインをホストする S3 バケットを作成する
1. S3に移動します
1. サブドメイン用のバケットを作成します。※ ドメイン名の前に、プレフィックスを付けます

## ステップ 4: ルートドメイン用の別の S3 バケットを作成する
1. S3に移動します
1.ルートドメイン用のバケットを作成します。

## ステップ 5: ウェブサイトファイルをサブドメインバケットにアップロードする
1. S3に移動します
1. ステップ3で、作成したサブドメイン用のバケットを選択します
1. 下記のファイル(index.html)をアップロードします
    ```
    <html>
    <head>
    <title>Amazon Route 53 Getting Started</title>
    </head>
    
    <body>
    
    <h1>Routing Internet traffic to Cloudfront distributions for your website stored in an S3 bucket</h1>
    
    <p>For more information, see
    <a href="https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/getting-started.html">Getting Started with Amazon Route 53</a>
    in the <emphasis>Amazon Route 53 Developer Guide</emphasis>.</p>
    
    </body>
    
    </html>
    ```
## ステップ 6: ウェブサイトリダイレクト用にルートドメインのバケットを設定する
:::note info
ルートドメイン→サブドメインにリダイレクトさせます
:::

1. S3に移動します
1. ステップ4で作成した、ルートドメインのS3を選択します
1. 「プロパティ」タブをクリックします
1. 静的ウェブサイトホスティングで「編集」をクリックします
1. 静的ウェブサイトホスティングで「有効にする」を選択します
1. 下記を入力し、「変更を保存」をクリックします
    - ホスティングタイプ：オブジェクトのリクエストをリダイレクトする
    - ホスト名：サブドメインを入力
    - プロトコル：https

## ステップ 7: サブドメインの Amazon CloudFront ディストリビューションを作成する
1. CloudFrontに移動します
1. ナビゲーションペインで、「ディストリビューション」をクリックします
1. 「CloudFront ディストリビューションを作成」をクリックします
1. 下記を入力し、「Create new OAC」をクリックします
    - Origin domain： ステップ3で作成したS3バケット
    - オリジンアクセス：Origin access control settings (recommended)
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/a5af95f5-09ad-b732-5be4-fddf2e781309.png)

1. ポップアップが表示されるので、そのまま、「Create」をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/adf9ff8a-e8ea-1033-587e-8367459ee7de.png)
1. デフォルトのキャッシュビヘイビアのビュワープロトコルポリシーでは、「Redirect HTTP to HTTPS」を選択します
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/0c87617e-f4ab-899e-744d-44beb5d7b054.png)
1. ウェブアプリケーションファイアウォール (WAF)では、「セキュリティ保護を有効にする」としました
1. ディストリビューションを作成をクリックします
1. 設定の「編集」をクリックします
1. 下記を入力し、④「変更を保存」をクリックします
    - CNAMEs：①サブドメイン
    - Custom SSL certificate：②ACMで作成した証明書
    - Default root object ：③index.html
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/3cef6c80-6413-66e1-0cb6-6eaec58eb35b.png)

## S3バケットポリシーの修正
1. サブドメインのバケットポリシーを修正します
    ```
    {
            "Version": "2008-10-17",
            "Id": "PolicyForCloudFrontPrivateContent",
            "Statement": [
                {
                    "Sid": "AllowCloudFrontServicePrincipal",
                    "Effect": "Allow",
                    "Principal": {
                        "Service": "cloudfront.amazonaws.com"
                    },
                    "Action": "s3:GetObject",
                    "Resource": "arn:aws:s3:::XXXXXX/*",
                    "Condition": {
                        "StringEquals": {
                          "AWS:SourceArn": "arn:aws:cloudfront::XXXXXX:distribution/YYYY"
                        }
                    }
                }
            ]
          }
    ```


## ステップ 8: ルートドメインの Amazon CloudFront ディストリビューションを作成する
:::note info
ルートドメインの CloudFront ディストリビューションを作成し、URL がサブドメインにリダイレクトされたときに HTTPS を使用する
:::
1. CloudFrontに移動します
1. ナビゲーションペインで、「ディストリビューション」をクリックします
1. 「CloudFront ディストリビューションを作成」をクリックします
1. Origin domain:ルートドメインバケットのWebエンドポイントを選択します
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/22a1cbd7-21a7-5cb1-edd0-065f93b5e3c0.png)
1. デフォルトのキャッシュビヘイビア：Redirect HTTP to HTTPS
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/55ff6ab6-69eb-dcd8-777d-705cdd595dc4.png)
1. キャッシュポリシー：CachingDisabled
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/afa2cbad-0fda-4832-2657-8cc9ab7a7ff9.png)
1. CNAMEには、①ルートドメイン、Custom SSLには、ACMで作成した証明書を選択します
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/7db42a00-3d7f-1aba-643c-45504090016d.png)

1. 最後にディストリビューションを作成をクリックします

## ステップ 9: ドメインの DNS トラフィックを CloudFront ディストリビューションにルーティングする
ドメインのインターネットトラフィックを CloudFront ディストリビューションにルーティングします。

1. Route 53に移動します
1. ナビゲーションペインで、「ホストゾーン」を選択します
1. ドメイン名を選択します
1. 「レコードを作成」をクリックします
1. ルーティングポリシーで「シンプルルーティング」を選択し、「次へ」をクリックします
1. 「シンプルなレコードを定義」をクリックします
1. ポップアップが表示されるので、下記を入力し、「シンプルなレコードを定義」をクリックします
    - レコード名:デフォルトの前にサブドメインをいれる
    - レコードタイプ：A
    - ルーティング先：CloudFrontディストリビューションへのエイリアス
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/db0eee88-8845-8768-4fad-148648b81e9e.png)
1. 最後に「レコードを作成」をクリックします

## ルートドメインのエイリアスレコードの追加
:::note info
ルートドメインからサブドメインにリダイレクトさせるため、DNSレコードを追加します。
:::

1. 上記のサブドメインと同様の設定を行う。（ただし、ルートドメインで行うこと）


## ステップ 10: ウェブサイトをテストする
1. サブドメインでアクセスします。表示されました
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/8e2b9af1-98ea-1f4d-3628-c3928e378392.png)

1. ルートドメインでアクセスします。リダイレクトされました

# 考察
前回に引き続き、今回も静的ウェブサイトにドメインを使用してみました。
今回は、CloudFrontを使用しましたが、ACMなどがあるため、S3のホスティングよりも手間はかかりました。
次回以降も、Route 53や、CloudFront、ACMを深堀りしていきたいと思います。

# 参考

https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/getting-started-cloudfront-overview.html

https://qiita.com/zumax/items/154243d4cb0eaa255032

https://qiita.com/zumax/items/f09349191cf16f8cfeb5

https://qiita.com/zumax/items/3b0012e4d30b8b7a9f05

https://aws.amazon.com/jp/certificate-manager/pricing/