Slide 1

Slide 1 text

© 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

Slide 2

Slide 2 text

© 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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

© 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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

© 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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

© 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

Slide 18

Slide 18 text

© 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

Slide 19

Slide 19 text

© 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

Slide 20

Slide 20 text

© 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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

© 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

Slide 24

Slide 24 text

© 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

Slide 25

Slide 25 text

© 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

Slide 26

Slide 26 text

© 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

Slide 27

Slide 27 text

© 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

Slide 28

Slide 28 text

© 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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

© 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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

© 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

Slide 35

Slide 35 text

© 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

Slide 36

Slide 36 text

© 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

Slide 37

Slide 37 text

© 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

Slide 38

Slide 38 text

© 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

Slide 39

Slide 39 text

© 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

Slide 40

Slide 40 text

© 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

Slide 41

Slide 41 text

© 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

Slide 42

Slide 42 text

© 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

Slide 43

Slide 43 text

© 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

Slide 44

Slide 44 text

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. How template rendering works?

{ page.title }

{{ for section in page.sections }}

{ section.title }

{ section.body }

{{ endfor }} "page": { "title": "Hello", "sections": [ { "title": "Introduction", "body": "The quick..." }, { ... } ]

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

© 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

Slide 49

Slide 49 text

© 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

Slide 50

Slide 50 text

© 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

Slide 51

Slide 51 text

© 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

Slide 52

Slide 52 text

© 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

Slide 53

Slide 53 text

© 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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

© 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

Slide 56

Slide 56 text

© 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

Slide 57

Slide 57 text

© 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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

© 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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

© 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…

Slide 64

Slide 64 text

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