Static site hosted in Azure Storage

This project showcases a static website hosted on Azure Storage using serverless architecture. It features an Azure Function in C# that processes web requests and connects to Cosmos DB for data management, with user authentication handled through Azure Identity. The setup enables fast, scalable performance without server maintenance.

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

Site Link:

Check Out the Live Version of the Static Website! https://www.routetothecloud.com/

Prerequisites

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
  • Azure Functions Extensions
  • C# Extension
  • Azure Storage Extension
• Full solution

Front-end resources

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.

Back-end resources

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.

Securing Azure Function Secrets

The main.bicep file in the infrastructure folder handles Azure Function secrets—specifically the Cosmos DB connection string—using secure, recommended practices. This avoids hardcoding sensitive data in code or pipeline variables.

Secret Handling Workflow

1. Key Vault Provisioning
   • An Azure Key Vault is deployed with RBAC enabled for secure access management.

3. Secret Storage

   • The Cosmos DB connection string is retrieved and stored in Key Vault as a secret named CosmosDbConnectionString.

4. Identity-Based Access

   • The Azure Function App is assigned a system-managed identity.
   • This identity is granted the Key Vault Secrets User role to enable secure secret retrieval.

5. Configuration Using Key Vault Reference

   • The application setting references the secret from Key Vault, rather than storing it directly:

     CosmosDbConnectionString: '@Microsoft.KeyVault(VaultName=${keyVaultName};SecretName=CosmosDbConnectionString)'

6. Runtime Access in Application Code

   • At runtime, the Azure Function accesses the secret using:

     var connStr = Environment.GetEnvironmentVariable("CosmosDbConnectionString");

Security Benefits

• Secrets are never exposed in source code or pipelines.
• Secrets can be rotated in Key Vault without redeploying the application.
• Access is managed with RBAC and logged for auditing.