Creating a Serverless Resume with Visitor Counter in Azure

Akande Bolaji — Fri, 11 Sep 2020 09:47:06 +0000

This article is part of #ServerlessSeptember. You'll find other helpful articles, detailed tutorials, and videos in this all-things-Serverless content collection. New articles from community members and cloud advocates are published every week from Monday to Thursday through September.

Find out more about how Microsoft Azure enables your Serverless functions at https://docs.microsoft.com/azure/azure-functions/.

Introduction

The idea for this article is from the cloud resume challenge. We need to build a serverless static resume website with a visitor counter. We need a serverless service to store the visitor’s count (Azure Cosmos DB), a serverless service to retrieve and update the visitor’s count from our store(Azure Functions), a serverless service to host our static resume website (Azure Storage) and an additional service to cache and make our static website load faster (Azure CDN). This tutorial would be divided into four parts covering each steps and services

Building our store using Cosmos DB

Azure Cosmos DB is a fully managed NoSQL database service which is a perfect choice for our serverless store. Lets get started

Steps

From azure portal, search for azure cosmos db and select the match
On the cosmos db page, select create

For Project details, choose your preferred Azure subscription and resource group to group your Cosmos DB account. For instance details, enter an account name of your choice which has to be globally unique, Our API would be Core(SQL) as we would be using SQL syntax, Capacity mode is serverless and we can leave the remaining options to default and go ahead to select review + create

Once deployment is complete, Select Go To Resource and choose Data Explorer. On data explorer page, select New Container. Enter a database id, container id, and partition key of your choice.

After creating DB, select your created DB from the SQL API list and go ahead to select New Item. Enter id as home or whatever you would like to call your resume home page and count as Zero 0. Click save and our store is ready for use.

Building our serverless function using Azure Function

Azure Function is a serverless compute service that lets you run event-triggered code without having to explicitly provision or manage infrastructure which makes it a great choice for our use case.

Steps

From azure portal, search for Function App and select the match
On the function App Page, select create function

For Project details, choose your preferred Azure subscription and resource group to group your Function App. For Instance Details, Enter a function App Name of your choice which is globally unique. Select Code as option for Publish, Select Node.js as Runtime stack, Leave the remaining options as default and select Review + Create.

Once deployment is complete, Select Go to Resource and select functions on the Resource page.
Select Add, and select HTTP trigger from the New Function popup. Leave the details option as default and Select Create Function.
We would like update the visitor count table and get the updated count all from our Function. This is possible with Integration. Select Integration from the function page.

Select Add Input to add an integration to get our visitors count for a specific page. Binding Type is Azure Cosmos DB, Database name should be the name of our CosmosDB and Collection name should be the name of our Cosmos DB container both created earlier. Create a new Cosmos DB account connection using your created cosmos db account. Add an SQL query to get a specific page count SELECT * FROM c WHERE c.id = {id}. This query selects an item from our cosmos db where item.id is equal to our input query id. Select Ok to create our input integration.

Select Add Output to add an integration to update our visitors count for a specific page. Binding Type is Azure Cosmos DB, Database name should be the name of our CosmosDB created earlier and Collection name should be the name of our Cosmos DB container. Select Ok to create our input integration.

Select Code + Test and your function should look something like this:

module.exports = async function (context, req, data) {
  context.bindings.outputDocument = data[0];
  context.bindings.outputDocument.count += 1;
  context.res = {
     body: data[0].count
  };
}

The third parameter data in our async function returns item from our cosmos db by running the SQL Query in the input integration we created earlier. An alternative to that would be
data = context.bindings.inputDocument where inputDocument is the name of the input integration.
To update the visitor count in our db, we get a reference to the item we want to update using the inputDocument binding and update the count by one before returning the result. Azure function is so smart that our changes are reflected on the returned data.

Let’s test that our function works by using the test/run feature. We would normally make a get request to our endpoint and query parameter of id with a value of home. We used a value of home since the item we want to get from our cosmos db was saved with an id of home. You should copy your Function App API endpoint so you can call it from your resume web page.

Hosting our static resume on Azure storage

I would assume we all can build a simple resume using html. You can build using any frontend framework but I used plain html, css and Javascript for mine. I won’t be going into the details of building the resume so feel free to clone mine here. The important thing you need to understand here is you would have to fetch the visitor’s count using Javascript from our Function App API endpoint and display the result on the web page. Let’s go ahead to upload our resume on Azure storage.

Steps

From azure portal, search for storage accounts and select the match
On the storage accounts page, Select add.
For Project details, choose your preferred Azure subscription and resource group to group your Function App. For Instance Details, Enter a storage account Name of your choice which is globally unique. Leave the remaining options as default and select Review + Create.
Once deployment is complete, Select Go to Resource.

