Deep Dive on Accelerating Content, APIs, and Applications with Amazon CloudFront and Lambda@Edge

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Andreas Chatzakis, AWS Solutions Architect
September 18th, 2017
Deep Dive on Accelerating Content,
APIs, and Applications with Amazon
CloudFront and Lambda@Edge

What to expect from this session
• Amazon CloudFront and AWS Lambda
• Lambda@Edge
• Getting started with Lambda@Edge

AWS Global Infrastructure
16 Regions – 44 Availability Zones
Region & Number of Availability Zones
AWS GovCloud (2) EU
Ireland (3)
US West Frankfurt (3)
Oregon (3) London (2)
Northern California (3)
Asia Pacific
US East Singapore (2)
N. Virginia (6), Ohio (3) Sydney (3), Tokyo (3),
Seoul (2), Mumbai (2)
Canada
Central (2) China
Beijing (2)
South America
São Paulo (3)
Announced Regions
Paris, Ningxia, Stockholm

AWS Core Services
Compute
Storage
Database
Services running in the AWS Regions
Users can access
application
resources directly
Customer
Application

82 Edge Locations + 11 Regional Edge Caches

Accessing applications directly

Accessing applications with Edge

AWS Core Services
Edge Services: A core infrastructure component
Users can access application resources
through the Edge to secure, scale, and
optimize applications
Compute
Storage
Database
Edge
Customer
Application
AND/OR

Edge Services
Amazon CloudFront
Amazon Route 53
AWS Shield
AWS WAF
Amazon S3 Transfer Acceleration

CloudFront: Global content delivery network
 Accelerate your application and APIs
 Include static content such as images and video
 Massively scalable
 Highly secure
 Self-service
 Priced to minimize cost

Dynamic
Static
Video
User
input
SSL/TLS
CloudFront delivers ALL types of content

What happens with each request?
Is it in
cache?
Is it
expired?
Revalidate
with Origin
Origin
responds
with 304 (Not
Modified)
Origin
responds
with 200
(OK) and
latest version
of object
Forward
request to
origin
Y Y
NN
Viewer
Request
Hit / Refresh Hit
Miss
Cache
it

CloudFront Components: Distributions
distribution
Unique CloudFront.net Domain Name to Reference Objects
example: abc123.cloudfront.net
Specifies Origin(s) of Original Content Versions
example: orign.mysite.com
Types Provide for HTTP/HTTPS
example: https://cdn.mysite.com
Contain Specific Configurations and Tags
example: origins, behaviors, error pages, restrictionsHINT: Point your own
domain name to the
CloudFront.net domain
with an Amazon Route 53
Alias record

CloudFront Components: Origins
Custom Origin
EC2 instance
web app
server
Elastic/Application
Load Balancing
Amazon S3
Bucket

CloudFront Components: Behaviors
• Path Pattern Matching
• Origin Selection
• Headers
• Query Strings / Cookies
• Signed URL
• SSL Certificates
• Protocol Enforcement
• Time To Live (TTL)
• GZIP Compression

• Headers
• Signed URL
• Route requests to specific origins
• Set HTTP Protocol
• Set HTTP Methods
• Set Header Options
• Set Caching Options
• Set Cookie and Query String Forwarding
• Restrict Access
• Set Compression
Vary Behavior based on Path Parameters

