Build a Serverless Web Application Within 15 mins on AWS

Introduction

In recent years, serverless web application has become increasingly popular. However, not too many articles will teach you how to implement it on cloud step by step but just paper talk. In this article, we will implement a votting system with serverless architecture within 15 mins. Of course, if you want to go through the code deeply, it will take much more time. I assume that you all had AWS account already. If you don’t have, please visit here to register a 1 year free-tier account. Our final system will look like below:

Votting System

In fact, the votting system is not so difficult to implement if we use server or instance. But it will be a little bit tricky when we use serverless architecture. By the way, some of you may not know why we should use serverless architecture, let’s me explain more.

Serverless Architecture

A serverless architecture is a way to build and run applications and services without having to manage infrastructure. In short, we do not have to maintain our server but just focus on coding, this is the first reason. Secondly, it is really “pay as you go”. If we use server, some of the time like early morning the usage is very low. But it does not mean the server cloud be closed because someone may use, even though the traffic is low. But for serverless architecture, you just have to pay for the number of request. If no one request your system, then no money you have to pay. Thirdly, you do not need to choose the hardware specification e.g. number of CPU or size of RAM, you just have to take a look on the traffic and directly adjust the system based on traffic.

Solution Diagram

Solution Diagram

In fact, the solution diagram is not quite complicated. What we have used here are just Amazon S3, Amazon API Gateway, AWS Lambda and Amazon DynamoDB. The workflow is:

  1. User visits our website stored in S3.
  2. When user votes, the request will pass through the API Gateway.
  3. The lambda function gets the request and communicate with DynamoDB, it could be read or write.
  4. After read or write, the lambda function returns a response string to API Gateway.
  5. The result is reflected on the front end page, so customer could see the change immediately.

Before we start, please firstly download the prepared files from my github. Or

git clone https://github.com/manbobo2002/serverless-votting.git

Create a DynamoDB

First of all, select the region first, Here I choose Ohio (us-east-2). Then search for DynamoDB and click it.

Please follow my table name and primary key and click “Create” because I pre-define theses name on later part. If you are expert, actually this part could be done on lambda function and no need to do on console. But for some of you may not be familiar with AWS, I just let you take a look on how these service look like.

After creation, click “Items” tab and click “Create Item”.

Now we add one item here on our table. Then just using the same approach to create the remaining 2.

Now it will look like that. Again please follow the id unless you are very familiar with how to edit the html file. The database environment is ready, then we should prepare our back end.

Write a lambda function

Select the region you want, here I choose Ohio (us-east-2) which is same as my database. Then search for lambda and click it.

Click “Create function”. Then input a function name, here I use “lambda_function”. Choose the python version above 3.5. Other things leave it by default and click “Create function”.

After the function created, you will automatically enter the function and see this interface.

Scroll down and see here has default function, we don’t need this. Please copy the code in my provided lambda_function.py and place on it.

Then it will look like this. Let’s briefly talk about what I am doing here. First of all, I call the library used for accessing DynamoDB. Then for simplicity, I directly classify GET and UPDATE request here but not on API Gateway. If it is GET request, we just query the current status of DynamoDB and return the amount of vote. Otherwise it is UPDATE request, we get the current status of the candidates, and update the count by increasing 1, then return the amount of updated vote.

If you want to test your lambda function, just click “Test” on right top corner then input the JSON request you want just like above. Click “Save” and then “Test”.

Oh, failed. Here is the very important part, so I capture this step deliberately. In AWS, we always meet the problem of authorization. The reason is that AWS service does not allow you to access another service by default in most cases. What you have to do is to set the IAM role here.

Scroll down and click “View the lambda_function-role-xxxxxxx”.

Then it brings us to go AWS IAM, click “Attach policies”.

Search for “dynamodb” and choose “AmazonDynamoDBFullAccess”, then click “Attach policy”. By the way, this is the built-in policy provided by AWS, you could create your own policy if you want.

Finally, it will look like that. Two policies appear on it now.

Back to our lambda function and test it again, it works now.

Of course, you could test with update function as well. The Count is increased by 1 now, if you now go to DynamoDB, then you will see the count of Potato will be 1. Now the back end function is also ready, let’s move to the API Gateway.

Create an AWS API Gateway

In lambda function, we create “Add trigger”.

Choose REST API and Open for Security. Be friendly reminded that Open means everyone could access your API gateway. The more security approach is to set API access key but we want to simplify it so choose Open.

In additional settings we could leave it by default. But normally, we will declare the deployment stage. It may have development, production and so on. Here I state it production and click “Add”.

Now we could see API Gateway appears on the trigger position. Just click on it.

The below will show the details of API Gateway. Be friendly reminded that anyone who own your API endpoint could use your API since you set to public before. Don’t show this to others. Of course, I will clean up all the things after this articles, haha. Then click “lambda_function-API”.

It leads us to the API Gateway.

The first thing we should do is to delete the ANY method.

Then create our own POST method.

Here, please, don’t check the “Use Lambda Proxy integration”, important! The first time I check it and have many trouble, finally it takes me few hours to fix. Then select the lambda function name, normally you type few words then you could search it. The region by default is the same as your lambda function. Click “Save” then.

Click “OK”.

Also, please click “Enable CORS”.

Leave it by default and enable it.

Click replace and it should appear something like that.

Then you should see something like that. And you could test your API like you use Postman by clicking “TEST”.

We just test like before in lambda function, and we get the same response now.

Back to the “Resources” page, click “Actions” and “Deploy API”.

Choose “production” stage and click “Deploy”.

Then it will redirect you to this page, please copy the URL for later use. Now the API Gateway is done, then the final part is our front end.

Upload the index.html file into Amazon S3

Before we upload our index.html, please paste the API endpoint URL to the url parameter in index.html using any text-editor. Perhaps, let me introduce what the index.html is doing. In javascript, there are three functions: get(), update(clicked_id) and graph(). The get() function will post a request to get the current status, and then call the graph() function to display the chart. The update(clicked_id) will get the id when we click “support” button, then it will increase the count of the candidate, also will call the graph() function to update the chart finally. Here I set asyn: false to avoid the delay of updating chart. If you do not care the chart does not respond on real-time, you can change it as asyn: true. In addition, if there are more candidates, we could just simply add the dictionary list and edit a little bit on graph() function.

In the control panel, search S3 and select the first one. S3 is nothing but just used for storing any objects e.g. text file, logging, videos, photos and so on.

Click “Create bucket” and choose any name (should be unique) or Region you like. Then Click “Create”.

Once we created the bucket, it will block public by default. Click your bucket now.

Click “Upload”, then drag or click “add file” to upload your file, finally click “Upload” as figure shown above.

It will look like this.

Move to “Permissions” tab and then click “Edit”.

Uncheck the “Block all public access” option and click “Save” then confirm it.

Also, In “Overview” tab we click “Make public”. Now public could enter this file. Then click the Object URL to see the votting system now!

Finish

All the things done, please enjoy!

Leave a Reply