SlideShare a Scribd company logo
Building an AWS native
serverless website
RUNCY OOMMEN | 12-Oct-2019
@runcyoommen
https://runcy.me
1.Serverless – Introduction, understanding & advantages
2.Route 53 - Purchase a domain
3.DynamoDB – Setup tables/attributes/items
4.IAM - Required roles
5.Lambda - Make functions
6.API Gateway - Appropriate triggers
7.S3 - Host the static web files
8.ACM - Generate appropriate certificate
9.CloudFront - Create a global distribution
10.Route 53 - DNS redirection
Today’s Agenda
ACDKOCHI19 - Building a serverless full-stack AWS native website
“Serverless computing is a cloud
computing execution model in which the
cloud provider runs the server, and
dynamically manages the allocation of
machine resources.”
Reference:
https://en.wikipedia.org/wiki/Cloud_computing_security
ACDKOCHI19 - Building a serverless full-stack AWS native website
How did we get here?
ACDKOCHI19 - Building a serverless full-stack AWS native website
ACDKOCHI19 - Building a serverless full-stack AWS native website
A few good resources…
• AWS Info page on serverless
https://aws.amazon.com/serverless/
• Serverless Architectures
https://martinfowler.com/articles/serverless.html
• Lambda + Serverless
https://www.youtube.com/watch?v=71cd5XerKss
What are we
building today?
ACDKOCHI19 - Building a serverless full-stack AWS native website
ACDKOCHI19 - Building a serverless full-stack AWS native website
Pre-requisites to begin
• AWS free-tier account
• Get the source code
https://github.com/roommen/runcystees
• Basic knowledge of Python, HTML, JS, CSS
• A good IDE like Visual Studio Code
1. Purchase a domain
• Login to AWS console
• Select ‘Route 53’ from the services list
• Click ‘Domain registration’ to get
started and then on ‘Register Domain’
• Search for domain availability
• Fill in the contact details and verify the email address
• Domain purchase request pending (max of 48 hrs)
• Successful domain registration
2. Fire up the DB
• Select ‘DynamoDB’ from the services list
(under Database section)
• Click ‘Create table’ to get started
Provide appropriate table name, primary key.
Leave the rest as default settings.
• Start adding the items by clicking
on ‘Create item’
• Really simple DB schema consisting of
id (Primary key) and desc of the tees
3. Setup IAM role
• Select ‘IAM’ from the services list
(under Security, Identity & Compliance)
• Navigate to ‘Roles’ to create a new role
• Select Lambda as the service that will use this role
• Click Next to attach the permissions
• Attach the below given pre-defined policies
• Add appropriate tags (optional but good practice)
Provide an appropriate name and create the role
4. Let’s make Lambda
• Select ‘Lambda’ from the services list
(under Compute)
• Provide name, runtime and choose the role
In this web app example, we have:
✓ Show Tee Description – handled by ShowTeeDesc.py
For Python to be enabled as Lambda function, we need
to zip all source code and dependencies (if any)
We have boto3 as the only external dependency which
need not be packaged as it’s already part of the default
Python runtime for AWS Lambda
• You should now have
showTeeDesc.zip created
• Verify the contents of the zip file and ensure
contents look identical to screenshot below
• Now in the Lambda screen, upload the zip file created earlier and
change the Handler info to showTeeDesc.lambda_handler
• The format of Handler should be <python_filename>.lambda_handler
• Provide appropriate description
and keep the memory and
timeout as is
• Click on ‘Save’ to create the Lambda function
• Created function will be displayed as below
5. Integration with API Gateway
• Select ‘API Gateway’ from the services
list (under Networking & Content Delivery)
• Click ‘Create API’
• Choose the protocol, name and other details
• Choose ‘Create Resource’ from the Actions menu.
• Make sure to ‘Enable API Gateway CORS’
Resource created - showteedesc
• Select the resource
and now click
‘Create Method’
• Choose ‘POST’
Configure POST method - showteedesc
• Select appropriate region and the function that
we had created earlier for integration
• Select a method and click
“Enable CORS”
• On the next screen, leave everything as is and click
“Enable CORS and replace existing headers”
• Select “Deploy API” from ‘Actions’
Choose [New Stage] and provide
appropriate values
• After deployment, the APIs would be available under stage
• Click on POST method created for /showteedesc and
see the API endpoint
Bringing it all together…
index.html runcystees.js
showTeeDesc.py
SERVERLESS
TRINITY
• Enable the APIs – Edit the JS function
• Integrate the APIs with the relevant functions
defined in runcystees.js to have them invoked
6. Host web files on S3
• Select ‘S3’ from the services list
(under Storage)
• Click ‘Create bucket’
• Provide appropriate ‘Bucket
name’ and ‘Region’
• Click ‘Create’
• Select the bucket that you created earlier
• From the “Properties” tab select ‘Static
website hosting’
• Provide appropriate
‘Index document’ and
hit Save
• You will now see an
‘Endpoint’ available
which will serve you
the website content
• Click on the
‘Permissions’ tab
• Select ‘Bucket
Policy’
• Enter the above policy to make it world readable
7. Generate certificate
• Select ‘Certificate Manager’ from the
services (under Security, Identity & Compliance)
• Click ‘Request a certificate’
• Select ‘Request a public certificate’
• Choose region as N. Virginia
Enter domain name
for generating the
certificate
Select ‘DNS
validation’
• Choose ‘Create record in Route 53’ to make
the appropriate DNS entry for certificates
• An entry would be created under Route 53
• Certificate status would be shown as Issued (~30 mins)
8. Make CloudFront distribution
• Select ‘CloudFront’ from the services
(under Networking & Content Delivery)
• Click ‘Create Distribution’
• Select ‘Web’ as the delivery
method for content
• Provide ‘Origin Domain Name’ as the S3 bucket
• Set protocol policy as
‘Redirect HTTP to
HTTPS’
• Provide
appropriate
CNAME entries
• Select the
certificate created
earlier from the
custom list
• Click on ‘Create Distribution’
• Wait for the distribution to be created (~30 mins)
• Set the default root object as the first html page
• Select ‘Route 53’ from the services list
(under Networking & Content Delivery)
9. DNS redirection
• Select the Hosted Zone displayed for
your domain
• Click on the ‘Create Record Set’ button
• Create a record set of type
A as alias
• Provide CloudFront
domain name as the alias
hosted target
• The site is now available
https://runcystees.com
• The website is ** NOW LIVE **
@runcyoommen
https://runcy.me

