This document provides instructions for building a serverless web application on AWS in 30 minutes. It includes an overview of the AWS services that will be used - S3 for static hosting, API Gateway, Lambda, DynamoDB, and CloudFront. The agenda outlines setting up S3, CloudFront, DynamoDB, Lambda, and API Gateway. Code samples and screenshots are provided to demonstrate configuring the services and integrating them to build a serverless web app that retrieves and displays data from DynamoDB through API Gateway and Lambda.

1. BANGKOK

2. Workshop
Build Serverless Web Application in 30
mins

3. Vassanon Chotsittirit
COMMUNITY LEADER AND SOFTWARE ENGINEER
Favorite AWS Services: Lambda, Step
Function
Nattawat Kitticharoenjit
COMMUNITY LEADER AND SOFTWARE ENGINEER
Favorite AWS Services: Lambda, DynamoDB

4. Today you will get
Lambda DynamoDB
S3
(Static Web Hosting)
API Gateway
Cloudfront
Static Web Application and services on AWS

5. • AWS Service Overview
• Walkthrough Architecture
• Workshop
Agenda

6. is an object storage service that offers industry-leading scalability,
data availability, security, and performance.
Features
- Unlimit Storage
- Durability 99.999999999% (11 9’s)
- Availability 99.99%
- Host a static website
S3 (Simple Storage Service)
Reference: https://aws.amazon.com/s3/

7. Amazon CloudFront is a fast content delivery network (CDN)
service that securely delivers data, videos, applications, and
APIs to customers globally with low latency, high transfer speeds, all within
a developer-friendly environment
You can get started with the Content Delivery Network
in minutes
Also support caching at edge location
AWS CloudFront
Reference: https://aws.amazon.com/cloudfront/

8. is a compute service (Function as a Service) that
lets you run code without provisioning or managing servers.
Scalability
AWS Lambda executes your code only when needed and scales
automatically, from a few requests per day to thousands per second.
Pay per use
You pay only for the compute time you consume
there is no charge when your code is not running.
AWS Lambda
Reference: https://aws.amazon.com/lambda/

9. • Node.js version (8.10, 10, 12)
• Python version (2.7, 3.6, 3.7, 3.8 )
• Ruby version (2.5)
• Java version (8, 11)
• Go version (1.x)
• .Net Core 2.1
• Custom runtime with lambda layer
Lambda Runtimes
Reference: https://docs.aws.amazon.com/lambda/latest/dg/lambda-runtimes.html

10. Lambda Working with other services
Reference: https://docs.aws.amazon.com/lambda/latest/dg/lambda-services.html
These services can trigger lambda.

11. is a fully managed service that makes it easy for developers
to create, publish, maintain, monitor, and secure APIs at any scale.
With a few clicks in the AWS Management Console,
you can create REST and WebSocket APIs that act as a
“front door” for applications to access data, business logic,
or functionality from your backend services,
such as code running on AWS Lambda
AWS API Gateway
Reference: https://aws.amazon.com/api-gateway/

12. is a key-value and document database (NoSQL)
that delivers single-digit millisecond performance at any scale.
DynamoDB can handle more than 10 trillion requests per day and can
support peaks of more than 20 million requests per second.
it is serverless with no servers to provision, patch,
or manage and no software to install, maintain, or operate.
AWS DynamoDB
Reference:https://aws.amazon.com/dynamodb/

13. Walkthrough Architecture

14. Client S3
(Static Web Hosting)
Architecture
Frontend
Backend

15. To use S3 for a static website, you simply upload files to an S3 bucket and
configure your S3 bucket for web hosting. On a static website, individual
webpages include static content. They might also contain client-side
scripts.
S3 Static Website
Not Support - Dynamic website
(server-side processing)
• PHP
• JSP
• ASP.NET
• Etc.
Support - Static website
(client-side processing)
• React
• Angular
• Vue.js
• Jquery
• etc.
Reference: https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html

