This project utilizes Microsoft Azure services to create a secure, scalable, and efficient website. It demonstrates expertise in designing cloud infrastructure, using serverless computing, and implementing automated deployment processes (CI/CD). The main feature is an Azure Function built with C#, which handles web requests. This function interacts with Azure Cosmos DB to store and manage data and uses Azure Identity to manage user authentication. By adopting a serverless approach, the website can quickly handle requests without the need to manage servers, ensuring fast access to data for users around the world.
Below, I would like to acknowledge and give credit, in ascending order, to the main videos I followed to integrate each part of the site.
#1 ACG Projects: Build Your Resume on Azure with Blob Storage, Functions, CosmosDB, and GitHub Actions -> video
#2 Hosting a Static Website on Azure - Meetup April 2024 by Daniel Colón -> video
#3 Adding Custom Domain Name with CDN in Azure Storage (Static WebSite) + Domain Provider -> video
Check Out the Live Version of the Static Website!
Make sure to look at these components first; otherwise, you may spend a lot of time and effort just adjusting your machine. Ensure that the proper downloads and extensions are set before starting the overall project for a better experience.
- GitHub account
- Azure account
- Azure CLI
- .NET Core 3.1 LTS
- Azure Functions Core Tools
- Visual Studio Code
- Visual Code Extensions
- Full solution
The front-end is a static website built using HTML, CSS, and JavaScript. Despite being static, it includes a dynamic feature—a visitor counter. The counter’s data is retrieved through an API call to an Azure Function, enabling real-time updates on visitor traffic.
- This article explains how to make an API call with JavaScript and in a simple way how to use it to make an API call.
- Azure storage explorer is a handy tool to use when working with Storage Accounts
- This is how you can deploy static site to blob storage.
The back-end is powered by an HTTP triggered Azure Functions Azure Function, integrated with Cosmos DB using both input and output bindings. When the function is triggered, it retrieves an item from Cosmos DB, increments its value by 1, updates the database, and returns the updated value to the caller.
- Prerequisites for developing functions with visual code locally.
- Create a Cosmos DB account via command line or from the portal.
- Create an HTTP triggered Azure Function in Visual Studio Code.
- Azure Functions Cosmos DB bindings
- Retrieve a Cosmos DB item with Functions binding.
- Write to a Cosmos DB item with Functions binding.
- You'll have to enable CORS with Azure Functions locally and once it's deployed to Azure for you website to be able to call it.
Azure Advisory Recommendations... Coming Next