Serving a Static Website over HTTPS Using Amazon S3, CloudFront, and Route 53

Figure showing icons of an S3 bucket, a CloudFront distribution, and the Amazon Route 53 service.

Last updated: July 15, 2019

Amazon S3 offers a simple way to host a static website. If you want to speed up this website, you can serve it through an Amazon CloudFront distribution, a content delivery network (CDN). For your CloudFront distribution, you can request a free public SSL certificate in AWS Certificate Manager (ACM), or you can import and use an existing SSL certificate.

Also, you can redirect requests from www to non-www URL of your website or vice versa.

This blog post describes how to host a static website on Amazon S3 and serve it over HTTPS using Amazon CloudFront. DNS configuration is done using Amazon Route 53.

How to serve a static website over HTTPS using Amazon S3, CloudFront, and Route 53

In this procedure, you use a CloudFormation template to create two S3 buckets and two CloudFront distributions in the AWS region of your choice.

The first S3 bucket and the corresponding CloudFront distribution are used to redirect requests from www to non-www URL of your website (or vice versa).
The second S3 bucket is used to host your static website, while the corresponding CloudFront distribution is used to serve this website over HTTPS. You can prevent direct access to the second S3 bucket by accepting only requests that contain a specific passphrase in the User-Agent header.
HTTP is redirected to HTTPS for your website.

If you enable S3 or CloudFront logging, then the third S3 bucket is created. The expiration period for the access logs stored in this bucket is 365 days.

Also, you manually request a free ACM public certificate in AWS Certificate Manager in the US East (N. Virginia) region and create two alias A records for your CloudFront distributions in Amazon Route 53.

The following figure shows the architecture of the solution.

Figure showing three S3 buckets, two CloudFront distributions, an ACM Certificate, and the Route 53 service.

  • To complete this procedure, you must have a registered domain (for example, example.com). This domain can be registered with any registrar, but in this procedure, it is assumed that you use Amazon Route 53 as the DNS service provider for it.

To host a static website on Amazon S3 and serve it over HTTPS using Amazon CloudFront, perform the following steps:

  1. Open AWS Certificate Manager of the US East (N. Virginia) region at https://console.aws.amazon.com/acm/home?region=us-east-1. Then, request a free ACM public certificate. Add both www and non-www domain names to the certificate (for example, add example.com and www.example.com).
    • Alternatively, you can import an existing SSL certificate into AWS Certificate Manager in the US East (N. Virginia) region.
  2. Open CloudFormation Management Console at https://console.aws.amazon.com/cloudformation/home and switch to the AWS region where you want to deploy the S3 buckets and CloudFront distributions. Then, use the following CloudFormation template to create a new stack with all required resources. The download URL of the static-website.json CloudFormation template. In the configuration parameters, provide your root domain name, ARN of the ACM certificate from the previous step, and the base name for the S3 buckets.
    Optionally, you can disable S3 and CloudFront logs, change the canonical URL of your website, and set a passphrase (User-Agent) to prevent direct access to your content.
  3. Upload your static content to the S3 bucket that corresponds to the canonical URL of your website.
    You can find the name of this bucket in the outputs of the CloudFormation stack that you created in the previous step.
  4. Open Route 53 Management Console at https://console.aws.amazon.com/route53/home. Then, in the hosted zone of your domain, create record sets for your root (non-www) and www domains with the following parameters:
    1. Name: leave empty
      Type: A - IP v4 address
      Alias: yes
      Alias target: in the drop-down menu, choose your root CloudFront distribution
      Routing Policy and Evaluate Target Health: accept default values
    2. Name: www
      Type: A - IP v4 address
      Alias: yes
      Alias target: in the drop-down menu, choose your www CloudFront distribution
      Routing Policy and Evaluate Target Health: accept default values
  5. Wait for your DNS changes to propagate.
  6. Open different URLs of your website (www or non-www, http:// or https://) to ensure that all redirects work correctly, and there are no warnings related to the SSL certificate.