S3+ACM+CloudFront+Route53で独自ドメインでhttpsホスティングする

S3にアップロード

example.comバケット作成。

コンテンツをアップロード。

aws s3 cp --recursive /path/to/example.com s3://example.com/

S3でホスティングする場合

Cloudfrontと組み合わせる場合はS3でのホスティングは不要だが、テスト時はS3ホスティングの方が便利なので、以下の手順でホスティングする。

コンテンツを公開。

aws s3 ls --recursive s3://example.com | awk '{print $4}' | xargs -I{} aws s3api put-object-acl --acl public-read --bucket ticket.top4.jp --key "{}"

Static website hostingを有効化。

aws s3 website s3://example.com/ --index-document index.html

http://example.com.s3-website-ap-northeast-1.amazonaws.com でサイトが公開されていることを確認。

S3ホスティングを無効化

テストが済んだらStatic website hostingを無効化。

コンテンツを非公開。

aws s3 ls --recursive s3://example.com | awk '{print $4}' | xargs -I{} aws s3api put-object-acl --acl private --bucket example.com --key "{}"

http://example.com.s3-website-ap-northeast-1.amazonaws.com や https://s3-ap-northeast-1.amazonaws.com/example.com/index.html で見られなくなっている事を確認。

ACMでSSL証明書を作成

North Virginia Regionでexample.comの証明書を取得

CloudFrontのWeb distributionを作成

Origin Settings

1. Origin Domain Nameでexample.comバケットを選択

2. Restrict Bucket AccessをyesにしてS3への直接アクセスを禁止

3. Origin Access IdentityはIdentityが無ければCreate a New Identityで新しいIdentityを作成

4. Grant Read Permissions on Bucketはyesにしてバケットポリシーを自動設定

Default Cache Behavior Settings

[Viewer Protocol Policy]でhttpからhttpsへリダイレクトするようにする。

Distribution Settings

1. Alternate Domain Names(CNAMEs)にexample.comを設定

2. SSL証明書を設定

動作確認

作成したDistributionでWebサイトが公開されている事を確認。

Route53

example.comのAliasレコードを作成してxxx.cloudfront.netに向ける。

しばらく待ってからnslookup example.comでDNS設定が反映されている事を確認。

https://example.com でWebサイトが公開されている事を確認。

補足

https://xxx.cloudfront.net と https://example.com のどちらからでもアクセス出来る状況になってしまうので、SEOが気になる場合はcanonical URLで https://example.com へ向けるように設定しておいた方が良いです。