Edited at

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

More than 1 year has passed since last update.


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.comhttps://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サイトが公開されている事を確認。

https://xxx.cloudfront.net


Route53

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

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

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


補足

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