Categories
Online Marketing

AWS Serverless Web App Tutorial

We will be covering a new concept in cloud computing, namely the serverless architecture. What does this mean? Well, essentially, server less computing allows you to build and run applications and services without the need to manage the actual server. It also provides flexible scaling under heavy load and automated high availability becoming a very versatile tool.

The AWS server less platform has many capabilities, as you can see, but for the purpose of this article we will be showcasing the creation of a server less web app from scratch. The structure of this project can be easily understood by following this diagram. All of the front-end code will reside in the s3 storage unit, which allows us to host the website publicly. Therefore, we start by creating an empty s3 bucket, like so give it a unique global name and click create and now to upload the static websites content into the bucket.

I simply click upload and drag and drop the build folder into here. Like so note that I am using react as a framework, so it might be a bit different for you. The next step is making the pocket public and for that we go into permissions and pocket policy and paste this bucket policy. In order now public reads: click save and do not forget to change the bucket name. Now this bucket has gained public access.

As far as configuration is concerned, the only thing remaining is enabling the website hosting in the S stream, which will allow the objects to be available at the website. Endpoint of the bucket click properties and select this card to do so. Check use this pocket to host the website and input a route for us. It will be index dot HTML. Furthermore, you can set up a custom domain for your s3 bucket by following the tutorial right here, which will be linked in the description anyhow.

Now you have the endpoint of the website and if you click it, you will see that the static website has come online. Going back to the diagram. There are a couple of things left to do. We should set up an instance of the Amazon Cognito user pool which enables us to register log in and authenticate securely. Then we will write the backbone of the serverless project that are the various AWS lambda functions which replace the server as they access and manipulate of Amazon DynamoDB now SQL database and respond to easy to use restful api calls.

But first the user pool head to Amazon, kognito and click manage Azure pools. Here you can create one or several. These are pools based on your application, for instance, one for regular users and one for administrator. You give it a name and click preview default settings here. There are various options: the password length, some type of restrictions, for it. Verification by email is a really important one, because you actually also gain a two-factor authentication while using the Amazon, Cognito and finally create the user pool.

You can find it under the user pools category and make sure you note down the pool ID that it has given itself as well as the previous endpoint of the website. The final step of configuring, the user pool, is creating an app client for your project. I already have one in here, but you can always add multiple ones, just give it a name and make sure you deselect the generate secret client option, because that means that it doesn’t support the JavaScript SDK.

You can also manage and configure every single user in your user group by clicking here and, for instance, having the option to disable delete users even creating or importing new ones as well, and most projects use JavaScript these days after that, leave the other options as default And click create app client make sure you save the app client ID for future use. Once you have the two IDs you can insert them into your application and benefit from the various cognitive.

A P is like the login and register ones. Let us test this new functionality into the website. Now we can register a new user, for instance, with this email password that satisfies the constraints and of verification code has been sent to the said email. It has sent this Jason using the user pool ID and client ID that we have just provided it with, and we have already appeared as an unconformity in the user pool after user verifies himself.

He can also login by following the same procedure and of course you would get a warning if his password is incorrect, once kognito is out of the way. All that remains is the server less back-end. Aws lamda interacts with the database, so we must first create one head on to dynamo DB and click create table here, give it a name and the primary key you can choose between various types and then create.

For instance. Here is my database. I have events with various categories: DynamoDB is a non relational database and you can edit the data inside at any time as long as it is not the primary key of the item. For instance, here I have made a mistake. Event capacity should be a number and then click Save it successfully changed it. Furthermore, you can customize it by adding new fields inside it. Let’s say time of day morning, and then it would add that category now that we have the database, we need to create a role more specifically Identity and Access Management role for the future function, so that it has access to read and write to this database.

Specifically, so let us do just that: go on to the overview, tab and write down the Amazon resource name so that we know which database we’ll use then proceed to go to. I am and create a new role here: choose lambda as that’s the type of function that we will use in the filter, policies, search bar, begin typing, lambda and choose AWS lambda basic addiction role so that it will have permissions to write to cloud read logs so That you can see whether you have errors or not, then click Next provide a name for it and then you’re ready to create an actual role.

