Introduction

Serverless architecture has revolutionized the way we build and deploy web applications. By abstracting away server management and scaling, it allows developers to focus on writing code and delivering value to users. In this article, we will explore the world of Serverless web applications using a powerful combination of AWS services. We will leverage AWS S3 for hosting, Lambda functions for data retrieval and storage, DynamoDB as a scalable database, API Gateway for creating RESTful APIs, CloudFront for global content delivery, and AWS WAF to secure against SQL injections. Join us on this journey as we dive into the implementation details, best practices, and benefits of building a serverless web application using AWS services.

The YouTube Channels in both English (En) and French (Fr) are now accessible, feel free to subscribe by clicking here.

Solutions Architecture

Serverless architecture is a cloud computing paradigm that eliminates the need for managing servers and infrastructure. In this model, the cloud provider takes care of server provisioning, scaling, and maintenance, allowing developers to focus solely on writing code. Applications are built using small, stateless functions that are triggered by events. These functions are executed in a managed environment and automatically scale based on demand. Serverless architecture offers benefits such as cost efficiency, scalability, reduced operational overhead, and rapid development.

The architecture of the whole infrastructure looks like the following image whose description is provided down:

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Solutions Architecture Diagram

To build our serverless web application, we used the different AWS services below:

  • Amazon S3 (Simple Storage Service): is a highly scalable and durable cloud storage service. It allows you to store and retrieve large amounts of data, such as files, images, videos, and backups, in a secure and cost-effective manner.
  • AWS Lambda: is a serverless compute service provided. It allows you to run your code without provisioning or managing servers, making it an ideal choice for building scalable and cost-effective applications.
  • DynamoDB: is a fully managed NoSQL database service. It is designed to deliver seamless and scalable performance for applications that require low-latency, consistent, and highly available data storage.
  • AWS API Gateway: is a fully managed service that allows you to create, publish, and manage APIs for your applications. It acts as a front door, enabling you to expose your application’s functionality as secure and scalable APIs that can be accessed by clients such as web browsers, mobile devices, or other services.
  • CloudFront: is a content delivery network (CDN) service. It enables the efficient distribution of your content, including web pages, images, videos, and other static or dynamic files, to end users across the globe. AWS’s content delivery network (CDN), ensures fast and reliable global content distribution of our web application.
  • AWS WAF (Web Application Firewall): is a cloud-based firewall service that helps protect your web applications from common web exploits and attacks. It allows you to define and enforce rules to control access to your web application and filter out malicious traffic.

Prerequisites

Before diving into building our serverless solution, it is essential to have the following prerequisites:

  • AWS Account: Create an AWS account to access and utilize the AWS services mentioned in this article.
  • AWS IAM: Understand the basics of AWS Identity and Access Management (IAM) for managing user permissions and roles within the AWS environment.
  • Knowledge of AWS Lambda: Familiarize yourself with AWS Lambda, as it will be used to write the serverless functions for this application.
  • Basic knowledge of Python: Read and write simple statements with Python programming language, as the Lambda functions in this tutorial will be written in Python.
  • Understanding of REST APIs: Have a basic understanding of REST (Representational State Transfer) APIs and their fundamental principles, including the HTTP methods such as GET, POST, and DELETE, which will be used to interact with the API Gateway.

Configure AWS S3, CloudFront, and WAF

Setting up an AWS S3 bucket

Once log in to your AWS console, navigate to the AWS Console Management > AWS S3. From there, you can create a new S3 bucket by clicking on Create bucket as illustrated in the following screenshot:

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Create bucket

Provide a unique name for your bucket. It’s required to choose a name that is globally unique within the entire AWS S3 namespace. This ensures that there are no naming conflicts with existing buckets. Next, select the region where you want to host your web application.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Bucket configurations

Then click on Create bucket.

Once the bucket is created, you can proceed to upload your web application files. Click on your bucket and select the Upload option then Add files. You’ll find the application files here

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Bucket files and folders

Select the files from your local machine that make up your web application, and click on Upload to add them to your bucket.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python

Create AWS WAF rules

Navigate in the AWS Console Management > AWS WAF, Click on Create web ACL to create a new web Access Control List (ACL).

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Create AWS WAF rules

Provide a name for your web ACL and select the ressource type in our case Amazon cloudFront distributions. Then click on Next.

In the Add rules and rule groups section, click on Add rules, and then select Add managed rule groups.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python

Click on Add rules then select Add managed rule groups to have the following:

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python

In the next window, expand AWS Managed rule groups and scroll down to Free rule groups. Add a few rules to protect your application.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
AWS Managed rule groups

Scroll down and click on Add rules.

To ensure that requests not matching any rules are allowed, select Allow under the Default action section.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Default ACL action

Click on Next until you reach the end, leaving the default settings as they are. Finally, review your configurations and click onCreate web ACL. Your web ACL has been created.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Web ACLs

Set up CloudFront CDN for S3 Bucket

Navigate in the AWS Console Management > CloudFront Click on Create Distribution to create a new CloudFront distribution.

In the Create Distribution interface, click on the Origin Domain field and select the previously created S3 bucket.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Create CloudFront distribution

Under Origin Access, select Origin access control setting to ensure the bucket is only accessible via the CloudFront distribution, here’s the illustration below:

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Distribution Origin access settings

Click on Create control setting Identity, leaving all settings at their default values, and then click on Create.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Create control setting Identity

For the viewer protocol policy, apply the same settings as shown in the screenshot below:

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
viewer protocol policy

In the next section, apply the following configurations and select the previously created web ACL:

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Choose a web ACL

