はじめに

S3を使うと手軽に静的ウェブサイトホスティングすることができ、
Route53でCNAMEを指定すれば独自ドメインでホスティングすることができます。
ただhttps化することはできずChromeでは「保護されていない通信」扱いされてしまいます。
そこでCloudFrontを使ってS3で独自ドメインhttpsホスティングさせたときのメモです。

前提

独自ドメイン取得済みでACMなどの設定済

S3バケット作成

任意の名称でS3バケットを作成する

CloudFront Distributions 作成

CloudFrontへアクセス
「Create Distributions」-Web:「Get Started」
下記設定項目入力
S3許可用のOrigin Access Identity追加
Distributionsの「Origins and Origin Groups」よりOriginsを編集

S3バケットにCloudFrontからのみ許可設定

バケット設定の「アクセス権限」-「バケットポリシー」に下記を設定しCloudFrontからのアクセスを許可する
(バケット名とOrigin Access Identity IDは適宜)

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXXXXXXXXX"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<BUCKET_NAME>/*"
        }
    ]
}

Route 53へCNAMEを登録する

下記CloudFrontのDomain NameをRoute 53へCNAMEとして追加する

補足

CloudFrontは高速化のためにコンテンツをキャッシュしているためS3のコンテンツを更新後
速やかに反映させたい場合はAmazon CloudFrontのキャッシュ削除(Invalidation)を実行する必要がある。