Step-by-Step Guide to Creating a Serverless Web App on AWS
Yuvraj Thapa Chhetri
Posted on November 6, 2024
Introduction
In today’s digital world, creating flexible and reliable web applications has become a top priority for businesses of all sizes. With the rise of serverless architecture, developers can focus on writing code without worrying about managing servers or infrastructure. AWS provides a powerful set of tools that enable you to efficiently build serverless applications.
In this blog, we will explore the basics of building a serverless web application using AWS. We will walk through setting up your environment and deploying your application, covering key services like AWS Lambda, API Gateway, DynamoDB, and S3. By the end of this guide, you will have a solid understanding of how to leverage AWS serverless technologies to create a scalable and resilient web application that can handle fluctuating traffic while minimizing operational costs.
Let's go to practical part...
Step 1: Create S3 bucket and host a website
Bucket Name: Give a unique bucket name
Object Ownership: ACL Enable
Block all public access: uncheck and check on I acknowledge
- Then click on create bucket
- Now, Upload your website into your bucket
- Go to bucket properties scroll down and search static website hosting and click edit
Static Website hosting: Enable
Index document : index.html
- Now, go to bucket object
- Select all object
- Click on action tab
- Click make public using ACL
- Now, go back your static website hosting page and copy bucket website endpoint URL and paste it browser ensure that it is working or not
Step 2: Create a AWS Lambda function
- Go to lambda and click on create function
Function Name: XXXXXX
Runtime: Python3.12
- click on create function
- After create a lambda function write some script and save your script from file tab
- Now, click on test and configuration test event
Event name: xxxxxxxx
Event JSON: write JSON script given as picture
- after save a configuration test script, click on test and see the result.
Step 3: Configure API gateway
- Build REST API
- Select New API
API Name: xxxxxxxxxxx
API Endpoint type: Edge-Optimize
- Create Method
Method type: POST
Integration type: Lambda Function
Lambda Function Name: select your lambda function
- After create lambda method you wiil get this kind of dashboard.
- click on root (/) then click on Enable CORS and click Save
- After enable CORS you will get option in api dashboard
- Now click on deploy API
Stage: New Stage
Stage name: dev
- After deploy copy and save invoke URL. You will use next step
- Now Validate API
- Go to resource and click on POST
- Click on test
- Type JSON script to test
- Now click on test, you will get successfully testing report
Step 4: Create a dynamo DB
- Click on create table
Table name: xxxxxxxx
Partition Key : ID
- Then click on create table
Note: after create table copy table ARN, you will need later.
- Now, Create IAM Policy to Lambda function
- Go back to lambda function click on permission then click on Role Name link
- Click on add permission then create inline policy
- Write some script in JSON format
Then type policy name: xxxxxxx and click create
- Now, Modify Lambda function to write to dynamo DB table
- Go to lambda function code and modify
- After change this code click on deploy and run test, after successfully test you can in your dyanamodb table item your name list automatically insert in your table.
Step 5: Now, Interactivity to web app
- Go to your index.html change your code
- After change your code just upload this index.html file into s3 bucket and run your app
- Finally you can check you dynamo DB table item you have successfully add your list .
Finally, You can deploy web application without using any server. AWS serverless web applications provide a scalable and cost-effective solution for developers. By using services like AWS Lambda and API Gateway, you can focus on code rather than infrastructure management. This model reduces operational overhead and allows for rapid innovation, making it ideal for both startups and larger enterprises.
Posted on November 6, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.