Static website on Amazon S3 and CloudFront

Host a static website on an Amazon Simple Storage Service (Amazon S3) bucket and serve the website through an Amazon CloudFront distribution.

Chris Phan · – 6 minute read

The case for the static site

You can use Amazon S3 to host a static website. On a static website, individual webpages include static content. They might also contain client-side scripts.

Amazon S3 website endpoints do not support HTTPS. So, in this case we will use CloudFront as a content distribution and allow to redirect from HTTP to HTTPS. In addition, using CloudFront also allows us redirect domain from non-www to www, vice versa.

In this blog we will use example.com as an example how to implement the static website.

Overview

This topic will cover the following things:

  • Create two Amazon S3 buckets one for two domains example.com and www.example.com. The S3 bucket name is exact same domain name.
  • Enable static web hosting for the two S3 buckets.
  • Configure the S3 bucket permission to enable public access.
  • Create two CloudFront for routing traffic from CloudFront to S3 buckets.
  • Create Route53 domain and alias record name to point to those two CloudFront.

Implement S3 buckets for static website

Create two Amazon S3 buckets (for example.com and www.example.com)

  1. Open the Amazon S3 console at https://console.aws.amazon.com/s3/.
  2. Create two buckets name example.com and www.example.com.
  3. Uncheck "Block all public access" for the two bucket during creation.
  4. Click "Create bucket" to create the bucket.

After the two buckets created, we start modifying bucket policy and static webhosting.

Enable static web hosting

Do the following steps to config example.com S3 bucket

  1. From Amazon S3 bucket, choose bucket name example.com.
  2. Choose properties and scroll to the bottom.
  3. Under "Static website hosting" block, click Edit.
  4. Choose enable to enable static website hosting. In Hosting type, check "Redirect requests for an object" ( in this case we want redirect traffic from non-www to www). Specify hostname: www.example.com. Then click Save changes.

Do the following steps to config www.example.com S3 bucket

  1. From Amazon S3 bucket, choose bucket name www.example.com.
  2. Choose properties and scroll to the bottom.
  3. Under "Static website hosting" block, click Edit.
  4. Choose enable to enable static website hosting. In Hosting type, check "Host a static website". Put index.html for home or default page of website (depend on your configuration the home page might different).
  5. Click Save changes to save the configuration.

Configure S3 bucket permission for public access

Because S3 buckets is for public access, so we have to enable public access to allow users from internet can access to those two buckets. The following steps is for example.com bucket, however you can also do the same with www.example.com bucket.

  1. From Amazon S3 bucket, choose bucket name example.com.
  2. Choose permissions and scroll to Bucket policy.
  3. Adding the following json code block to the Bucket policy and click Edit.
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::example.com/*"
        }
    ]
}

If you update the bucket policy for www.example.com, change the resource to "arn:aws:s3:::www.example.com/*".

  1. Click Save changes to save the configuration.

Now the two S3 buckets are ready for serving config. You can start upload content in the www.example.com bucket. We do not need to upload content in example.com in this case because it is only for redirecting purpose.

Implement CloudFront and Route53 domain

Though the S3 buckets along with bucket policy and static website for bucket enabled. To make it more professional and good for SEO we might need to configure content delivery and custom domain.

Adding a CloudFront and Route53 might require a certificate, in this case we can use AWS Certificate Manager. Assume that you already configured the Route53 domain example.com. Now we can start request a certification for both example.com and www.example.com (we can use asterisk in this case *.example.com).

Create certificate using AWS Certificate Manager

  1. From AWS console, go to AWS Certificate Manager (make sure the region N.Virginia).
  2. Click Request to request a new certificate, click Next.
  3. For Fully qualified domain name, put *.example.com.
  4. Click Request to request certificate.
  5. At this time, the AWS Certificate Manager request for *.example.com is in pending state. We have to validate the certificate request via email address or via route53 domain. In this example, we will use route53 with CNAME record to validate the certificate request. From the AWS Certificate Manager console, choose *.example.com, copy the CNAME name (https://_6f2239ec1996.example.com) and CNAME value (https://_9dd543741494.vrcmzfbvtx.acm-validations.aws./) to clipboard.
  6. Go to Route53, locate domain example.com, create a CNAME record with record name and record value from clipboard.
  7. Now let drink some coffee and wait for validation finished.

Create CloudFront as a CDN

Assume that, after create CNAME record the certificate validated. Now, we can start create two CloudFront, one for example.com and another for www.example.com.

In general, the two configuration is similar.

  1. From AWS Console, go to CloudFront and click Create distribution.
  2. For Origin domain, specify the S3 bucket name e.g example.com for example.com domain.
  3. Because our S3 bucket already enabled static website a warning box appear suggest use website endpoint, click Use website endpoint.
  4. Choose redirect HTTP to HTTPS for Viewer protocol policy.
  5. Specify example.com for Alternate domain name (CNAME).
  6. Use the certificate we have created for Custom SSL certificate.
  7. If you want to use WAF to add additional protection layer, enable it. If not, check Do not enable security protection. (in this example we disable it).
  8. Other configuration can leave default, click Create Distribution to create the CloudFront.

Do the same steps above for domain www.example.com.

Create Route53 A record for routing traffic to CloudFront

  1. From the AWS console, go to Route53 and locate the domain example.com.
  2. Create a record for example.com by click create record.
  3. Choose alias, and choose Alias to CloudFront distribution.
  4. Locate the distribution and click Create records.
  5. Do the same step 3 and 4 for www.example.com.

Verification

Now we finished all the configuration to create a static website with content delivery network (CDN). Do the following steps to verify:

  • From Web browser, type www.example.com, we expect the return code 200.
  • From Web browser, type example.com, we expect the return code 3xx. because the steps above configured redirect from example.com and www.example.com.
static-sites