CloudFront経由で静的ページをS3ウェブホスティング

やりたいこと

CloudFrontをたててS3にあるhtmlファイルを独自ドメインで見れるようにする
この構成をつくりたい
http://aws.clouddesignpattern.org/index.php/CDP:Cache_Distribution%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3
 
参考にしたページ
Developers.IO(クラメソさんの技術ブログ、いつもお世話になってます。)
https://dev.classmethod.jp/cloud/aws/cdn-with-cloudfront-and-s3/
AWS公式
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/website-hosting-cloudfront-walkthrough.html
  

前提

 独自ドメインを持っていること

1. 準備

S3バケットを作成し、htmlファイルを置く
バケットの名前は公開するURLに合わせるのが良い
例) test.zzz.net で公開する場合、バケットの名前もtest.zzz.netにする
置いたファイルを公開する

バケットポリシー
{
  "Version": "2012-10-17" ,
  "Statement": [
    {
      "Sid": "PublicReadForGetBucketObjects",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::xxxxx.xxx.xxx/*"
    }
  ]
}
※xxxx.xxx.xxxはバケット名

準備出来たらアクセス出来るか試してみる
   

2. CloudFrontディストリビューション作成

 [CreateDistribution]-[web Distribution]のGet startedを選択
 [Origin Domain Name] をクリックするとS3バケットが選べるので、先程公開したバケットを指定
 [Alternate Domain Names]にアクセスさせる予定のCNAMEを入力(cdn.xxx.xxとか)
 [Default Root Object] にindex.htmlなど、ファイル名を入力
 [Create Distribution]で作成
 15分ぐらいで出来上がり
 出来上がったらCloudFrontのDistribution画面の[DomainName]に表示されているxxx.cloudfront.netをコピーか何かしておく

3. Route53でCNAME設定

 [Create Record set]からCNAMEを作成する
 [Name]にCloudFrontディストリ作成したCNAMEを入力
 [value]にxxx.cloudfront.netを入力
 [Save Reacord Set]で保存
   

4. CNAMEで作ったレコードでアクセスしてみる

 webページが表示されれば成功
   

5. ちょっとだけハマったこと

 最初CloudFrontのディストリ作成のところで[Default Root Object]に何も入れずに進めてアクセスしたらAccess DeniedとかなったのでRootObjectには入れておいたほうが良いのかも