Step-by-Step Guide to Creating a Serverless Web App on AWS

yuvi1228

Yuvraj Thapa Chhetri

Posted on November 6, 2024

Step-by-Step Guide to Creating a Serverless Web App on AWS

Image description

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

Image description

  • Then click on create bucket
  • Now, Upload your website into your bucket

Image description

  • Go to bucket properties scroll down and search static website hosting and click edit

Static Website hosting: Enable
Index document : index.html

Image description

  • Now, go to bucket object
  • Select all object
  • Click on action tab
  • Click make public using ACL

Image description

  • 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

Image description

Step 2: Create a AWS Lambda function

  • Go to lambda and click on create function

Function Name: XXXXXX
Runtime: Python3.12

Image description

  • click on create function
  • After create a lambda function write some script and save your script from file tab

Image description

  • Now, click on test and configuration test event

Image description

Event name: xxxxxxxx
Event JSON: write JSON script given as picture

Image description

  • after save a configuration test script, click on test and see the result.

Image description

Step 3: Configure API gateway

  • Build REST API

Image description

  • Select New API

API Name: xxxxxxxxxxx
API Endpoint type: Edge-Optimize

Image description

  • Create Method

Image description

Method type: POST
Integration type: Lambda Function
Lambda Function Name: select your lambda function

Image description

  • After create lambda method you wiil get this kind of dashboard.

Image description

  • click on root (/) then click on Enable CORS and click Save

Image description

  • After enable CORS you will get option in api dashboard

Image description

  • Now click on deploy API

Stage: New Stage
Stage name: dev

Image description

  • After deploy copy and save invoke URL. You will use next step

Image description

  • Now Validate API
  • Go to resource and click on POST
  • Click on test
  • Type JSON script to test

Image description

  • Now click on test, you will get successfully testing report

Image description

Step 4: Create a dynamo DB

  • Click on create table

Table name: xxxxxxxx
Partition Key : ID

  • Then click on create table

Image description
Image description

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

Image description

  • Click on add permission then create inline policy

Image description

  • Write some script in JSON format

Image description

Then type policy name: xxxxxxx and click create

Image description

  • Now, Modify Lambda function to write to dynamo DB table
  • Go to lambda function code and modify

Image description

  • 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.

Image description

Step 5: Now, Interactivity to web app

  • Go to your index.html change your code

Image description

  • After change your code just upload this index.html file into s3 bucket and run your app

Image description

  • Finally you can check you dynamo DB table item you have successfully add your list .

Image description

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.

💖 💪 🙅 🚩
yuvi1228
Yuvraj Thapa Chhetri

Posted on November 6, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related