Presentation from the AWS user meetup in Seattle, WA (March 2018)

1. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
George John, AWS Product Manager
03.15.18
AWS Meetup
Taking Serverless to the Edge
Archit Jain, Software Development Engineer

2. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
What is covered in this session
• What is serverless compute?
• Why do serverless at the edge ?
• How can you do it with Lambda@Edge ?

3. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
No servers to provision
or manage
Scales with usage
Never pay for idle Built-in availability
and fault tolerance
Serverless means…

4. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
How it works
EVENT SOURCE SERVICES (ANYTHING)
Changes in data
state
Requests to
endpoints
Changes in
resource state
FUNCTION

5. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
… but what if you could run your Lambda
functions at the Edge?

6. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Amazon CloudFrontAWS Lambda
Lambda@Edge
Lambda@Edge

7. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
CloudFront: Global Content Delivery Network
§ Accelerate static and dynamic content
§ Global Infrastructure
§ Highly Secure
§ Massively Scalable
§ Self Service
§ Priced to Minimize Cost

8. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
114 Points of Presence (103 Edge locations + 11 Regional Edge Caches)

9. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Origin
Amazon CloudFront
Compute
Database
Storage

10. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Amazon CloudFront
Origin
AWS Location
AWS Location
AWS Location
AWS Location
AWS Location
AWS Location

11. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
CloudFront + Lambda@Edge
Origin
AWS Location
AWS Location
AWS Location
AWS Location
AWS Location
AWS Location

12. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Lambda@Edge
Globally
distributed
No servers to provision
or manage
Scales with usage Never pay for idle Built-in availability
and fault tolerance
Bring your own code to the Edge to improve viewer experience

13. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Write once, run Lambda functions globally
N Virginia
AWS Location
AWS Location
AWS Location
AWS Location
AWS Location
AWS Location

14. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
CloudFront events for Lambda@Edge
CloudFront
cache
Viewer Response Origin Response
Origin
Origin Request
Viewer
Viewer Request

15. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Lambda@Edge Programming Model
Event Driven
• Functions are associated with events
• viewer-request -> my_function:1
• Functions are invoked when these events happen
• viewer-request is run when CloudFront receives a request
• Functions are invoked with the details of the event as input
• my_function:1 is invoked with the request object
• Functions can return results back to the caller
• callback(request)

16. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
exports.handler = (event, context, callback) => {
/* viewer-request and origin-request events
* have the request as input */
const request = event.Records[0].cf.request;
/* viewer-response and origin-response events
* have the response as input */
/* const response = event.Records[0].cf.response; */
/* Do the processing – say add a header */
/* When I am done I let CloudFront what to do next */
callback(null, request);
}
Lambda@Edge Programming Model

17. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Taking Serverless to the Edge

18. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
From Monolith
Authentication and
authorization
Content management
and processing
Localization, internationalization,
and personalization

19. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
From Monolith
Authentication and
authorization
Content management
and processing
Localization, internationalization,
and personalization
Application code

20. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
To Microservices
Amazon
CloudFront
Authentication and
authorization
Content management
and processing
Localization, internationalization,
and personalization
Lambda@Edge FunctionsUser Agents HTTP Origins

21. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
VIEWER REQUEST EVENTS
CloudFront
cache
User Agents
Viewer Request
HTTP Origins
Viewer Response Origin Response
Origin Request
Viewer Response Origin Response
Origin RequestViewer Request

22. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
VIEWER REQUEST EVENTS
Executed on every request before CloudFront’s cache is checked
Modify cache key (URL, cookies, headers, query string)
Perform stateless authentication and authorization checks
Network calls at viewer request
Generate responses that will not be cached

23. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
How STATELESS AUTH works
User Agent
User credentials
Identity provider
(IdP)
JSON Web Token
(JWT)
Legacy application
CloudFront distribution
www.example.com
JWT
JWT public key
Access decision
Origin applicationJWT
S3 Bucket
?
?

24. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
VIEWER REQUEST: STATELESS AUTH
JWT
JWT public key
Viewer Request Event
User Agent CloudFront distribution
www.example.com
JWT
HTTP 403, 3XX, etc.
NO
Access decision
Legacy application
S3 Bucket
Origin application
OK

25. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
VIEWER REQUEST: STATEFUL AUTH
Viewer Request Event
User Agent CloudFront distribution
www.example.com
NO
Paywall message,
403, redirect, etc.
$
Entitlement service
HTTP request
Access decision
HTTP Origins
OK

26. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
VIEWER REQUEST: REDIRECT
• Redirect to a login page for non-authenticated users
• In viewer-request function validate the cookie
• If cookie is expired or not present, redirect to login page
CloudFront
cache
Viewer Request
Origin
Origin Request
Viewer

27. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
'use strict';
exports.handler = (event, context, callback) => {
/*
* Generate HTTP redirect response with 302 status code and Location header.
*/
const response = {
status: '302',
statusDescription: 'Found',
headers: {
location: [{
key: 'Location',
value: 'http://mydomain.com/login.html',
}],
},
};
callback(null, response);
};
Example - Redirect

28. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
ORIGIN REQUEST EVENTS
CloudFront
cache
User Agents
Viewer Request
HTTP Origins
Viewer Response Origin Response
Origin Request
Viewer Response Origin Response
Viewer Request Origin Request

29. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
ORIGIN REQUEST EVENTS
Executed on cache miss, before a request is forwarded to the origin
Make one or more external network calls (30s timeout)
Dynamically select an origin based on request headers
Implement pretty URLs by rewriting the origin URL
Generate responses that can be cached

30. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
How template rendering works?
<h1>{ page.title }</h1>
{{ for section in page.sections }}
<h2>{ section.title }</h2>
<p>{ section.body }</p>
{{ endfor }}
"page": {
"title": "Hello",
"sections": [ {
"title": "Introduction",
"body": "The quick..."
}, { ... } ]

31. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
ORIGIN REQUESTS: Template Rendering
(Body Generation)
User Agent CloudFront distribution
www.example.com
Cache Behavior
/blog
Origin Request
Event
S3 Bucket
blog-templates.s3.amazonaws.com
DynamoDB table
blog-posts
Outbound
network calls
Rendered templateCached response

32. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
const templateBucket = 'blog-templates-123456789012';
const postTable = 'blog-posts';
var AWS = require('aws-sdk');
var Mustache = require('mustache');
var s3 = new AWS.S3({region: 'us-east-1'});
var documentClient = new AWS.DynamoDB.DocumentClient({
region: 'us-east-1'});
exports.handler = (event, context, callback) => {
const request = event.Records[0].cf.request;
const response = {
status: '200',
statusDescription: 'OK',
headers: {
'cache-control': [{
key: 'Cache-Control',
value: 'max-age=2628000, public’
}],
'content-type': [{
key: 'Content-Type',
value: 'text/html; charset=utf-8’
}]}};
ORIGIN REQUEST: BODY GENERATION CODE
const ddbParams = {
TableName: postTable,
Key: { slug: request['uri'].slice(1) }};
documentClient.get(ddbParams, function(err, resp) {
if (err) {
callback(err, null);
return;
}
const template = resp['Item']['template'];
const data = resp['Item']['data'];
const s3Params = {
Bucket: templateBucket,
Key: template };
s3.getObject(s3Params, function(err, s3resp) {
if (err) {
callback(err, null);
return;
}
const body = s3resp.Body.toString('utf-8');
response.body = Mustache.render(body, data);
callback(null, response);
});
});
};

33. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
ORIGIN REQUEST: Content Aggregation
Example: Weather App Landing page
Client: Each user has a set of cities.
http://example.com/weather?cities=Seattle;NYC
Function:
• Parses the URL
• Fetches the relevant data
• Sends the aggregated response to the client (app)
CloudFr
ont
cache
Viewer
Request
Origin
Request
Viewer

34. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
function getCityForecast(request) {
return new Promise((resolve, reject) => {
https.get(request.uri, (response) => {
let content = '';
response.setEncoding('utf8');
response.on('data', (chunk) => { content += chunk; });
response.on('end', () => resolve({ city: request.city, forecast: content }));
}).on('error', e => reject(e));
});
}
const uriSplit = uri.split('/');
const cities = uriSplit[2].split(':');
const forecasts = [];
cities.forEach((cityName) => {
const cityForecastUri = citiesBaseUri + cityName;
forecasts.push({ city: cityName, uri: cityForecastUri })
});
ORIGIN REQUEST: Content Aggregation

35. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Promise.all(forecasts.map(getCityForecast)).then((ret) => {
console.log('Aggregating the responses:n', ret);
const response = {
status: '200', /* Status signals this is a generated response */
statusDescription: 'OK',
headers: {
'content-type': [{
key: 'Content-Type',
value: 'application/json',
}],
'content-encoding': [{
key: 'Content-Encoding',
value: 'UTF-8',
}],
},
body: JSON.stringify(ret, null, 't'),
};
console.log('Generated response: ', JSON.stringify(response));
callback(null, response);
ORIGIN REQUEST: Content Aggregation

36. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
PRETTY URLS FOR USER/API EXPERIENCE
https://tiles.example.com/zoom/x/y.jpg
S3 Bucket
tiles-v1.s3.amazonaws.com
Legacy Service
old-tile-service.example.net
Elastic Load Balancer
tile-service-123456.us-east-1
.amazonaws.com

37. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
ORIGIN REQUESTS : PRETTY URLS
https://tiles.example.com/zoom/x/y.jpg
https://tiles-origin.s3.amazonaws.com/f5fdc6f658a49284b.jpg
Origin Request Event
originPath = sha256(requestPath)
CloudFront cache
Cache key: tiles.example.com/zoom/x/y.jpg
Cached response

38. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
ORIGIN REQUESTS: IMAGE PROCESSING
User Agent CloudFront distribution
www.example.com
Origin Request
Event
S3 Bucket
image-originals.s3.amazonaws.com
GET
/full-resolution image
Resized image based on request
configurations e.g. Device Type

39. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
ORIGIN REQUEST: ORIGIN SELECTION
• Multiple origin setup
• Latency: Talk to the origin closest to the viewer
• Load balance across origins
• Controlled rollout of changes at origin
• A/B Testing of new features
• Blue/Green origin deploys
• Migrating between origins
• Including on-premise to cloud
• Search Engine Optimization
• Serve human and web crawler traffic from separate origins

40. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Origin Selection – A/B Testing
Example: You want to test a new feature. It is only deployed to one of your origins.
In the function:
1. Check to see if this is a active session. (Say, using a cookie.)
2. For active sessions, set the origin based on the value in the cookie.
3. For a new session, decide whether to show A or B variant. And set the origin accordingly.
CloudF
ront
cache
Origin
Request
Viewer
Origin B
Origin A

41. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
"s3": {
"domainName": "green-bucket.s3.amazonaws.com”,
"path": "/originPath",
"authMethod": "origin-access-identity",
"region": "us-east-1",
"customHeaders": {
"my-custom-origin-header": [
{
"key": "My-Custom-Origin-Header",
"value": "test-value”
}
]
}
}
Origin Selection
• Origin is present as part of request
• event.Records[0].cf.request.origin
• Modified Origin should also be part of the request
structure returned

42. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
exports.handler = (event, context, callback) => {
const request = event.Records[0].cf.request;
desiredOrigin = decide(request);
/* Set custom origin fields*/
request.origin = {
custom: {
domainName: desiredOrigin,
port: 443,
protocol: 'https',
}
};
request.headers['host'] = [{ key: 'host',
value: desiredOrigin }];
callback(null, request);
};
Example – A/B Testing
function decide(request) {
if (request.headers[‘my-session-cookie’]) {
cookie = request.headers[‘my-session-
cookie’].value;
return decodeOrigin(cookie);
} else {
return chooseOrigin(request);
}
};

43. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
TRANSPARENT GLOBAL EXPANSION
Region A
customers
Region A
deployment
Region B
customers Region B
deployment
https://saas.example.com

44. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
ORIGIN REQUEST: ORIGIN SELECTION
id user
1 alex
2 bob
3 joe
4 jane
User database
200 OK
Application
User Agent
POST /login
user=jane&pass=***
home-region
na
eu
ap
eu
Set-Cookie: home-region=eu

45. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
ORIGIN REQUEST: ORIGIN SELECTION
User Agent CloudFront distribution
www.example.com
North America
origin
User DB
Cache Behavior
/login
North America
app DB
hom
e-region=na ?
Europe origin Europe app DB
home-region=eu ?
APAC origin APAC app DB
home-region=ap ?
Cache Behavior
/app
Origin Request
Event
Set-Cookie

46. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
ORIGIN REQUEST: ROUTE ON USER AGENT
User Agents
Desktop
Mobile
Bots and
crawlers
CloudFront distribution
www.example.com
Origin Request
Event
Mobile optimized
app
Client-rendered
app
Server-rendered
app
Cloudfront-Is-Mobile-Viewer?
Cloudfront-Is-Desktop-Viewer?
Cloudfront-Is-Tablet-Viewer?
User-Agent?

47. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
ORIGIN REQUEST: GENERATE REDIRECT
User Agent CloudFront distribution
www.example.com
HTTP redirect
www.example.com/de
Origin Request
Event
Cloudfront-Viewer-Country?
Accept-Language?

48. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
'use strict';
const originDomainNames = {
'origin_1': 'origin.us-east-1.example.com',
'origin_2': 'origin.eu-west-1.example.com'
};
const defaultOrigin = 'origin_1';
function chooseOrigin(headers) {
/* Parse cookies, inspect headers, etc. */
if (condition1) {
return 'origin_1';
} else if (condition2) {
return 'origin_2';
} else {
return default_origin;
}
}
ORIGIN REQUEST: CUSTOM ROUTING CODE
exports.handler = (event, context, callback) => {
const request = event.Records[0].cf.request;
const headers = request.headers;
const selectedOrigin = chooseOrigin(headers);
/* Modify the request's `origin` object. */
request.origin = {
custom: {
domainName: originDomainNames[selectedOrigin],
keepAliveTimeout: 5000,
path: '/',
port: 443,
protocol: 'https',
readTimeout: 5000,
sslProtocols: ['TLSv1', 'TLSv1.1']
}
};
callback(null, request);
};

49. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
ORIGIN RESPONSE EVENTS
CloudFront
cache
User Agents
Viewer Request
HTTP Origins
Viewer Response Origin Response
Origin Request
Viewer Response
Origin RequestViewer Request
Origin Response

50. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
ORIGIN RESPONSE EVENTS
Executed on cache miss, after a response is received from the origin
Make external network calls (30s timeout)
Modify the response headers prior to caching

51. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
'use strict';
exports.handler = (event, context, callback) => {
const response = event.Records[0].cf.response;
const headers = response.headers;
const headerName = 'Strict-Transport-Security';
const headerValue = 'max-age=31536000; includeSubDomains';
headers[headerName.toLowerCase()] = [{
key: headerName,
value: headerValue
}];
callback(null, response);
};
ORIGIN RESPONSE: INJECT HEADERS
Content-Type
Cache-Control
HTTP Strict Transport
Security (HSTS)
Content-Security-Policy
and more!

52. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
VIEWER RESPONSE EVENTS
CloudFront
cache
User Agents
Viewer Request
HTTP Origins
Viewer Response Origin Response
Origin Request
Origin Response
Origin RequestViewer Request
Viewer Response

53. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
VIEWER RESPONSE EVENTS
Executed on all requests, after a response is received from the origin or
cache
Modify the response headers without caching the result
Make external network calls

54. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
VIEWER RESPONSE: SET USER COOKIES
User Agent
CloudFront distribution
www.example.com
CloudFront cache Origin fetch
Cache miss
Viewer response event
const sid = uuidv4();
headers['set-cookie'].push({
Key: 'Set-Cookie',
Value: 'sessionid=' + sid });

55. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Demo

56. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Thank you!