Not having to worry about servers can save you time and effort. Today with a serverless platform, you can globally distribute your web-application to run on dozens of data centers across the planet, with your customers being served from the one nearest to them. In this session to learn how you can combine forces -- with Drupal as a powerful Headless CMS, AWS Lambda@Edge providing serverless compute functionality, and Amazon CloudFront accelerating content through its global network. In this presentation, we look at architecture, integration examples, and best practices for some of the most popular use-cases from across different channels such as web, mobile, and social media. Learn more: https://aws.amazon.com/cloudfront/

1. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Prateek Yadav, Software Development Engineer
Vasanth Kumararajan, Technical Program Manager
Woodrow Arrington, Sr. Product Manager Technical
04.11.18
Making Headless Drupal Serverless

2. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
What is covered in this session?
• Media Customer Challenges
• Headless Drupal
• Amazon CloudFront
• AWS Lambda@Edge
• Live Demo

3. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Media Company Challenges
Scalability
Performance
Security
Personalization
Flexibility Financial

4. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Typical Monolith Architecture
Authentication and
authorization
Content management
and processing
Localization
and personalization

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

6. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Trending towards Headless Drupal
Traditional Headless / Decoupled
Frontend
Backend
Backend
Frontends

7. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Multi-Endpoint
Headless Drupal Helps Solve
PerformanceFlexibility

8. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
… how can I address some of the other
challenges mentioned?

9. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
… first let’s talk about being serverless

10. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
No Server
Management
Flexible
Scaling
Never Pay for
Idle Time
Built-in Availability
and Fault Tolerance
What does it mean to be serverless?

11. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
What is AWS Lambda?
Changes in data
state
Requests to
endpoints
Changes in
resource state
1 2 3 4

12. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
… what if you could run your Lambda
functions even closer to your viewers?

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

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

15. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Architecture (Simple, But Works)
Compute
viewer
StorageDatastore

16. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Origin
Basic AWS Regional Deployment
Compute
Database
Storage

17. © 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

18. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
CloudFront: More than just byte delivery
Performance ScalabilityGlobal Reach Security Programmable Cost Effective

19. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Performance
Global Network & AWS backbone infrastructure
Conduct TCP handshakes closer to viewers
Keep-alive connections to reduce round-trip times (RTT)
Request collapsing
Fast content invalidations
Static + Dynamic

20. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Security
Access Control
• Origin Access Identity (OAI)
• Signed URLs / Cookies
• Geo blocking
Encryption
• Advanced protocols & ciphers
• Half / Full bridge HTTPS connections
• Certificate stapling (OCSP)
Compliance
• PCI
• HIPAA
• ISO
Integrations
• AWS Certificate Manager
• AWS Shield
• AWS WAF

21. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
CloudFront Helps Solve
Scalability
PerformanceSecurity
Cost Effective

22. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
… let’s now talk about Lambda@Edge

23. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Taking AWS Lambda to the Edge
Changes in data
state
Requests to
endpoints
Changes in
resource state
1 2 3 4

24. © 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

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

26. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Lambda@Edge
Globally
Distributed
Bring your own code to the Edge to improve viewer experience
Serverless
Compute
Programmable
CDN

27. © 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

28. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
From Monolithic to Serverless Microservices
Amazon
CloudFront
Authentication and
authorization
Content management
and processing
Localization
and personalization
Lambda@Edge FunctionsUser Agents HTTP Origins

29. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Lambda@Edge Helps Solve
Personalization
Flexibility
Paywalls &
Authorization

30. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Media Company Challenges
Scalability
Performance
Security
Personalization
Flexibility Financial

31. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Media Company Website Dynamic Personalized
Content
Authentication
Dynamic News
Content
Static Content
(images,JS,CSS, …)
Customized Local
Content

32. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
DEMO

33. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
… Lets dive deep into Lambda@Edge

34. © 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

35. © 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

36. © 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

37. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
VIEWER REQUEST: AUTHORIZATION
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
User database

38. © 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

39. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
{
"iss": "https://idp.example.com",
"client_id": "exampleclient",
"sub": "vkumarar",
"scope": {
"compute": "2018-05-11T00:00:00Z",
"edge": "2018-05-09T00:00:00Z",
"language": "ja"
},
}
VIEWER REQUEST: STATELESS AUTH
Example JWT payload:
Private claims for the user
interests in news artciles

40. © 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

41. © 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
Dynamically select an origin based on request headers
Implement pretty URLs by rewriting the origin URL
Generate responses that can be cached

42. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
ORIGIN REQUEST: Content Aggregation
Example: News app landing page
Client: Each user has a preference for articles
http://yournewsaggregator.com/
Function:
• Validate and parse the JWT
• Fetches the relevant articles from Drupal
• Sends the aggregated response to the client CloudFront
cache
Viewer
Request
Origin
Request
Viewer

43. © 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

44. © 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..."
}, { ... } ]

45. © 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
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);
});
});
};

46. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
DEMO

47. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
… so what are all the things you can do
with Lambda@Edge?

48. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
• Highly Personalized Websites
• Response Generation at Viewer Request
• URL Rewrites
• Access Control at the Edge
• Remote Network Calls
• A/B Testing
• Content-Based Dynamic Origin Selection

49. © 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

50. © 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

51. © 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

52. © 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

53. © 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

54. © 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);
}
};

55. © 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

56. © 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

57. © 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
Europe origin Europe app DB
home-region=eu ?
APAC origin APAC app DB
Cache Behavior
/app
Origin Request
Event

58. © 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?

59. © 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?

60. © 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
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);
};

61. © 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

62. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Media Company Challenges
Scalability
Performance
Security
Personalization
Flexibility Financial

63. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Getting Started Resources
Amazon CloudFront Getting Started
https://aws.amazon.com/cloudfront/getting-started/
AWS Lambda@Edge
https://aws.amazon.com/lambda/edge/
Content Delivery AWS Blog Channel
https://aws.amazon.com/blogs/networking-and-content-delivery/
Articles with sample code and step by step guides for:
• Accelerating Drupal with Amazon CloudFront
• Resizing Images on the Fly with Lambda@Edge
• Authorization@Edge using JSON Web Tokens using Lambda@Ed
• and more…

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