More Related Content

PPTX
Serverless solution architecture in AWS
PPSX
Welcome to Web Services
PPTX
AWS Serverless Introduction
PDF
Zaragoza dev ops-activiti-khd-20181212
PDF
AWS Lambda Deep Dive
PPTX
Amazon Virtual Private Cloud - VPC 2
PDF
Node withoutservers aws-lambda
PDF
Serverless Stream Processing with Bill Bejeck
Serverless solution architecture in AWS
Welcome to Web Services
AWS Serverless Introduction
Zaragoza dev ops-activiti-khd-20181212
AWS Lambda Deep Dive
Amazon Virtual Private Cloud - VPC 2
Node withoutservers aws-lambda
Serverless Stream Processing with Bill Bejeck

Similar to ACDKOCHI19 - Building a serverless full-stack AWS native website (20)

PPTX
Marshall Magee - Build a dynamic website for less than $1.55/month using S3 a...
PDF
How to set up world-class web hosting
 
PDF
AWS Community Day Bangkok 2019 - Build a Serverless Web Application in 30 mins
PPTX
Designing A Time bound resource download URL
PPTX
Aws object storage and cdn(s3, glacier and cloud front) part 3
PPTX
Mastering the Cloud with AWS: A Deep Dive into Amazon Web Services
PDF
Build an app on aws for your first 10 million users (2)
PDF
Serverless Framework Workshop - Tyler Hendrickson, Chicago/burbs
PPTX
Aws object storage and cdn(s3, glacier and cloud front) part 2
PDF
AWS Meetup Paris - Short URL project by Pernod Ricard
PDF
Your Second multi-tier Serverless Architecture on AWS
PPTX
AWS 101 - Amazon Web Services
PDF
Overview of AWS Building Blocks
PPTX
SESSION8_AWS how to deploy the resources and services
PDF
Getting started with AWS
PPTX
Modernizing DevOps
PPTX
Aws overview part 3(databases, dns and management services)
PDF
Introduction to AWS
PDF
Websites go Serverless - AWS Summit Berlin
PPTX
Amazon Web Services (AWS) that enables developers to build applications with ...
Marshall Magee - Build a dynamic website for less than $1.55/month using S3 a...
How to set up world-class web hosting
 
