Cloud Resume Challenge

I wanted to explore cloud so I took the Cloud Resume Challenge. It is a great way to get hands on learning experience on cloud. Here’s my journey through it.

One can take it using any cloud platform like AWS, Azure or GPC. I selected the Azure path.

Adding the basic structure

First, I setup the basic HTML, CSS, JS structure. The page had few social links and a counter. I kept it very minimal since focus is on learning cloud not HTML, CSS.

Hosting Static website

I created Static Web App from the azure portal and hosted the app. This took no time.

creating a static web app

Configuring a Custom Domain

From the hosted static app, I went to custom domain on other DNS. Created CNAME record from DNS management from my DNS provider with value as azure hosted url.

Working with Azure Cosmos DB

Created an Azure Cosmos DB account. Make sure to select (consumption) serverless option. creating a cosmos db

Then created a new container from data explorer and added an item to it. cosmos db container

Implementing Azure Functions

This was the most challenging part. I created an Function app from the portal. creating a function app Once function app is created, create the function with http Trigger.

Now select Integrate and add input & output bindings. Set binding type as cosmos DB since we have stored the count there and select the database we created earlier. Database name will be database-id and collection name will be container-id.

testing azure function

This is the required function. The data parameter receives data from the Input binding. Then we assign the required value from it to Output binding so that it could be used after function execution. The data is returned in the body. The count value is incremented in output binding and after function execution, it is stored in the database.

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

🚨 Mistake I did was that I kept partition key and the key storing count value same. It was creating a new record instead of updating it. This took up a lot of time.

For this step, articles by Akande Bolaji, Craig Wall and Jeff Brown helped a lot.

Also enable CORS after function is ready.

Using CDN

For CDN I used Front Door and CDN profile from azure portal. Added the static web app’s url as endpoint. adding cdn

Conclusion

The resume is deployed in azure static web app and is live at ~~chaitanyavaru.tech~~. It is storing the visitor count value in azure cosmos DB whose value is updated by azure function whenever the page is visited. And its using custom domain.

I learned a lot from this challenge. It was a great experience. I will be exploring more of azure in future.