This is my Cloud Resume Challenge built on Azure. It's a static website hosted on Azure Storage, with a visitor counter built on Azure Functions. The website is built with HTML, CSS, and JavaScript. The visitor counter is built with .NET 8.0 and Azure Functions using the isolated process model.
If you'd like to build your own, here is the YouTube video video.
- 🔍 Demo
- 📝 Pre-requisites
- 🏗️ Structure
- ⚙️ Setup
- 🌐 Frontend Resources
- ⚡ Backend Resources
- 🧪 Testing Resources
- 🔄 CI/CD Resources
- 📌 TO DO
- 👥 Contributing
- 📜 License
I leverage Dev Containers for my development environment. If you'd like to use it, you'll need to install Docker and the Dev Containers extension for VS Code.
frontend/: Contains the website.main.js: Contains visitor counter code.
api/: Contains the .NET 8.0 API deployed on Azure Functions.Program.cs: Contains the dependency injection setup and DefaultAzureCredential configuration.CosmosDbService.cs: Service for interacting with Cosmos DB.GetVisitorCounter.cs: Contains the visitor counter code.
.github/workflows/: Contains CI/CD workflow configurations..devcontainer: Contains the container configuration for VS Code.
- Make sure Docker is running.
- Open the project in VS Code.
- Press
Ctrl/Cmd + Shift + Pto open the command palette. - Type "Reopen in Container" and select:
.NET APIcontainer for working with the Azure Functions backend.JS Frontendcontainer for working with the frontend.Testscontainer for running tests.
- VS Code will reload and you'll be in the container.
The front-end is a static site with HTML, CSS, and JavaScript. It includes a visitor counter that fetches data via an API call to an Azure Function.
- 🎨 I used this template to create my site.
- 📡 This article explains how to use the JavaScript Fetch API to make an API call.
- 🗄️ Azure Storage Explorer is a handy tool for working with Storage Accounts.
- 🌍 This is how you can deploy a static site to blob storage.
The back-end is an HTTP triggered Azure Function with Azure Cosmos DB integration. The function is built using .NET 8.0 with the isolated process model and uses DefaultAzureCredential for secure authentication to Cosmos DB.
- 🔧 Create a Cosmos DB account
- 🛠️ Create an HTTP triggered Azure Function in Visual Studio Code
- 🔌 Azure Functions Cosmos DB bindings
- 📤 Enable CORS with Azure Functions locally and once it's deployed to Azure.
- 🔐 DefaultAzureCredential documentation
The application uses DefaultAzureCredential to authenticate with Azure Cosmos DB. This simplifies credential management by supporting multiple authentication methods and improves security by eliminating the need for connection strings with sensitive keys.
- Copy
api/local.settings.json.templatetoapi/local.settings.json - Set the
CosmosDbEndpointto your Cosmos DB endpoint URL - For local authentication, you can use:
- Azure CLI: Sign in with
az loginbefore running the application - Azure Developer CLI: Sign in with
azd auth loginbefore running the application - Visual Studio: Use Visual Studio authentication
- Service Principal: Set
AZURE_TENANT_ID,AZURE_CLIENT_ID, andAZURE_CLIENT_SECRETenvironment variables
- Azure CLI: Sign in with
The DefaultAzureCredential will automatically detect and use credentials from the development environment.
When deployed to Azure Functions, the app will use the Function App's managed identity:
- Enable system-assigned managed identity on your Function App
- Grant the managed identity appropriate permissions on your Cosmos DB account
- Configure the app setting in your Function App:
CosmosDbEndpoint: Your Cosmos DB endpoint URLCosmosDbDatabaseName: Your database name (e.g., "AzureResume")CosmosDbContainerName: Your container name (e.g., "Counter")
Testing is important. Though my tests are simple, they exist. I am using .NET but some of these resources will apply to any language.
- 🚢 Deploy a blob storage static site with GitHub Actions
- 🔄 Deploy an Azure Function to Azure with GitHub Actions
- ✅ Implement .NET testing in GitHub Actions
- 🔄 Implement tests into CI/CD.
- 🏗️ Create IaC files.
- 📝 Improve tests and tests documentation.
Contributions are welcome! Please read the contributing guidelines first.
This project is licensed under the MIT License - see the LICENSE file for details.