CloudFront Dynamic Content Websites

Amazon CloudFront can be used for dynamic content delivery. These are sites with personalized and dynamic web content that are not cacheable. Examples include blog, e-commerce, news, travel and retail web sites.

While dynamic content are not cacheable on CloudFront edge locations, static content in web pages (such as javascript, stylesheets, fonts and images) can be cached by CloudFront for added performance. However, custom cache policies by file type may be required for optimal CloudFront caching.

This repository provides a starter AWS CloudFormation template that can be used to provision a secure and higher performance CloudFront distribution for dynamic content websites.

Cache Busting and CloudFront cache key

To ensure that CloudFront caches are optimized and do not contain outdated content, an understanding of common web cache busting techniques and CloudFront cache key is required.

Web developers typically use unique URL paths or query strings to perform cache busting. Below are some examples

1. /path/example_v1.css or /path/v1/example.css
2. /path/example.js?version=1
3. /path/example.jpg?1

To cache bust, new versions can be as follows

1. /path/example_v2.css or /path/v2/example.css
2. /path/example.js?version=2
3. /path/example.jpg?2

While first entry can use CloudFront's CachingOptimized managed cache policy, the rest requires custom cache policy with query string parameters to ensure that CloudFront do not cache outdated content. The cache policies to be used are therefore

1. Default: [CachingDisabled] managed policy
2. *.css: [CachingOptimized] managed policy
3. *.js: Custom cache policy with query string version in cache key
4. *.jpg Custom cache policy with all query strings in cache key

CloudFront configuration overview

The CloudFormation template allows users to select type of cache policy for common static content file types and configure CloudFront distribution settings as illustrated below

Deployment via CloudFormation console

Download template file and login to AWS CloudFormation console. Choose Create Stack, Upload a template file, Choose File, select your downloaded file and choose Next.

Specify a Stack name and specify parameters values. All fields are required. You will need to enter origin domain name and configure cache policy accordingly for each file type.

It usually takes up to 10 minutes to provision. After your stack has been successfully created, its status changes to CREATE_COMPLETE.

Go to Outputs tab where you can navigate to created CloudFront distribution and CloudFront console

Navigate to CloudFront console, Behaviors to verify settings for differnt file types

Security features

The following security features are enabled

1. Enable Security headers response policy
2. Require HTTPS for all communications between viewers and CloudFront
3. (Optional) Create AWS WAF Web ACL with common AWS Managed Rules enabled and associate with CloudFront to provide layer 7 protection

In addition, the use of CloudFront provides layer 3 and layer 4 DDoS protection at the edge network and ensures that only well-form HTTP/HTTPS requests are sent to origin.