AWS S3に配置している静的サイトにドメインを割り当ててHTTPSで公開する

AWS S3で公開している静的サイトにドメインを割り当ててHTTPSで公開します。
作業の流れは下記になります。

1. S3に静的サイトを配置
2. (ドメインを取得していない場合) Route53でドメインを取得
3. 取得したドメインに対してACMで証明書を発行
4. S3の静的サイトにCloudFrontでドメインを割り当て
5. Route53でAレコードを作成

# S3バケットの用意
まずは公開したいS3のバケットを用意します。
パブリックアクセスの許可や、Static website hostingの設定は必要ありません。
用意したバケット内に、公開したい静的サイトをアップロードします。

# Route53の設定

すでにドメインを取得済みの場合は、読み飛ばしてください。

まずはドメインを取得します。
Route53の「登録済みドメイン -> ドメインの登録」から、ドメインを取得しましょう（有料です）。
![スクリーンショット 2020-10-18 18.56.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/ad640d8a-36e9-f747-ea38-835a9f44978b.png)

今回は`itouuuuuuuuu.com`ドメインを取得します。
「カートに入れる」を選択し、購入手続きを行います。

![スクリーンショット 2020-10-18 18.58.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/c2ec88b3-ebef-9c27-bde5-02f49ae2a11a.png)

購入完了後、「保留中のリクエスト」にドメインが表示されるので、登録完了まで待ちましょう。
![スクリーンショット 2020-10-18 19.16.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/4437e3ce-d0eb-12f8-5e1d-674952ae92b4.png)

登録が完了すれば、「登録済みドメイン」から確認できるようになります。
![スクリーンショット 2020-10-18 19.18.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/84aff544-d142-a0a2-2fcf-8d7058383482.png)

# ACMで証明書を発行

ACM(AWS Certificate Manager)から、証明書の発行を行います。
証明書の発行は `米国東部 (バージニア北部)us-east-1` で行いましょう。

「パブリック証明書のリクエスト -> 証明書のリクエスト」を選択します。
![スクリーンショット 2020-10-18 19.23.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/1327dc99-e933-516a-bfca-a62c874bb576.png)

先程取得した `itouuuuuuuuu.com` の頭に `*.` を付けて、今回はワイルドカード証明書を取得します。
`www.itouuuuuuuuu.com` や `site.itouuuuuuuuu.com` など、 `*` の部分が何であっても証明書により保護されます。
![スクリーンショット 2020-10-18 19.24.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/3ff2fff4-fd0c-1ce9-b421-9727c428cbef.png)

「DNSの検証」を選択し、次へ。
![スクリーンショット 2020-10-18 19.27.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/40358634-a037-5534-65fd-9bf0341b12cf.png)

タグは特に追加しなくてもかまいません。
![スクリーンショット 2020-10-18 19.28.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/c2a6e227-13fe-e07d-72ad-a2200a483909.png)

設定内容を確認し、問題なければ「確定とリクエスト」を押下します。
![スクリーンショット 2020-10-18 19.29.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/4a173835-f975-f5e5-c3fc-a23fabbf078e.png)

リクエスト完了後、「Route53でのレコードの作成」を行います。
![スクリーンショット 2020-10-18 19.31.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/8b0729a7-f6cb-af89-ab32-d0455cac2902.png)

レコードの作成が成功したら、Route53の `itouuuuuuuuu.com` ドメインにCNAMEが追加されていることがわかります。
![スクリーンショット 2020-10-18 19.36.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/86e14dc8-74c1-404b-7868-3cc2a653ded1.png)

しばらく待って、下記のようにACMで証明書が「発行済み」になればOKです。
![スクリーンショット 2020-10-18 19.41.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/62b85d65-8857-b4da-10ba-8e2ea4e45947.png)

# CloudFrontの設定

「Create Distriburion -> Webの Get Started」から設定を開始します。
![スクリーンショット 2020-10-29 1.10.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/1ba3005a-5f0c-890e-c19e-2edd7650bfb4.png)

下記のように各項目を設定します。
![スクリーンショット 2020-10-29 1.15.55.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/11048063-6899-1f31-230b-832cdc54a8e4.jpeg)


今回、`Cache Plicy`は `Managed-ChachingDisabled` にして、キャッシュしないようにしています。
![スクリーンショット 2020-10-29 1.18.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/41daf25d-1d50-0c86-c4cf-f84aa042beb6.png)

CNAMEは `www.itouuuuuuuuu.com` としています。
つまり、HTTPSで公開するS3のサイトのURLは `https://www.itouuuuuuuuu.com` となるようにしています。
また、 `SSL Certificate` で、先程ACMで設定した `*.itouuuuuuuuu.com` を使用するように指定します。
![スクリーンショット 2020-10-29 1.19.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/2967a0f3-b0b5-a7e7-961d-21dd30b8ea97.png)

ここまで設定したら、「Create Distroiburion」を押下して設定を適用します。
次に、再度Route53の設定に移ります。

# Route53にAレコードを追加

Route53に移動し、先程取得したドメイン（ここでは `itouuuuuuuuu.com`） を選択します。
![スクリーンショット 2020-10-29 1.39.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/15c4956c-d12d-277c-46c5-e894702b7214.png)

「レコードを作成 -> シンプルルーティング -> シンプルなレコードを定義」 から、設定ダイアログを開き、下記のように設定します。
![スクリーンショット 2020-10-29 1.42.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/b73d7a40-53e7-512f-84fd-be41a712c505.png)

「レコード名」に、先程CloudFrontでCNAMEに設定した `www.itouuuuuuuuu.com` を設定します。
「値/トラフィックのルーティング先」に、CloudFrontのDomain Nameを指定します。
ここまで設定したら、「シンプルなレコードを定義」を押下します。

下記のような設定になっていることを確認したら、「レコードを作成」を押下します。
![スクリーンショット 2020-10-29 1.46.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/f0d3054f-8bb1-6db4-d482-31ba654d3061.png)

これで `itouuuuuuuuu.com` ホストゾーンに `www.itouuuuuuuuu.com` というAレコードが追加されました。

# HTTPSでアクセスできることを確認

CloudFrontにアクセスして、下記のようにデプロイが完了していることを確認します。
![スクリーンショット 2020-10-29 1.49.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/edcf5743-d0ef-c33f-6df6-3b579053f3f7.png)

CloudFrontのデプロイが完了後、設定した `https://www.itouuuuuuuuu.com` へアクセスすることで、S3に配置した静的サイトにアクセスできるようになります。
![スクリーンショット 2020-10-29 1.52.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/f6477e3c-9800-d036-9758-b6e4cb0a0bfe.png)

お疲れ様でした！！