CloudFront Demo

In this tutorial, we’ll walk through how to serve a simple static website (HTML, CSS, images) from Amazon S3 and accelerate it globally with Amazon CloudFront. You’ll learn how to:

1. Set up an S3 bucket and upload your assets
2. Secure S3 with a bucket policy for CloudFront access
3. Create and configure a CloudFront distribution
4. Customize caching behavior and invalidate objects

Prerequisites

• An AWS account with IAM permissions for S3 and CloudFront
• A local project folder containing:
  • index.html
  • index.css
  • images/ (your asset directory)

Project Structure

Here’s our local directory layout. It contains an HTML page, a CSS stylesheet, and an images folder:

All assets will reside in an S3 bucket. CloudFront will then cache these files at edge locations to minimize latency for end users.

1. Create and Configure an S3 Bucket

1. Open the Amazon S3 console, then click Create bucket.
2. Enter a globally unique name (e.g., kodekloud-cloudfront-demo), leave other settings at their defaults, and click Create bucket.

After creation, verify your bucket appears in the list:

3. Click on your bucket name, then choose Upload. Add index.html, index.css, and the entire images folder.

2. Secure Bucket Access

By default, S3 blocks public access to buckets:

3. Create a CloudFront Distribution

1. Navigate to the CloudFront console, then click Create distribution → Get started under Web.
2. For Origin domain, select your S3 bucket (kodekloud-cloudfront-demo).
3. Leave Origin path blank unless you want to serve a subdirectory. Use the default Origin ID or customize it.

Scroll to other settings—most can remain at their defaults:

• Web Application Firewall: Disabled
• Price Class: Use all edge locations (Best Performance)
• SSL Certificate: Default CloudFront certificate (*.cloudfront.net)
• Default Root Object: index.html

Why Set a Default Root Object?

When you request the root of a distribution (/), CloudFront needs to know which file to serve. By setting Default Root Object to index.html, you avoid typing the full filename in the URL.

Ensure Default Root Object is index.html:

4. Click Create distribution. Distribution creation can take several minutes.

4. Apply an S3 Bucket Policy for CloudFront

To allow CloudFront to fetch objects without making the bucket public:

1. In the CloudFront console, click the Copy Policy link from the warning banner.
2. Go back to your S3 bucket’s Permissions tab → Bucket policy → Edit.
3. Paste and save the following JSON (replace kodekloud-cloudfront-demo with your bucket name):

{
  "Version": "2008-10-17",
  "Id": "PolicyForCloudFrontPrivateContent",
  "Statement": [
    {
      "Sid": "AllowCloudFrontServicePrincipal",
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::kodekloud-cloudfront-demo/*"
    }
  ]
}

If you wish to lock it down to a specific distribution, add a Condition block with your Distribution ARN:

"Condition": {
  "StringEquals": {
    "AWS:SourceArn": "arn:aws:cloudfront:841860927337:distribution/E2D1BKS7RKY1GR"
  }
}

5. Validate Your Distribution

Once the distribution status is Enabled, copy its Domain Name (e.g., d111111abcdef8.cloudfront.net) and open it in a browser with a trailing slash:

https://d111111abcdef8.cloudfront.net/

• First request: CloudFront fetches content from S3.
• Subsequent requests: Content is served from the nearest edge location.

6. Review and Customize Cache Settings

By default, CloudFront applies the Managed-CachingOptimized policy with a 24 hour (86,400 s) TTL.

1. In your distribution, go to the Behaviors tab and click Edit on the default behavior.
2. Note the Cache policy in use (e.g., Managed-CachingOptimized).
3. Click View policy to inspect TTL values:

7. Invalidate Cached Objects

When you overwrite a file in S3 (e.g., update images/car.jpg), CloudFront may still serve the old version until its TTL expires:

To force CloudFront to fetch the updated file:

1. In the CloudFront console, select your distribution and open Invalidations.

2. Click Create invalidation, then specify paths:

   /images/car.jpg
   /images/*
   /*
   

   Use wildcards to cover multiple objects.

3. Click Create invalidation. Once it completes, refresh your distribution URL to see the new image.

Next Steps

You’ve successfully deployed a static website with S3 and CloudFront. In future lessons, we’ll cover:

• Custom cache-key and origin-request policies
• Geographic restrictions and geo-blocking
• Using Lambda@Edge for dynamic content transformations

References

• Amazon S3 Documentation
• Amazon CloudFront Developer Guide
• How CloudFront Caching Works