How to publish a static website with custom domain using Amazon CloudFront + S3 + Route 53
Here’s how to publish a static website with a custom domain using Amazon CloudFront, S3, and Route 53.
Amazon S3 に静的ウェブサイトをホスティングする | CodeNote
As written in the article above, you can host a static website with S3 alone.
However, operating with S3 alone has the risk of high billing when there’s heavy traffic to the S3 bucket, so this article uses CloudFront and S3 in combination.
『構成 1. CloudFront のオリジンに、 S3 バケットそのものを指定する構成』 - CloudFront + S3 で静的サイトを運用する際の注意点 - Qiita
We’ll configure this setup.
We’ll use the US West (Oregon) region as it’s the cheapest at $0.023.
Reference: AWS S3のリージョン毎のストレージ価格比較
Don’t select anything in particular.
Block all public access
オリジンアクセスアイデンティティを使用して Amazon S3 コンテンツへのアクセスを制限する - Amazon CloudFront
We want to redirect HTTP requests to HTTPS requests, so we select Redirect HTTP to HTTPS.
Reference: ビューワーと CloudFront との通信で HTTPS を必須にする - Amazon CloudFront
Reference: CloudFront と Amazon S3 オリジンとの間の通信で HTTPS を必須にする - Amazon CloudFront
We want CloudFront to compress and deliver with gzip, so we set Compress Objects Automatically to Yes. This reduces transfer volume, achieving both speed improvement and transfer cost savings.
If you haven’t created an SSL certificate yet, issue one from [Request or Import a Certificate with ACM].
Finally, by configuring DNS in Route 53, all the work required to host a static website with a custom domain using CloudFront + S3 is complete.
That’s all from the Gemba.