1. Eric Winter
eric@webicus.com
webicus internet services

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

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

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

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

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.”

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

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.

9.  Heavy static content served by CloudFront edge server
 Missing or expired content pulled from S3

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.

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

12.  Firefox (plugins)
 S3Fox
 Firebug
 Pagespeed
 Yslow
 Asset references
 Migration tools

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

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.

15.  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

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)