You can find it here in my case now to attach the policy for our specific database. Click here add inline policy for choose a service type DynamoDB actions. Let’s give it all the types of read rights and lists and for resources with specific option checked, go on to table and click. Add a RN here you can paste your your own database AR m and it will automatically fill in the fields, for you click Add, and then you can review the policy giving it a name as well once the role is created with both policies in place.

We are now ready to create the actual and the function. This is easily done by going to AWS lamda and clicking create function. I like living author from scratch. Option enabled for runtime give it the programming language of your choice, a name and the role. You can choose an existing role, and here you can see the one that we’ve just made. Example, lambda role create function and the base one will be created for you.

After we create a function. You can see that it already has access to the cloud read logs, as well as the Amazon DynamoDB database that we’ve just created the function itself is a hello world stub onto which you can build other functionalities in order to test it. You click here, give it a name and some parameters if needed. In our case it doesn’t use them, so it doesn’t really matter. Click create and again test.

As you can see, it says hello from lamda back. This is why we’ve added the cloud read logs policy. Now, on to a more complex example, we go into functions and get events. This is a lambda function which takes all of the events in the database. We’ve previously looked that that have reached past a certain hard-coded date due to this line here, using all the big land scan method, we click test and check out the results, seeing that it it does output all of the events.

In the same way, you can make a most event function, which takes into account the parameter is required to make a new entry in the database. Let’s name it test three in this case and click test. The function has added test three, so let us see that, and here it is going back to the function. Okay, I would have noticed that we have something called an API gateway here as a trigger what this does is.

It enables an URL which we can use in our application, on which we call witta get or post, for instance, and receive the result of the function back in JSON format. This is essentially the final piece of the puzzle that connects all of the services together. In order to create one remember, every function has one API gateway. We give it a name, a description if necessary and an endpoint type as choose edge.

Optimized in this case create the API. Go to actions, create a method of the type that your function is. Let’s put it at any select, lambda function, the region and the function that you’ve wanted. The API, for, let’s continue with the example function in our case, use the full time mode should be checked as well. You will land in this page and the API gateway is almost ready to be deployed. You’ll notice here in method, request, authentification is set to none.

What does this mean? Well, if we change that, we can make it so that, for instance, the view events viewing all of the events in the database is only allowed if you’re already logged in so after we do so only then we’ll be able to see the events. This is done by creating a new authorizer click kognito and give it a name. Let’s call it user select, the user pool that you’ve previously created and the token show source should be authorization create and then back in resources, click, any method, request, authorization refresh, and you can see the newly created user now only being logged in into that specific cognitive User pool, who will I allow you to access the specific function? Those being said, we are now ready to deploy the gateway API.

You should also note this option here enable cross-origin resource sharing. I recommend you to enable it if you like me, have opted to use Axios as a method of communication with the api, otherwise it wouldn’t work and finally deploy api, select a new deployment stage, with the name of your choice and clicking deploy. This will yield invoke. Url, which you will put in your application and don’t which will call with the get or post, depending on the function that you’ve wanted to call this server less web app functionality is now complete.

You have the static website sitting in the s3 storage in it with all the images CSS HTML, then the user pool uses kognito to manage the login register and authentication followed by the newly created database, which is populated and manipulated by the various lambda functions that you Will create which are called from the project through the Gateway API. Thus, they all amounts to a single web application which can be expanded upon easily.

Last but not least, regarding price. Well, the cost of creating the serverless web app is known as AWS accounts only for the time its service is actually run, which is mainly the amount of traffic and how many times the lambda functions compute. For me, personally, it has been less than 0.1 dollars and I have had the webapp on for a period of about two weeks time with extensive function tests. Ultimately, all of these resources are available in a github project and check the article description for more details.

Thank you for reading


 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.