A how to tutorial view of an Amazon CloudFront implementation on a medium sized website. The result post-implementation exceeded expectations. Touches on CloudFront architecture, what tools were used and customized tools used to make using CloudFront easier in a PHP CMS website.

1. Eric Winter eric@webicus.com webicus internet services Using Amazon CloudFront for Improved Site Response Time

2. Motivation Introduction to Amazon CloudFront Basic architecture How it works/how its used Operations – interacting with CloudFront Tools Demo Program using CloudFront Results Overview

3. The Jonas Brothers made me do it…. Content management web site High number of (static) assets/page Geographically diverse users (but domestic only) Download time generally slow, with high variance Conclusion: Give it a try Motivation

4. Why Improves site response time Easy to use Reduces response time variation Cheap as dirt Reliable Especially worthwhile if you have heavy content a weak server a geographically diverse audience Why not Yet another level of caching Some implementation/maintenance costs Overview

5. Motivation Introduction to Amazon CloudFront Basic architecture How it works/how its used Operations – interacting with CloudFront Tools Demo Program using CloudFront Results Overview

6. “Amazon CloudFront is a web service for content delivery. It integrates with other Amazon Web Services to give developers and businesses an easy way to distribute content to end users with low latency, high data transfer speeds, and no commitments.” Introduction to Amazon CloudFront

7. CloudFront is a CDN (content distribution network) Tightly integrated with S3 CloudFront is not S3 S3 is designed to easily store data e.g. offsite backup S3 is the backend/system of record for CloudFront CloudFront is designed specifically to improve static content delivery e.g. serving your home page images, css files, etc. Serving large files Initial thoughts on CloudFront

8. CloudFront moves your S3 content to the ‘edge’ geographically closer to your end user thereby reducing latency SFO, VA, NYC, Ireland, Hong Kong Pull model Content pulled to edge upon first request Content expires in 24hrs (default) Edge server not aware of origin server content changes. Content is Closer to User

9. Heavy static content served by CloudFront edge server Missing or expired content pulled from S3 Content served to disparate users

10. Original files go into an Amazon S3 bucket I recommend naming the bucket something obvious like site.com and have it’s structure track your site’s directory structure. Create a “distribution” to register that bucket with Amazon CloudFront For simplicity structure the bucket w/ the same ACL Your static files are now available on CloudFront via the distribution’s domain name. Create a CloudFront Distribution

11. Motivation Introduction to Amazon CloudFront Basic architecture How it works/how its used Operations – interacting with CloudFront Tools Demo Program using CloudFront Results Overview

12. Firefox (plugins) S3Fox Firebug Pagespeed Yslow Asset references Migration tools Tools for CloudFront

13. Move content to S3 Create a distribution Reference via CloudFront URL Demo

14. Ideally simple API to interact with CDN Seamlessly switch between local content and CDN Environment sensitive Would like to develop with local assets Would like to test with local and CDN (CloudFront) assets May want multiple CNAMEs static1.example.com static2.example.com Etc. Using CloudFront in an App

15. CdnHelper – Helper Class Private members private $useLocal = FALSE; private $numHostsMin = 0; private $numHostsMax = 3; private $sslHost = 'static%d.site.com'; private $imgDir = 'images'; private $jsDir = 'jscript'; private $resourceDir = 'resources'; private $cssDir = 'style'; private $assetDir = NULL; private $forceTimestamp = TRUE; public methods Constructor (singleton) ENV and CDN_FORCE Each returns an URL setUseLocal($bool); image($assets, $options = array()) ; js($assets, $inline = true) ; css($assets) ; resource($assets) ; Usage: $cdn= new CdnHelper; $cdn->css(“style.css”);

16. To S3 S3Fox – very useful for quickly moving content to S3/Cloudfront API/rails gems/capistrano – more stable way of migrating content. To CloudFront CloudFront != S3 (sometimes) CloudFront expires in 24hrs by default CloudFront does not check S3 if asset is present on CF. Create new files and deprecate old ones Migrating New Content

17. Relatively high traffic site (8k unique visitors, 18k pageviews/week) Dynamic PHP financial sector, mainly financial charts Page weight: 440k, 48 requests (lots of small images) Verio managed server Before 6-8 seconds for typical page After 1.5-2.5 seconds (as measured by pingdom.com) Example Site – 3.5 x faster