Example: Whole site delivery for Wordpress
Amazon
Route 53
EC2 instance(s)
S3 bucket
Static content
Dynamic content
wp-content/*
wp-includes/*
wp-admin/*
wp-login.php
Default(*)
CloudFront
distribution

• Headers
• Signed URL
One or more Origins

• Headers
• Signed URL
Forward Request Headers to the Origin
Cache Based on Header Values
Set Object Caching TTLs
Device Detection
None: optimized
Whitelist: specify headers to forward
All: dynamic content, no caching
GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE

HEAD
Identical to GET except that the
server MUST NOT return a
message-body in the response.
Used for obtaining meta-information
about the entity implied by the
request without transferring the
entity-body itself
POST
Used to request the origin
server to accept the entity
enclosed in the request as a
new subordinate of the
resource identified by the
Request-URI in the Request-
Line.
PUT
The fundamental difference
between the POST and PUT
requests is reflected in the different
meaning of the Request-URI.
PATCH
Used to apply partial modifications
to a resource
DELETE
Requests that the origin server
delete the resource identified by the
Request-URI
OPTIONS
Request for information about the
communication options available on
the request/response chain
identified by the Request-URI
GET
Requests for content from the
cache HTTP, HTTPS and RTMP
CloudFront Components: Behaviors, HTTP Methods

Minimize forwarded values
All forwarded headers are
used as part of the cache
key, which means it
dramatically reduces your
cacheability.

CloudFront device type headers
<?php
if ( has_post_thumbnail() ) {
// check if the post has a Post Thumbnail assigned
if ($_SERVER['CloudFront-Is-Mobile-Viewer'])
{the_post_thumbnail('small');}
else if ($_SERVER['CloudFront-Is-Tablet-Viewer'])
{the_post_thumbnail('medium');}
else
{the_post_thumbnail('large');}
}?>

1) Vary response based on User Agent.
Example: Desktop, Mobile, Tablet
2) Vary response based on Language.
Example: user would prefer Danish but will accept British
English and other types of English. (Accept-Language: da,
en-gb;q=0.8, en;q=0.7 )
3) Vary response based on Protocol.
Example: CloudFront-Forward-Proto detected and
customer sent different content based on connection type.
Mobile User
(CloudFront-Is-
Mobile-Viewer)
Desktop User
(CloudFront-Is-
Desktop-Viewer)
1
1
2
3
CloudFront Components: Behaviors, Headers

• Headers
• Signed URL
Forward Query Strings and Cookies to the Origin
?key=querystringparam
Set-Cookie Header
Vary Response Based on Query String/Cookie
Cache Multiple Copies of Your Object
Query String / Cookie as Cache Key
Forward All
Forward Whitelist

• Headers
• Signed URL
• Restrict Access to Content
• Subscription Content, Digital Rights, Etc.
• Canned and Custom Policies
• Application Creates Signed URL
• CloudFront caches based on Signed
URL or Signed Cookie

Customer Location
http://mysite.com/asset.mp4?&Expires=1357034400
5&Signature=nitfHRCrtziwO2HwPfWw~yYDhUF5EwRunQA-
j19DzZr vDh6hQ73lDx~-ar3UocvvRQVw6EkC~GdpGQyyOSKQim-
TxAnW7d8F5Kkai9HVx0FIu-
jcQb0UEmatEXAMPLE3ReXySpLSMj0yCd3ZAB4UcBCAqEijkytL6f
3fVYNGQI6&Key-Pair-Id=APKA9ONS7QCOWEXAMPLE
1) Request for Content first goes to an
authentication server to validate user
and generate a signed URL.
2) A signed URL is sent back as a 302
redirect from the auth server
3) Request to CloudFront made with
signed URL, authentication with policy
statement, and verification of content
freshness (hasn’t expired)
4) CloudFront authenticates policy
statement for signed URL, sets cache
key, and sends content to requestor
EC2 Auth Server
Send content to requestor via cache edge
www.mysite.com/asset.mp4
EC2 Auth Server
Authenticate URL, Policy Statement, and Expiration
CloudFront Logic
CloudFront Edge Cache
CloudFront Components: Behaviors, Signed URL

• Headers
• Signed URL
• CloudFront Shared Cert
• Custom Cert
• AWS Certificate Manager

• Headers
• Signed URL
HTTP and HTTPS: Viewers can use both
protocols.
Redirect HTTP to HTTPS: Viewers can
use both protocols, but HTTP requests
are automatically redirected to HTTPS
requests.
HTTPS Only: Viewers can only access
your content if they're using HTTPS.

• Headers
• Signed URL
Short TTL = Dynamic Content
Long TTL = Static Content
Reduce Load on Origin
If Modified Since
Min, Max, Default TTL’s

Expires headers from origin
Expires reflects when the cache must go back to the origin
server to see if the object has changed.
It is a fixed point in time and accuracy relies on clock
synchronization.
Expires: Fri, 1 Dec 2017 12:34:50 GMT

Cache-Control headers from origin
These directives give you fine-grained control over what is
cached and for how long (in seconds):
Cache-Control: max-age=300

Dynamic content? Cache it.
Use Cache-Control directives to minimize load on your origin:
- no-cache: cache & ask origin
- max-age=0: cache & ask origin
Other options:
- no-store: never cached at the edge nor by the browser
- private: never cached at the edge, but might be cached
by the browser

Set Min, Max, and Default TTLs for CloudFront
Min TTL Max TTLmax-age /
Expires
Browser Edge Cache
max-age /
s-maxage /
Expires
Max TTLmax-age /
Expires
max-age /
s-maxage /
Expires
Min TTL
Max TTL
max-age /
s-maxage /
Expires
Min TTLmax-age /
Expires

Introduce new styles without issuing invalidations.
Protect against browsers that don’t honor your
Cache-Control headers.
Version your assets
<link href="//assets.example.com/assets/v1/css/jumbotron-narrow.css“ rel="stylesheet">
<link href="//assets.example.com/assets/v2/css/jumbotron-narrow.css“ rel="stylesheet">
<link href="//assets.example.com/assets/css/jumbotron-narrow.css?<md5sum>“rel="stylesheet">

• Headers
• Signed URL
Accept-Encoding: gzip
Compresses and Serves Files
Optimizes Bandwidth Consumption
and Download Speed
Compresses Files with Header:
“Content-type” set

CloudFront Components: Restrictions, Errors, Tags
• Geographical Restriction
• White List or Black List
• Country Level Granularity
• No Additional Charges
• Caching Error Pages
• 4XX, 5XX Codes
• Cache Default Page
• Cache Custom Page

CloudFront Components: AWS WAF Web ACLs
Layer 7 Application
Protection
Fast Rule Propagation
Full Control Rules Set
Integration = Automation
Simple Pricing

CloudFront Regional Edge Caches
Europe
Frankfurt
North America
Northern VA
Oregon
Asia Pacific
Mumbai
Singapore
Sydney
Seoul
Tokyo
South America
São Paulo
Eleven Regional Edge Caches around the world..

CloudFront Regional Edge Caches
Origin
Regional Edge Cache
Reducing load on CloudFront origin resources
Origin
Edge Locations
Previous Architecture New Default Architecture

CloudFront Security and Compliance Features
• Compliance
• PCI DSS Level 1 Compliance
• HIPAA Eligible Service, for protected health information (PHI)
• ISO 9001, 27001, 27017, 27018
• Security Enhancements to your infrastructure
• Signed URL,Signed Cookies
• Enforce HTTPS to origin
• Support iOS ATS
• Support for TLSv1 .1 and TLSv1.2 between edge and origin
• Add/Modify Request Headers Forwarded From CloudFront to Origin
• Integration with AWS Certificate Manager (SNI Certs from Amazon)
• Integration with AWS WAF (web application firewall)
• Geographic Restriction
• IPv6 Support
• Perfect Forward Secrecy, Newer Ciphers

CloudFront Pricing: Competitive, Flexible Options
• On-demand, pay for use pricing
• Same pricing for Static and Dynamic
• Same pricing for HTTP / HTTPS
• Usage Commitment Options
• GB delivery model
• Free SSL/TLS certs with ACM
• No Platform Fees
• No Charges for DNS Queries to
Route 53 ALIAS Records to
CloudFront
PriceperGB
Data Transfer
Data Transfer
Economies of Scale

All
North America + Europe
North America + Europe + East and South East Asia*
Deliver Content Globally and Control Pricing to Fit Performance and Cost Objectives
*does not include India (4) or Australia (2) PoPs
CloudFront Components: Price Classes

Amazon CloudFront Pricing
EC2 instance
web app
server
Elastic/Application
Load Balancing
Amazon S3
Bucket
Standard Pricing Components without CloudFront
Request for Content and Data Transfer Directly to End User
Data Transfer/Processing ($/GB)
Requests ($/Requests) = Total Charge
$
$
$ = $$$

EC2 instance
web app
server
Elastic/Application
Load Balancing
Amazon S3
Bucket
Standard Pricing Components without CloudFront
Request for Content and Data Transfer to 3rd Party CDN
3rd Party CDN Charges
Data Transfer/Processing ($/GB)
Requests ($/Requests)
CDN
+
+ 3rd Party CDN Charges = Total Charge
$
$
$
$ = $$$$

$
EC2 instance
web app
server
Elastic/Application
Load Balancing
Amazon S3
Bucket
Standard Pricing Components with CloudFront
CloudFront +
CloudFront = Total Charge
$
$
$
= $

Application – Acceleration
 AWS Backbone Network
 Persistent TCP connections to origin
 TCP window scaling
 SSL/TLS optimizations (SSL Session Tickets, OCSP Stapling etc)
 HTTP/2

AWS Lambda: Serverless
Computing

AWS Lambda: Serverless computing
Run code without servers. Pay only for the compute time you consume. Be happy.
Triggered by events or called from APIs:
• PUT to an Amazon S3 bucket
• Updates to Amazon DynamoDB table
• Call to an Amazon API Gateway endpoint
• Mobile app backend call
• CloudFront requests
• And many more…
Makes it easy to:
• Perform real-time data processing
• Build scalable backend services
• Glue and choreograph systems


Benefits of AWS Lambda
Continuous
scaling
No servers to
manage
Never pay for idle
– no cold servers
(only happy
accountants)

AWS Lambda@Edge:
Serverless Edge Computing

Introducing Lambda@Edge
• Lambda@Edge is an extension of AWS Lambda that allows you to run
Node.js code at global AWS locations
• Bring your own code to the Edge and customize your content very close to
your users, improving end-user experience
Continuous
scaling
No servers
to manage
Never pay for idle
– no cold servers
Globally
distributed

CloudFront triggers for Lambda@Edge functions

CloudFront triggers for
Lambda@Edge functions
CloudFront cache
End user
Viewer request Origin request
Origin responseViewer response
 
 

Lambda@Edge events
• All Lambda@Edge invocations are synchronous
• Request events
• URI and header modifications can change the object being requested
• Viewer request can change the object being requested from the CloudFront
cache and the origin
• Origin request can change the object or path pattern being requested from the
origin
• Response events
• Origin response can modify what is cached and generate cacheable responses
to be returned to the viewer
• Viewer response can change what is returned to the viewer
CloudFront
cache
End user
Viewer request Origin request
Origin responseViewer response

Lambda@Edge functionality
• Read and write access to headers, URIs, and
cookies across all triggers
• Ability to generate custom responses from
scratch
• Access to make network calls to external
resources on origin-facing hooks

What else can I do with
Lambda@Edge?

Highly personalized websites
• Redirect viewers to the optimal
experience based on their location,
language preferences, and device type

Pretty URLs
• Rewrite the URL end user's request
to serve content without exposing
your team’s internal directory
structure and organization
• Provide customized experiences
without compromising consistency in
what your viewers see

Authorization at the Edge
• Inspect cookies or custom headers to
authenticate clients right at the Edge
• Enforce paywalls at the Edge to gate
access to premium content to only
authenticated viewers

Authorization at the Edge – how?
• Trigger: Viewer request
• Prerequisites
• The customer must have previously authenticated against your authoritative
service, resulting in some sort of authorization credential. Typically this is a
cookie.
• Inputs
• URL
• Authorization credential (cookie)
• Outputs
• Allow the request to succeed if the request is authorized. If not, either return
a 403 response or redirect to an authentication page

A/B testing
• ‘Flip a coin’ to select a
version of content
displayed to each user
on an asset level
• Set cookies to ensure
that users continue to
see the right versions
of content

let experimentUri;
if (headers.cookie) {
for (let i = 0; i < headers.cookie.length; i++) {
if (headers.cookie[i].value.indexOf(cookieExperimentA) >=
0) {
console.log('Experiment A cookie found');
experimentUri = pathExperimentA;
break;
} else if
(headers.cookie[i].value.indexOf(cookieExperimentB) >= 0) {
console.log('Experiment B cookie found');
experimentUri = pathExperimentB;
break;
}
}
}

if (!experimentUri) {
console.log('Experiment cookie has not been found.
Throwing dice...');
if (Math.random() < 0.75) {
experimentUri = pathExperimentA;
} else {
experimentUri = pathExperimentB;
}
}
request.uri = experimentUri;
console.log(`Request uri set to "${request.uri}"`);
callback(null, request);
};

Limited access to content
• Enforce timed access to content
at the edge
• Make a call to an external
authentication server to confirm
if a user’s session is still valid
• Forward valid requests to the
origin, and serve redirects to
new users to login pages

Response generation at the Edge
Generate an HTTP response to end
user requests arriving at AWS locations:
• Generate customized error pages
and static websites directly from Edge
locations
• Combine content drawn from multiple
external resources to dynamically
build websites at the Edge

Deep Dive on Accelerating Content, APIs, and Applications with Amazon CloudFront and Lambda@Edge

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Deep Dive on Accelerating Content, APIs, and Applications with Amazon CloudFront and Lambda@Edge

Similar to Deep Dive on Accelerating Content, APIs, and Applications with Amazon CloudFront and Lambda@Edge (20)

More from Amazon Web Services

More from Amazon Web Services (20)

Deep Dive on Accelerating Content, APIs, and Applications with Amazon CloudFront and Lambda@Edge