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
/path/example_v1.css
or/path/v1/example.css
/path/example.js?version=1
/path/example.jpg?1
To cache bust, new versions can be as follows
/path/example_v2.css
or/path/v2/example.css
/path/example.js?version=2
/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
- Default: [CachingDisabled] managed policy
- *.css: [CachingOptimized] managed policy
- *.js: Custom cache policy with query string
version
in cache key - *.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
- Enable Security headers response policy
- Require HTTPS for all communications between viewers and CloudFront
- (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.