In the Default Root Object section, enter the name of your main HTML file, in our case, index.html.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Default Root Object: index page

Click on Create. Once the new distribution is created, click on Copy Policy.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python

This policy will grant CloudFront access to our S3 bucket. To apply it, go back to the S3 service, select the bucket containing your website, and go to Permissions.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python

In the Bucket Policy section, click on Edit, delete the existing content, paste the copied policy, and click on Save Changes.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Bucket Policy
Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python

Wait a few minutes for your distribution to deploy, then copy the generated domain name and paste it into your browser.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Web App deployment demo

Configure DynamoDB and Lambda Functions

Create a DynamoDB table

Navigate in the AWS Management Console > DynamoDB, click on Create table.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Create a DynamoDB table

Provide a name for your table and specify the partition key value. Leave all other settings at their defaults.

Your table has been successfully created.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python

Configuring IAM roles and permissions for Lambda functions

Navigate to the AWS Management Console > IAM Service dashboard.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python

In the left sidebar, click on Roles. In the new interface, click on Create role.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python

Select the Lambda service and click on Next.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python

In the search results, find the DynamoDB permissions, select the AmazonDynamoDBFullAccess policy, and click on Next.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
IAM permissions

Enter the role name, verify the chosen policy, and click on Create role.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python

Let’s note that for production usages, you should apply the Least Privilege Principle to enforce a better security of your infrastructure, this means not giving unnecessary permissions (DynamoDB full access) but only the precise actions our Lambda functions need.

Create Lambda Functions

Navigate in the AWS Management Console > AWS Lambda, Click on create a function. You will find the code for each function here

For the unction name, enter insertEmployee and select Python 3.9 as the runtime.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Create Lambda Function

In the permissions section, select Use an existing role and choose the previously created role. Then, click on Create function.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Lambda function role

After creating the function, scroll down to the Code tab. Enter your code in this section and click on Deploy.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Lambda function code

Our Lambda function has been successfully created.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python

Repeat the same steps to create the other functions. For example, create a function named getEmployees.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python

As well as for deleteEmployee Function:

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python

Note: Remember to deploy your functions after creating them.

Implementing API Gateway

Navigate to the API Gateway service, still from the AWS Management Console.

Scroll down to the REST API section and click on Build.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Create REST API

Select New API and provide the required information. Then, click on Create API.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Reat API definition

In the new window, click on Action and then Create Method.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python

Let’s start by creating a method to retrieve employees saved in our DynamoDB table. Select the GET method, be sure Lambda Function is selected as Integration type, enter the name of the previously created Lambda function, and click on Save.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Map Rest API to Lambda Function

For the insertEmployee function, create a method of type POST as in the following image:

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Map Rest API to Lambda Function

For the deleteEmployee function, create a method of type DELETE.

With our methods ready, let’s deploy our API. Click on Action, then Deploy API. In the popup window, select New stage and enter the stage name. Then, deploy.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Rest API deployment
Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python

After successfully deploying our API in the API Gateway, we need to configure CORS (Cross-Origin Resource Sharing) to ensure proper communication between the API Gateway and CloudFront. CORS is necessary because these two services reside in different domains.

Go back to the Resources tab, click on Action, and then Enable CORS.

Enabling CORS allows the API Gateway to handle requests from different origins. This step is crucial to prevent CORS origin errors, which occur when a web application hosted on one domain (CloudFront) tries to access resources from another domain without proper CORS configuration.

After enabling CORS, make sure to redeploy your API to apply the changes.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Enable CORS

Now, copy the address of your API.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python

Go to the source code of your application, specifically the scripts.js file. Modify the API_ENDPOINT variable and enter the address of your API.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
Rest API endpoint

Note: For the sake of the example we keep it this way but you should provide your API endpoint as an environment variable when your frontend is built using advanced stack like React or Angular.

Testing the Application

Navigate in the AWS Console Management > CloudFront, on your CloudFront Distribution copy the URL of your domain name and paste it into your browser.

Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
App demo: create an employee
Build a Serverless App with AWS Lambda, S3, DynamoDB, and Python
App demo: get employees

Resources

To facilitate the practical implementation of the concepts discussed in this article, we have provided a GitHub repository containing all the necessary files to build your serverless web application using AWS services.

———————

We have just started our journey to build a network of professionals to grow even more our free knowledge-sharing community that’ll give you a chance to learn interesting things about topics like cloud computing, software development, and software architectures while keeping the door open to more opportunities.

Does this speak to you? If YES, feel free to Join our Discord Server to stay in touch with the community and be part of independently organized events.

———————

Conclusion

In conclusion, this article provided a detailed guide on building a scalable and secured serverless web application using AWS services. We successfully configured AWS S3 for efficient hosting, leveraged CloudFront CDN for optimized content delivery, and implemented AWS WAF to ensure robust security measures. Additionally, the dynamic duo of DynamoDB and Lambda functions seamlessly managed data storage and retrieval, while API Gateway served as a front gate for RESTful API endpoints. By leveraging serverless architecture and AWS services, you can build your own web applications, delivering exceptional user experiences in the cloud.

Thanks for reading this article. Like, recommend, and share if you enjoyed it. Follow us on Facebook, Twitter, and LinkedIn for more content.

author-avatar

About Kemane Donfack

Hello, I am a passionate IT professional specializing in Cloud, DevOps, and technical writing. My blog is dedicated to sharing my knowledge and experiences to simplify and optimize development processes. Welcome to the world of Cloud and DevOps collaboration!. Follow me on Twitter & LinkedIn & Website.