CodeNote.net

How to publish a static website with custom domain using Amazon CloudFront + S3 + Route 53

Tadashi Shigeoka ·  Thu, August 15, 2019

Here’s how to publish a static website with a custom domain using Amazon CloudFront, S3, and Route 53.

AWS | Amazon Web Services

Prerequisites

Background and various environments

  • Website targeting Japan
  • Domain name: your-site.example.com

Static sites can be published with S3 alone

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.

Creating S3 Bucket

Name and Region

S3 Create bucket

We’ll use the US West (Oregon) region as it’s the cheapest at $0.023.

Reference: AWS S3のリージョン毎のストレージ価格比較

Configure options

Don’t select anything in particular.

Set permissions

Block all public access

Creating CloudFront Distribution

オリジンアクセスアイデンティティを使用して Amazon S3 コンテンツへのアクセスを制限する - Amazon CloudFront

Create Distribution

  1. [Create Distribution]
  2. Select a delivery method for your content. - Web - [Get Started]

Origin Settings

Create Distribution - Origin Settings | CloudFront
  • Origin Domain Name: Select the S3 bucket created above
  • Origin ID: Automatically filled to correspond to S3 bucket name, leave as is
  • Restrict Bucket Access: Yes
  • Origin Access Identity: Create a New Identity
  • Comment: access-identity- edit appropriately
  • Grant Read Permissions on Bucket: Yes, Update Bucket Policy

Default Cache Behavior Settings

Default Cache Behavior Settings | CloudFront
  • Viewer Protocol Policy: Redirect HTTP to HTTPS

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

  • Compress Objects Automatically: Yes

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.

Distribution Settings

Distribution Settings | CloudFront
  • Price Class: Use U.S., Canada, Europe, Asia, Middle East and Africa
  • Alternate Domain Names(CNAMEs): your-site.example.com
  • SSL Certificate: Custom SSL Certificate (example.com)

If you haven’t created an SSL certificate yet, issue one from [Request or Import a Certificate with ACM].

Default Root Object | CloudFront
  • Default Root Object: index.html

Changing DNS settings in Route 53

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.

Create Record Set | Route 53

That’s all from the Gemba.

References