Amazon CloudFrontとS3で静的サイトを独自ドメインで公開したい

とりあえずS3に公開したサイトのソースを突っ込んでCloudFrontで公開するために参考にした記事

dev.classmethod.jp

当初これを参考にS3とCloudFrontで静的なサイトをホスティングする一連の流れを把握した。
ただし昔の記事なので内容が現在では古いように思いました

qiita.com

これが2024/06時点で一番参考になりました これをもとに今回は構築しました

以上でとりあえずCloudFrontディストリビューション作成時に付与されたサブドメイン (XXXXXXX.cloudfront.net のようなもの ) にアクセスすると 構築したサイトが見れるようになりました

あとはこちらの指定するドメインでアクセスできるようにするだけです

まずはこの記事を読んでおおよそを把握しました

qiita.com

いくつかポイントがあるようでした

1. 独自ドメインでアクセスできるようにするにはそのドメインのSSL証明書が必要になる
2. 証明書をAWS Certificate Managerで発行できるが、CloudFrontに対して付与するには米国東部（バージニア北部） リージョンで証明書を発行する必要がある
3. 利用しているドメインサービスで、紐づけたいドメインに対してCNAMEレコードを値はCloudFrontのサブドメイン(XXXXXXX.cloudfront.net)に設定して追加する

さらに下記記事を参考にしたところ

zenn.dev

追加で下記対応が必要となるようでした

1. CloudFront側に代替ドメイン(アクセスに使いたいドメイン)を設定する必要がある
2. Route53で代替ドメイン(アクセスに使いたいドメイン)のホストゾーンを設定する必要がある

最終的に次の手順となりました

1. AWS Certificate Managerで証明書発行

2. CloudFrontに証明書を付与、代替ドメインの値を設定

3. Route53で代替ドメイン(アクセスに使いたいドメイン)のホストゾーンを設定

   1. 代替ドメイン(アクセスに使いたいドメイン)のエイリアスとしてCloudFrontのサブドメイン(XXXXXXX.cloudfront.net)を設定

4. Route53に作成したホストゾーンのNSレコードの値4つをドメインサービス側で代替ドメインのNSレコードとして登録する

以上の手順で
Amazon CloudFrontとS3で静的サイトを独自ドメインで公開できた