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には入れておいたほうが良いのかも