Select Static website, on static website page, select enable as it's disabled by default. Enter your resume website index page and error page and click save. You can see the url to your static website but it’s empty since we haven’t uploaded our files. Select the $web container to upload your files.

Upload your files and make sure your Javascript uses the Function App api gateway to retrieve the visitor’s count.

We need to update our function App to allow request from our static website url else we wouldn’t be able to get the visitors count. go to the Function App you created and search for CORS. add your static website url to list of allowed origins. Make sure to enable Access-Control-Allow-Credentials. Everything should work fine now.

Using Azure CDN to cache resume and reduce load times

Azure Content Delivery Network (CDN) lets you reduce load times, save bandwidth, and speed responsiveness.

Steps

Go to storage accounts and select the storage for your static website.
search for CDN and select create new CDN endpoint

Choose create new, enter a name for your CDN profile. Select the Standard Microsoft option for pricing tier. Enter a globally unique name for CDN endpoint name and select the storage account as origin name. click create and wait for some minutes while it deploys your content to CDN. Don't forget to add your CDN endpoint url to list of allowed origins in your Function App.

Here's our final result.

Conclusion

We have successfully hosted our resume on azure storage and used Azure CDN for caching, Azure Cosmos DB to store visitor's count and Function App to retrieve the count. An added functionality on your own would be to add a custom domain to our CDN integration.

Cloud Resume Challenge

Akande Bolaji — Sat, 13 Jun 2020 14:31:49 +0000

I started the cloud resume challenge as a way to have hands-on experience with the cloud. I have three years experience working as a Fullstack developer and I am excited to pursue a new challenge in cloud. The cloud resume challenge is an initiative by Forrest Brazeal to help new people to break into the Cloud industry, as many are losing their jobs because of the coronavirus pandemic. It took me a week to accomplish and below are some useful azure technology and skills I learnt while doing the challenge.

The first task which was to create my resume page using HTML, CSS and Javascript was quite easy. I got a resume template on Codepen and I was able to tweak it to my taste. The Javascript part involved making an API call to my Api gateway with fetch to get and display the visitors count. At this point, I was using a dummy api endpoint.
The second task was to upload my resume to an Amazon S3 bucket. I was using the amazon console to upload my static website and set bucket access to public and I had to repeat this process multiple times after making changes to my HTML. You would read in later tasks how i later made this process effortless.
The third task was to allow the S3 bucket use HTTPS for security using CloudFront and point the Cloudfront distribution to a custom domain. I obtained a domain name through Route53, created an SSL certificate using AWS Certificate Manager and pointed this to my CloudFront distribution.
My next task was to persist the visitor's count to a database. I used DynamoDB for this. I was able to use the update item query that would update before getting the item. This would save cost in the sense that a single DynamoDB query and API endpoint was enough to Update and Get the visitor's count.
Next task was to create a lambda function that would communicate with my DynamoDB. I had to use Python for this since it was part of the challenge requirements. Python was quite easy to grasp and in few hours, I was able to create a Lambda function with proper IAM roles/policies to access DyanmoDB.
The next tasks are the most challenging and the parts I enjoyed working on the most in this challenge. I created a SAM (serverless application model) template to handle creating the DynamoDB, Lambda function and tests, and API gateway integration. I used the AWS CLI for this and i was able to test my functions locally using docker. I wrote unit tests for my lambda function and i was able to test that they work locally with the Dynamodb using moto from AWS.
I then used GitHub Actions to automate the process of building and testing my SAM template after each push to my private backend repository. If the build and test were successful, It goes ahead to deploy the SAM template on AWS.
I repeated the same process to automate uploading my static Frontend code to my aws bucket. I used Github actions for this and also invalidated my CloudFront Cache in the workflow. I made sure i stored my AWS credentials in Github Secrets for security reasons.
The resume project was complete and it was time to prepare for my AWS Certified Cloud Practitioner exams as this was part of the challenge requirements. I prepared for the exam and passed within two weeks using the official study guide from AWS, Practice questions from https://acloud.guru and the practical experience gotten from the tasks above.

When this challenge is over, I would be writing a more detailed article on the technical side of this project.

You can check the Finished product at https://bolajiakande.com
You can also view my AWS Certification here https://www.youracclaim.com/badges/27320586-7c1d-46c3-9773-69dff3ce206e/public_url

Overall, This was a great learning experience to me and I'm really happy to participate in this challenge. I would advice both Intermediate and Fresh Cloud Engineers to try this challenge out.
Here is a link to try it out - https://cloudresumechallenge.dev/

Forem: Akande Bolaji

Creating a Serverless Resume with Visitor Counter in Azure

Introduction

Building our store using Cosmos DB

Steps

Building our serverless function using Azure Function

Steps

Hosting our static resume on Azure storage

Steps

Using Azure CDN to cache resume and reduce load times

Steps

Conclusion

Cloud Resume Challenge