Whole Site Delivery with Amazon CloudFront

20,338 views
19,986 views

Published on

A typical website generally contains a mix of static and dynamic content. Static content includes images or style sheets; dynamic or application generated content includes elements of your site that are personalized to each viewer.  In this session, we'll provide an overview on how you can use Amazon CloudFront to help architect your whole site. We’ll demonstrate how you can use Amazon CloudFront to help architect your site to deliver both static and dynamic content (portions of your site that change for each end-user). We’ll also walk through how you can configure multiple origin servers for your Amazon CloudFront distribution providing you the flexibility to keep your content in different origin locations without the need to create multiple distributions or manage multiple domain names on your website.. We also show you how you can use query string parameters to help customize your web pages for each viewer and how you can configure multiple cache behaviors for your download distribution based on URL patterns on your website. 

Published in: Technology, Design

Whole Site Delivery with Amazon CloudFront

  1. 1. Whole Site Delivery with Amazon CloudFront Alex Dunlap Sr. Manager, Amazon Web Services
  2. 2. Agenda• What is Whole Site Delivery?• Why use CloudFront for Whole Site Delivery?• Demo• Customer Stories: – Stephen Evans, Toronto Star Newspapers – Irakli Nadareishvili, National Public Radio
  3. 3. What is Whole Site Delivery?
  4. 4. Personalized Website Example Dynamic Static
  5. 5. Typical Website Architecture Dynamic Content www.example.com/*.php OR Elastic Load Amazon EC2 Custom Origin Balancing Static Content cdn.example.com/*.jpg OR Amazon S3 Custom Origin
  6. 6. Whole Site Delivery with CloudFront Dynamic Content OR Amazon CloudFront Elastic Load Amazon EC2 Custom Origin www.example.com *.php Balancing Static Content *.jpg OR Amazon S3 Custom Origin
  7. 7. Whole Site Delivery: Common MythsMyths… Debunked…• None of my HTML pages are cacheable. • Often, many pages are cacheable – e.g. search results pages.• My HTML pages are customized so • Use Cookies and Query Strings as those cannot be cached. cache keys – e.g. local weather pages.• My pages are personalized and unique • Network and path optimizations allow for each user, so a CDN won’t be useful. CloudFront to speed up dynamic content – e.g. personalized pages.
  8. 8. Whole Site Delivery Use Cases • News • Weather • Sports • Social Media • Advertising • Travel • Stocks
  9. 9. Why use CloudFront for Whole Site Delivery?
  10. 10. Benefits of Whole Site Delivery with Amazon CloudFrontMaking your web applications……. Faster Scale Better More Available Easier to Manage Cost Less…by leveraging AWS’ presence at the edge of the Internet.
  11. 11. CloudFront can make your web applications……. Faster Scale Better More Available Easier to Manage Cost Less
  12. 12. Faster: The Performance Problem Long Distance + Poor Network = Slow Load Times
  13. 13. Faster: How CloudFront Helps CloudFront helps change this equation to… Short Distance + Optimized Network = Fast Load Times
  14. 14. Faster: Global CloudFront Network Europe Amsterdam (2)North America DublinAshburn, VA (2) Frankfurt (2)Dallas, TX (2) London (2)Hayward, CA Madrid AsiaJacksonville, FL Milan Hong Kong (2)Los Angeles, CA (2) Paris (2) OsakaMiami, FL Stockholm Singapore (2)Newark, NJ Tokyo (2)New York, NY (3)Palo Alto, CASeattle, WASan Jose, CA South AmericaSouth Bend, IN Sao Paulo AustraliaSt. Louis, MO Sydney
  15. 15. Faster: Optimized Network Paths Dynamic Content Low Latency TCP/IP Window Sizing Amazon CloudFront www.example.com *.php Static Content *.jpg Persistent Connections Monitored Network Paths
  16. 16. CloudFront can make your web applications……. Faster Scale Better More Available Easier to Manage Cost Less
  17. 17. Scale Better: How CloudFront Helps Caching static content at the Edge. Offloading connection set-up and SSL negotiation to the Edge. Persistent connections and collapse forwarding help scale your origin.
  18. 18. CloudFront can make your web applications……. Faster Scale Better More Available Easier to Manage Cost Less
  19. 19. More Available: How CloudFront Helps CloudFront is architected for high availability. Serve cached content even when origin is unavailable. Availability SLA.
  20. 20. CloudFront can make your web applications……. Faster Scale Better More Available Easier to Manage Cost Less
  21. 21. Easier to Manage: How CloudFront Helps No need to write any custom code. Multiple origins and cache behaviors make it easy to architect for whole site delivery. Self service signup and configuration via AWS Management Console and APIs.
  22. 22. CloudFront can make your web applications……. Faster Scale Better More Available Easier to Manage Cost Less
  23. 23. Cost Less: How CloudFront Helps Same price for dynamic and static content! Preferential pricing on origin fetches from S3 and EC2. NEW! CloudFront is less expensive than AWS Data Transfer (over 10 TB per month). Reserved Capacity Pricing for reduced rates with commitment.
  24. 24. Configuring CloudFront for Whole Site Delivery Demo
  25. 25. Demo
  26. 26. Demo
  27. 27. Demo
  28. 28. Cloudfront @The Toronto StarStephen EvansHead of Digital TechnologyApril 18, 2013
  29. 29. About The Toronto Star• Canada’s largest daily newspaper• Focused on metro Toronto• 3.3 million monthly unique visitors• Small in-house digital group, technology team supported by vendors & corporate IT• Digital group run as “startup” within corporate structure• Tech stack includes Java, PHP, Ruby• Relaunched flagship site thestar.com on Adobe CQ5 on Jan. 30, 2013
  30. 30. Why AWS?• Rebuild of thestar.com, tech team, hosting infrastructure• Evaluated various cloud-hosting options – capability, price• Ran short pilot phase• AWS clear overall winner in terms of flexibility, feature set, price• Began migration of smaller sites Spring 2012• Ongoing migration culminating thestar.com January 2013
  31. 31. Why CloudFront?• Evaluated CloudFront vs. various more established players• Cloudfront addressed all priority feature requirements• Validated performance claims via prelaunch load testing• Simplicity of configuration a clear advantage• Ambitious roadmap to release additional features• Clear price and pricing model advantages
  32. 32. Architecture Cloudfront Elastic Load Balancer Production - US East Region VPC Dispatcher/Apache Dispatcher/Apache Dispatcher/Apache Amazon Linux 64 Bit Amazon Linux 64 Bit Amazon Linux 64 Bit C1 Medium C1 Medium C1 Medium Publish CQ/CRX Publish CQ/CRX Publish CQ/CRX Publish CQ/CRX Publish CQ/CRX Publish CQ/CRX Amazon Linux 64 Bit Amazon Linux 64 Bit Amazon Linux 64 Bit Amazon Linux 64 Bit Amazon Linux 64 Bit Amazon Linux 64 Bit C1-Xlarge C1-Xlarge C1-Xlarge C1-Xlarge C1-Xlarge C1-Xlarge Standby Master Author CQ/CRX Author CQ/CRX Amazon Linux 64 Bit Amazon Linux 64 Bit C1-Xlarge C1-Xlarge Availability Zone A Availability Zone B Availability Zone D
  33. 33. Whole Site Delivery• Cache everything possible• No server side cookies written, only select pages pass query strings• Control caching granularly using 19 different rules• Use distributed load testing to validate performance against multiple Cloudfront edge locations• We use a single origin, but ELB and multi-tiered multi-AZ configuration on backend• Planning a multi-region DR architecture that will also leverage CloudFront
  34. 34. Client Side Cookies
  35. 35. Behaviours
  36. 36. Success Metrics• 50% response time improvement• 99.99% uptime since relaunch (100% after launch day)• Business impact: lower hosting cost, improved consumer experience, SEO
  37. 37. Lessons Learned• Understand the constraints of using a CDN and CloudFront specifically up front• Whole site caching presents unique challenges that are different from static asset caching – cookies, post requests• The CDN does not remove the need to ensure your origin is scalable and has its own caching tiers• Think about reporting requirements - how will you track usage?• Engage with the business on caching rules – what behaviours will be applied to what parts of your site?
  38. 38. Thanks! Ping me sevans@thestar.ca @stephenaevans
  39. 39. NPR: Whole Site DeliveryScaling npr.org for the Election Night 12 and beyond.Irakli NadareishviliDirector of Engineering, Digital Media, @NPRTwitter: @inadarei @NPRTechTeam
  40. 40. Election Night:Olympics of the News WebsitesIrakli Nadareishvili @inadarei http://bit.ly/npraws
  41. 41. Traffic Spike:Irakli Nadareishvili @inadarei http://bit.ly/npraws
  42. 42. Preparation is KeyMeasure, Improve, Repeat.Irakli Nadareishvili @inadarei http://bit.ly/npraws
  43. 43. Step 1: Measure https://github.com/npr/ec2-fleetIrakli Nadareishvili @inadarei http://bit.ly/npraws
  44. 44. Bottlenecks:1. Pipeline2. GeographyIrakli Nadareishvili @inadarei http://bit.ly/npraws
  45. 45. Solution:Serve HTML through a CDN....but how?Irakli Nadareishvili @inadarei http://bit.ly/npraws
  46. 46. Scalability:Every Second CountsIrakli Nadareishvili @inadarei http://bit.ly/npraws
  47. 47. Pitfalls:1. No user-specific content...Sortof.2. Could not CDN API3. Content expiration takeslong time.Irakli Nadareishvili @inadarei http://bit.ly/npraws
  48. 48. We Use Multiple CDNsIrakli Nadareishvili @inadarei http://bit.ly/npraws
  49. 49. http://www.pbs.org/idealab/2013/03/ranking-the-slowest-loading-news-sites-and-how-they-can-speed-up074.html Irakli Nadareishvili @inadarei http://bit.ly/npraws
  50. 50. Questions? Irakli Nadareishvili twitter: @inadareiNATIONAL PUBLIC RADIO http://bit.ly/npraws
  51. 51. Resources Get Started at: http://aws.amazon.com/cloudfront/ Office Hours with CloudFront Engineers May 9th, 1 pm Eastern (10 am Pacific) Sign-Up: https://www2.gotomeeting.com/register/594793282
  52. 52. Thank You!dunlap@amazon.com

×