Links to the full series:
- Azure Resume Challenge – Part 1: Creating the website and Azure resources
- Azure Resume Challenge – Part 2: Integrating CDN and HTTPS
- Azure Resume Challenge – Part 3: Adding the Visitor Counter (this post)
- Azure Resume Challenge – Part 4: Deploying with GitHub Actions
Using CosmosDB to store Visitor Count
In the challenge announcement post, Gwen suggested using CosmosDB to store the resume website’s visitor count. Normally I would not have used this, but Azure offers a free tier for CosmosDB with limited compute and storage capabilities.
I created the CosmosDB database using Core (SQL) as the API. I created the container to store my one record of the visitor count. The record has an id equal to “1” and a visitorCount property, which will be read and updated by an Azure function.
The setup for a CosmosDB instance can be a bit complicated, and it was for me as I’m not as familiar with the service. In the future, I might simplify this by just using storage account table service.
Writing the Azure Function
Writing the Azure function was not particularly difficult. I took a CloudSkills course from Matt Allford on the topic and have previously written about Azure Functions:
- Getting Started with Azure Functions Tutorial [Example-Driven Guide]
- How to Export Teams PSTN Usage Records with Azure Functions
I did use the Azure CLI to create the Azure Function resource instead of using the Azure Portal. I wrote the function using PowerShell but will probably challenge myself to use Python in the future. The function name needs to be globally unique as Azure appends “azurewebsites.net” to this name. I also used the existing storage account where I’m hosting the static website.
By default, the
az functionapp create created the function using version 2, so I specified using version 3 instead. I disabled application insights as I don’t need that level of detail in logging my application.
az functionapp create --name func-jbtresume-prod-001 `
--resource-group azureresume-rg `
--storage-account stjbtazureresumeprod `
--consumption-plan-location westus2 `
--os-type windows `
--runtime powershell `
--runtime-version 7.0 `
--functions-version 3 `
Check out my function.json file in my GitHub repo showing the HTTP trigger binding and the input/output bindings for CosmosDB:
I did code the function in the browser instead of using VS Code. The function verifies if it retrieved the record from CosmosDB. If it did, the function adds one to the count and outputs the new count in the HTTP response and updates the record.
Check out the full function in my GitHub repo:
There are some default origins configured under API > CORS for the Azure Function. I removed all of these and added the resume website domain to the list. I’m not sure if this is the right configuration, so this topic is something to research in the future.
My final step is to integrate GitHub Actions to auto-update the solution in Azure. I primarily want to update the website files when I make a change. Hopefully, I can integrate updating the Azure Function code as well.