16. Client S3
(Static Web Hosting)
Cloudfront
Architecture
Frontend
Backend

17. Client
DynamoDB
S3
(Static Web Hosting)
Cloudfront
Architecture
Frontend
Backend

18. Client
Lambda DynamoDB
S3
(Static Web Hosting)
Cloudfront
Architecture
Frontend
Backend

19. Client
Lambda DynamoDB
S3
(Static Web Hosting)
Api Gateway
Cloudfront
Architecture
Frontend
Backend

20. https://bit.ly/37w0w0v
Download Source Code
Wifi Password
SSID: aws_communityday2019_2G / 5G
Pass: awsusergroupthailand

21. Let Start Workshop!!

22. 1. Create S3
• Edit “Block public access” by selecting check box to block
all public access

23. 1. Create S3
• Delete Bucket policy by selecting delete button on the right slide
• At this step, your s3 web point must access deny
all request from internet

24. 2. Create CloudFront
• Select “create Distribution” to create new CloudFront
distribution.

25. 2. Create CloudFront

26. 2. Create CloudFront
• Following this selection which create OAI (origin access identity)
To update S3 bucket policy and allow CloudFront access s3 private bucket
• Other options, you can leave it as default

27. • To restrict access to in your Amazon S3 bucket
• by creating an origin access identity (OAI) and associate it with your
distribution.
• You configure permissions so that CloudFront can use the OAI to access
and serve files to your users
• Users can't use a direct URL to the S3 bucket to access a file there.
CloudFront OAI (origin access identities)
Reference:https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html

28. {
"Version": "2008-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "1",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity
E3GSZAVY76LRQR"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::acd2019bkk-workshop-21/*"
}
]
}
Example S3 Bucket Policy
Reference: https://docs.aws.amazon.com/AmazonS3/latest/dev/example-bucket-policies.html

29. 3. Create DynamoDB

30. 3. Create DynamoDB

31. 3. Create DynamoDB

32. 3. Create DynamoDB

33. 3. Create DynamoDB
• Copy data from sample_data.json in source_code.zip

34. 5. Create Lambda

35. 5. Create Lambda

36. 5. Create Lambda
• These policies are attached to an Lambda CommunityDay role

37. /* This policy allow lambda to create and put log to Cloudwatch */
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"logs:CreateLogGroup",
"logs:CreateLogStream",
"logs:PutLogEvents"
],
"Resource": "*"
}
]
}
Example Lambda Function Execution Policy
Reference: https://docs.aws.amazon.com/lambda/latest/dg/lambda-intro-execution-role.html

38. 5. Create Lambda
• Copy code from lambda_function.js in source_code.zip and
paste the code in lambda console and then click save at top right
• Use can click test to check log and return data from your code

39. 5. Create API Gateway

40. 5. Create API Gateway

41. 5. Create API Gateway

42. 5. Create API Gateway

43. 5. Create API Gateway

44. is a browser security feature that restricts cross-origin HTTP requests
that are initiated from scripts running in the browser. If your REST API’s resources
receive non-simple cross-origin HTTP requests, you need to enable CORS support
To support CORS, therefore, a REST API resource needs to implement
an OPTIONS method that can respond to the OPTIONS preflight request with at
least the following response headers mandated by the Fetch standard:
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers
• Access-Control-Allow-Origin
API Gateway (cross-origin resource sharing CORS)
Reference: https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

45. 5. Create API Gateway

46. 5. Create API Gateway

47. 5. Create API Gateway

48. 5. Create API Gateway
• Copy the URL

49. 5. Create API Gateway
• Open index.html in texteditor
• Find and replace <URL Api Gateway> with URL that copy from
previous step
• Upload index.html to S3 bucket where is created at the first step
Replace URL here

50. 6. Test your Website
• Copy Domain name in CloudFront and try it on web browser
by adding path /index.html
eg. http://xxxxxxxx.cloudfront.net/index.html

51. 6. Test your Website
Done!!!

52. Thank You