Making Serverless Headless - Drupal with AWS Lambda@Edge & Amazon CloudFront

AWS Lambda@Edge allows you to run code closest to your end customers. In addition to being a serverless platform, it globally distributes your web-application to run out of dozens of AWS data centers across the planet, with your customers being served from the one nearest to them. Come join us for this session to learn how you can combine its forces -- with Drupal as powerful Headless CMS, Lambda@Edge running Javascript frontend framework (like Angular, Ember and React), and CloudFront as Content Delivery Network with built in DDoS protection.

A seamless integration between Drupal, Lambda@Edge and CloudFront, delivers lowest latency and personalized experience to your end customers, where ever they are on the planet. Offering ease-of-maintenance, out-of-the-box DDoS protection, and scale.

In this session, we will look at architecture, integration examples, and best practices for some of the most popular use-cases from across different channels – web, mobile, social media, chatbots, wearables, VR/AR, etc. Experience with AWS Lambda, AWS Lambda@Edge, Amazon CloudFront and Drupal would be valuable, but not necessary to attend this session.

Related:
https://aws.amazon.com/lambda/edge/
https://aws.amazon.com/cloudfront/
https://www.drupal.org/

Transcript

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 Performance Flexibility
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 CloudFront AWS 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 Storage Datastore
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 Scalability Global 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 Performance Security 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 Functions User 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 Request Viewer 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 template Cached 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!