CloudFront Basics Demo

In this article, we'll walk through configuring AWS CloudFront to accelerate delivery of a simple web application. The application consists of an HTML file, a CSS file, and several images stored in an S3 bucket. CloudFront caches these files at edge locations, enhancing load times across the globe.

Step 1: Setting Up the S3 Bucket

Begin by creating an S3 bucket to host your web application files.

1. In the AWS S3 console, click on Create bucket.
2. Name your bucket (e.g., "kodekloud-cloudfront-demo") and leave the default settings unchanged.

Once created, your new bucket will appear in the bucket list.

Upload all your web application files—including the HTML file, CSS file, and images—to this bucket.

Verifying File Access

Trying to access one of the files via its public URL will result in an "Access Denied" error because no public access policies are configured. Inspecting the bucket’s permissions confirms that there is no bucket policy enabled, thereby blocking public access.

Step 2: Creating a CloudFront Distribution

Now, set up a CloudFront distribution to serve your S3 content:

1. Open the CloudFront console and click Create Distribution.
2. Choose the S3 bucket ("kodekloud-cloudfront-demo") as the origin.
3. Optionally, specify an origin path; if not needed, leave it as default.
4. You may provide a custom origin name or use the default one.
5. Under Cache Behavior, retain the default settings, and scroll down to view additional configuration options.

Configuring Additional Settings

Configure the following additional settings:

• Disable the Web Application Firewall (WAF) for this demonstration.
• Choose the appropriate price class—select "Use all edge locations" for a global cache.
• Custom SSL certificates are unnecessary for this demo.
• Set the Default Root Object to "index.html" to ensure users accessing the root URL are directed to the proper file.

Once the configuration is complete, click Create Distribution. During provisioning, CloudFront prompts you to update the S3 bucket policy to enable access to your files.

Step 3: Updating the S3 Bucket Policy

To allow CloudFront to access your S3 files, update the bucket policy as follows:

1. In the CloudFront console, click Copy Policy.
2. Go to your S3 bucket’s Permissions tab.
3. Paste the copied policy into the Bucket Policy editor. An example policy appears as:

{
    "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/*",
            "Condition": {}
        }
    ]
}

If you wish to restrict access to only the current CloudFront distribution, a more specific policy might be:

{
    "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/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront:841860927337:distribution/E2D1BKS7RKY1GR"
                }
            }
        }
    ]
}

After pasting and saving the policy, CloudFront will securely link to your S3 bucket.

Step 4: Testing the Distribution

Once CloudFront finishes deploying (this may take several minutes), confirm that your distribution’s state is "Enabled" from the CloudFront distributions list. Copy the distribution domain name provided by CloudFront.

By accessing the domain (with just a forward slash), CloudFront will serve the default root object—index.html. The first request retrieves files from S3, and subsequent requests are served from the CloudFront cache, greatly reducing load times.

Step 5: Understanding Cache Settings

By default, CloudFront caches content for 24 hours (86,400 seconds). To check these settings, edit the default behavior and click View Policy under Cache Key or Cache Policy Settings.

Step 6: Demonstrating Cache Invalidation

To demonstrate cache invalidation, imagine updating a cached file. Suppose you have an image named "car.jpg" initially displaying a red car. If you upload an updated "car.jpg" (showing a blue car) to the S3 bucket, it will overwrite the current file.

Even after the update, CloudFront may continue showing the cached red image due to the set 24-hour TTL. To force CloudFront to pull the updated content, manually invalidate the cache:

1. In the CloudFront console, go to the Invalidations section and create a new invalidation.
2. Specify the object path to invalidate. You can use "/*" to invalidate all files or target a specific file (e.g., "/images/car.jpg").

Once the invalidation completes, refreshing your application should display the blue car image because CloudFront will fetch the latest version from S3.

Conclusion

This demo has shown you how to configure an S3 bucket and set up an AWS CloudFront distribution to effectively serve and cache web application assets. We also covered how to update the S3 bucket policy to permit CloudFront access, understand cache TTL settings, and perform manual cache invalidation to ensure users receive the most updated content.

Happy learning, and see you in the next article!