AWS Community Day Bangkok 2019 - Build a Serverless Web Application in 30 mins
Designing A Time bound resource download URL
Aws object storage and cdn(s3, glacier and cloud front) part 3
Mastering the Cloud with AWS: A Deep Dive into Amazon Web Services
Build an app on aws for your first 10 million users (2)
Serverless Framework Workshop - Tyler Hendrickson, Chicago/burbs
Aws object storage and cdn(s3, glacier and cloud front) part 2
AWS Meetup Paris - Short URL project by Pernod Ricard
Your Second multi-tier Serverless Architecture on AWS
AWS 101 - Amazon Web Services
Overview of AWS Building Blocks
SESSION8_AWS how to deploy the resources and services
Getting started with AWS
Modernizing DevOps
Aws overview part 3(databases, dns and management services)
Introduction to AWS
Websites go Serverless - AWS Summit Berlin
Amazon Web Services (AWS) that enables developers to build applications with ...
Ad

More from AWS User Group Kochi (14)

PPTX
ACDKOCHI19 - Medlife's journey on AWS from ZERO Orders to 6 digits mark
PDF
ACDKOCHI19 - Become Thanos of the Lambda Land: Wield all the Infinity Stones
PPTX
ACDKOCHI19 - Rapid development, CI/CD for Chatbots on AWS
PPTX
ACDKOCHI19 - Complete Media Content Management System and Website on Serverless
PPTX
ACDKOCHI19 - A minimalistic guide to keeping things simple and straightforwar...
PPTX
ACDKOCHI19 - CI / CD using AWS Developer Tools
PPTX
ACDKOCHI19 - Technical Presentation - Connecting 10000 cars to the AWS Cloud
PPTX
ACDKOCHI19 - Journey from a traditional on-prem Datacenter to AWS: Challenges...
PPTX
ACDKOCHI19 - Opening Keynote - Building an Innovation mindset
PPTX
ACDKOCHI19 - Enterprise grade security for web and mobile applications on AWS
PPTX
ACDKOCHI19 - Next Generation Data Analytics Platform on AWS
PPTX
ACDKOCHI19 - IAM Everywhere
PPTX
ACDKOCHI19 - Turbocharge Developer productivity with platform build on K8S an...
PPTX
ACDKOCHI19 - Demystifying amazon sagemaker
ACDKOCHI19 - Medlife's journey on AWS from ZERO Orders to 6 digits mark
ACDKOCHI19 - Become Thanos of the Lambda Land: Wield all the Infinity Stones
ACDKOCHI19 - Rapid development, CI/CD for Chatbots on AWS
ACDKOCHI19 - Complete Media Content Management System and Website on Serverless
ACDKOCHI19 - A minimalistic guide to keeping things simple and straightforwar...
ACDKOCHI19 - CI / CD using AWS Developer Tools
ACDKOCHI19 - Technical Presentation - Connecting 10000 cars to the AWS Cloud
ACDKOCHI19 - Journey from a traditional on-prem Datacenter to AWS: Challenges...
ACDKOCHI19 - Opening Keynote - Building an Innovation mindset
ACDKOCHI19 - Enterprise grade security for web and mobile applications on AWS
ACDKOCHI19 - Next Generation Data Analytics Platform on AWS
ACDKOCHI19 - IAM Everywhere
ACDKOCHI19 - Turbocharge Developer productivity with platform build on K8S an...
ACDKOCHI19 - Demystifying amazon sagemaker
Ad

