The document discusses how websites can be built using a serverless architecture on AWS. It begins with an overview of serverless computing and then describes how the major components of a typical three-tier web application (presentation, logic, and data layers) can be implemented using serverless AWS services like S3, Lambda, API Gateway, DynamoDB, and Cognito. It then provides an example of a serverless photo tagging website built with these services. The document concludes with recommendations for additional tools like Amplify that can help simplify the development of serverless websites.

1. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Boaz Ziniman - Technical Evangelist
Amazon Web Service
How Websites go Serverless?
ServerlessDays Tel Aviv – June 2019
@ziniman ziniman

2. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

3. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

4. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

5. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

6. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

7. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

8. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
What is
Serverless?
Build and run applications
without thinking about servers

9. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
What is serverless?
No infrastructure provisioning,
no management
Automatic scaling
Pay for value Highly available and secure

10. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Websites architecture

11. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Three-tier web application architecture
https://d0.awsstatic.com/whitepapers/AWS_Serverless_Multi-Tier_Architectures.pdf
Presentation Tier Logic Tier Data Tier
Website Web Server Database

12. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Here is what that translates to in real life
http://media.amazonwebservices.com/architecturecenter/AWS_ac_ra_web_01.pdf

13. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Serverless Website?

14. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Web application
Amazon S3Amazon
CloudFront
Amazon API
Gateway
Dynamic content in AWS
Lambda
Data stored in Amazon
DynamoDBAmazon
Cognito

15. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Serverless web app security
Amazon S3Amazon
CloudFront
Amazon API
Gateway
Dynamic content in AWS
Lambda
Data stored in Amazon
DynamoDBAmazon
Cognito
• Origin Access Identity
(OAI)
• Geo-Restriction
• Signed Cookies
• Signed URLs
• DDOS Protection
• Bucket Policies
• ACLs
• Throttling
• Caching
• Usage Plans
• ACM
RoleRole

16. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Multi-Region with API Gateway
AWS Cloud
Regional
API
Endpoint
us-east-1
Regional
API
Endpoint
eu-west-1
api.mycorp.com
CNAME
CNAME
Amazon API
Gateway
AWS Lambda
Amazon API
Gateway
AWS Lambda
Amazon
Route 53

17. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
http://bit.ly/ServerlessShop
https://github.com/patrick-michelberger/serverless-shop

18. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Demo – https://reko.ziniman.com
https://github.com/ziniman/aws-serverless-website-photo-tagging

19. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Amazon
Cognito
Serverless Website – reko.ziniman.com
JavaScript
SDK
https://reko.ziniman.com
• Write images into Images Bucket
• Read list of images
• Read data from DynamoDB
Static Site
Bucket
Images Bucket
Lambda
Function
Role
Amazon
DynamoDB
Amazon
CloudFront
Amazon
Rekognition

20. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Serverless Website – reko.ziniman.com
JavaScript
SDK
• Read image from Images Bucket
• Execute Rekognition detect_moderation_labels()
• Execute Rekognition detect_labels()
• Write data to DynamoDB• Write images into Images Bucket
• Read list of images
• Read data from DynamoDB
Amazon
Cognito
Static Site
Bucket
Images Bucket
Lambda
Function
Amazon
DynamoDB
Amazon
CloudFront
Amazon
Rekognition
Role
Role

21. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Serverless Website – reko.ziniman.com
JavaScript
SDK
Static Site
Bucket
Images Bucket
Amazon
DynamoDB
Amazon
CloudFront
Lambda
Function
Amazon
RekognitionAmazon API
Gateway

22. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Serverless Website – reko.ziniman.com
JavaScript
SDK
[
{"photo_id": "IMG_2018920-213126787.jpg”},
{"photo_id": "IMG_2018920-213320377.jpg"}
]
Static Site
Bucket
Images Bucket
Amazon
DynamoDB
Amazon
CloudFront
Lambda
Function
Amazon
RekognitionAmazon API
Gateway

23. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Too complicated?

24. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
• Open Source Developer Toolchain
• Command Line Interface (CLI)
• JavaScript Framework
• UI Components
• Amplify Console
Additional tools for Serverless Websites
• Create a flexible API to securely
access, manipulate, and combine
data
• Uses GraphQL to get exactly the
data you need.
• Local data access when devices go
offline
AWS Amplify AWS AppSync

25. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Where to start?
• https://aws.amazon.com/serverless/
• https://aws.amazon.com/lambda/
• https://aws-amplify.github.io/
• https://aws-amplify.github.io/docs/js/react
• https://github.com/ziniman

26. © 2019, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Thank You!
Boaz Ziniman
Technical Evangelist - Amazon Web Service
@ziniman ziniman