Recently uploaded (20)

PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Encapsulation theory and applications.pdf
PDF
Network Security Unit 5.pdf for BCA BBA.
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
PDF
Chapter 3 Spatial Domain Image Processing.pdf
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PPT
Teaching material agriculture food technology
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PPTX
A Presentation on Artificial Intelligence
DOCX
The AUB Centre for AI in Media Proposal.docx
PDF
CIFDAQ's Market Insight: SEC Turns Pro Crypto
PPTX
MYSQL Presentation for SQL database connectivity
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PDF
Modernizing your data center with Dell and AMD
PPTX
Cloud computing and distributed systems.
PDF
Empathic Computing: Creating Shared Understanding
Mobile App Security Testing_ A Comprehensive Guide.pdf
Advanced methodologies resolving dimensionality complications for autism neur...
Encapsulation theory and applications.pdf
Network Security Unit 5.pdf for BCA BBA.
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
Chapter 3 Spatial Domain Image Processing.pdf
Dropbox Q2 2025 Financial Results & Investor Presentation
Teaching material agriculture food technology
20250228 LYD VKU AI Blended-Learning.pptx
A Presentation on Artificial Intelligence
The AUB Centre for AI in Media Proposal.docx
CIFDAQ's Market Insight: SEC Turns Pro Crypto
MYSQL Presentation for SQL database connectivity
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Building Integrated photovoltaic BIPV_UPV.pdf
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
NewMind AI Weekly Chronicles - August'25 Week I
Modernizing your data center with Dell and AMD
Cloud computing and distributed systems.
Empathic Computing: Creating Shared Understanding

ACDKOCHI19 - Building a serverless full-stack AWS native website

  • 1. Building an AWS native serverless website RUNCY OOMMEN | 12-Oct-2019 @runcyoommen https://runcy.me
  • 2. 1.Serverless – Introduction, understanding & advantages 2.Route 53 - Purchase a domain 3.DynamoDB – Setup tables/attributes/items 4.IAM - Required roles 5.Lambda - Make functions 6.API Gateway - Appropriate triggers 7.S3 - Host the static web files 8.ACM - Generate appropriate certificate 9.CloudFront - Create a global distribution 10.Route 53 - DNS redirection Today’s Agenda
  • 4. “Serverless computing is a cloud computing execution model in which the cloud provider runs the server, and dynamically manages the allocation of machine resources.” Reference: https://en.wikipedia.org/wiki/Cloud_computing_security
  • 6. How did we get here?
  • 9. A few good resources… • AWS Info page on serverless https://aws.amazon.com/serverless/ • Serverless Architectures https://martinfowler.com/articles/serverless.html • Lambda + Serverless https://www.youtube.com/watch?v=71cd5XerKss
  • 13. Pre-requisites to begin • AWS free-tier account • Get the source code https://github.com/roommen/runcystees • Basic knowledge of Python, HTML, JS, CSS • A good IDE like Visual Studio Code
  • 14. 1. Purchase a domain • Login to AWS console • Select ‘Route 53’ from the services list • Click ‘Domain registration’ to get started and then on ‘Register Domain’
  • 15. • Search for domain availability • Fill in the contact details and verify the email address
  • 16. • Domain purchase request pending (max of 48 hrs) • Successful domain registration
  • 17. 2. Fire up the DB • Select ‘DynamoDB’ from the services list (under Database section) • Click ‘Create table’ to get started
  • 18. Provide appropriate table name, primary key. Leave the rest as default settings.
  • 19. • Start adding the items by clicking on ‘Create item’ • Really simple DB schema consisting of id (Primary key) and desc of the tees
  • 20. 3. Setup IAM role • Select ‘IAM’ from the services list (under Security, Identity & Compliance) • Navigate to ‘Roles’ to create a new role • Select Lambda as the service that will use this role • Click Next to attach the permissions
  • 21. • Attach the below given pre-defined policies • Add appropriate tags (optional but good practice)
  • 22. Provide an appropriate name and create the role
  • 23. 4. Let’s make Lambda • Select ‘Lambda’ from the services list (under Compute) • Provide name, runtime and choose the role
  • 24. In this web app example, we have: ✓ Show Tee Description – handled by ShowTeeDesc.py For Python to be enabled as Lambda function, we need to zip all source code and dependencies (if any)
  • 25. We have boto3 as the only external dependency which need not be packaged as it’s already part of the default Python runtime for AWS Lambda • You should now have showTeeDesc.zip created • Verify the contents of the zip file and ensure contents look identical to screenshot below
  • 26. • Now in the Lambda screen, upload the zip file created earlier and change the Handler info to showTeeDesc.lambda_handler • The format of Handler should be <python_filename>.lambda_handler
  • 27. • Provide appropriate description and keep the memory and timeout as is • Click on ‘Save’ to create the Lambda function • Created function will be displayed as below
  • 28. 5. Integration with API Gateway • Select ‘API Gateway’ from the services list (under Networking & Content Delivery) • Click ‘Create API’ • Choose the protocol, name and other details
  • 29. • Choose ‘Create Resource’ from the Actions menu. • Make sure to ‘Enable API Gateway CORS’
  • 30. Resource created - showteedesc • Select the resource and now click ‘Create Method’ • Choose ‘POST’
  • 31. Configure POST method - showteedesc • Select appropriate region and the function that we had created earlier for integration
  • 32. • Select a method and click “Enable CORS” • On the next screen, leave everything as is and click “Enable CORS and replace existing headers”
  • 33. • Select “Deploy API” from ‘Actions’ Choose [New Stage] and provide appropriate values
  • 34. • After deployment, the APIs would be available under stage • Click on POST method created for /showteedesc and see the API endpoint
  • 35. Bringing it all together… index.html runcystees.js showTeeDesc.py SERVERLESS TRINITY
  • 36. • Enable the APIs – Edit the JS function • Integrate the APIs with the relevant functions defined in runcystees.js to have them invoked
  • 37. 6. Host web files on S3 • Select ‘S3’ from the services list (under Storage) • Click ‘Create bucket’ • Provide appropriate ‘Bucket name’ and ‘Region’ • Click ‘Create’
  • 38. • Select the bucket that you created earlier • From the “Properties” tab select ‘Static website hosting’
  • 39. • Provide appropriate ‘Index document’ and hit Save • You will now see an ‘Endpoint’ available which will serve you the website content
  • 40. • Click on the ‘Permissions’ tab • Select ‘Bucket Policy’ • Enter the above policy to make it world readable
  • 41. 7. Generate certificate • Select ‘Certificate Manager’ from the services (under Security, Identity & Compliance) • Click ‘Request a certificate’ • Select ‘Request a public certificate’ • Choose region as N. Virginia
  • 42. Enter domain name for generating the certificate Select ‘DNS validation’
  • 43. • Choose ‘Create record in Route 53’ to make the appropriate DNS entry for certificates • An entry would be created under Route 53 • Certificate status would be shown as Issued (~30 mins)
  • 44. 8. Make CloudFront distribution • Select ‘CloudFront’ from the services (under Networking & Content Delivery) • Click ‘Create Distribution’ • Select ‘Web’ as the delivery method for content
  • 45. • Provide ‘Origin Domain Name’ as the S3 bucket • Set protocol policy as ‘Redirect HTTP to HTTPS’
  • 46. • Provide appropriate CNAME entries • Select the certificate created earlier from the custom list
  • 47. • Click on ‘Create Distribution’ • Wait for the distribution to be created (~30 mins) • Set the default root object as the first html page
  • 48. • Select ‘Route 53’ from the services list (under Networking & Content Delivery) 9. DNS redirection • Select the Hosted Zone displayed for your domain • Click on the ‘Create Record Set’ button
  • 49. • Create a record set of type A as alias • Provide CloudFront domain name as the alias hosted target • The site is now available https://runcystees.com
  • 50. • The website is ** NOW LIVE ** @runcyoommen https://runcy.me