In my pursuit to learn Azure services, I have created a simple Web App in Asp.Net Core 6 to Display Images via an Azure Function.

**I will be using the following services and try to explain as I go ahead **

Blob storage Account

Azure Functions

Azure Web App

Azure KeyVault

Let's Begin

1. Create a resource group

az group create -l westindia -n ProjectNodlehs

This will create a resource group with the name ProjectNodlehs

2. Create a storage account and create 2 containers in the storage account

az storage account create \
  --name treks \
  --resource-group ProjectNodlehs \
  --location westindia \
  --sku Standard_LRS  \
  --kind StorageV2

Upload some sample images in the containers created.

3. Create an Azure HTTP Function to return Image URL and name.

Azure Functions is a serverless solution that allows you to write less code, maintain less infrastructure, and save on costs. Instead of worrying about deploying and maintaining servers, the cloud infrastructure provides all the up-to-date resources needed to keep your applications running.

Azure Functions Overview

(a) Create the Azure function locally in VS code.

Fetch the images stored in a Blob Container using shared access signature (SAS).

(b) Create a Azure Function in portal

az functionapp create \
--name FetchTreks \
--storage-account treks \
--consumption-plan-location westindia \
--resource-group ProjectNodlehs \
--functions-version 4

For initial testing purpose we deploy the function directly from VS Code to Azure Function App on the portal.

4. Create an ASP.NET Core web app (Asp.NET Core 6)

In VS code CLI - command to create a new project

dotnet new webapp -f net6.0

MS Learn Link

We will divide the project in Model and Services to consume the API which return the Image URL list as per the name provided.

The model will contain a class with Image list properties.

The service will consume the Azure function to return the image list.

ASP.NET Core supports the dependency injection (DI) software design pattern, which is a technique for achieving Inversion of Control (IoC) between classes and their dependencies. We have implemented in the same in this web app.

Fundamentals: Dependency-Injection

(a) Create an Interface

(b) Create an implementation for the Interface

In Program.cs we will need to register the custom service to be used.

// Register Custom Services to used
builder.Services.AddTransient<ITrekService,TrekService>();

In future, if the Implementation of the Interface changes, we will need to make changes at a single point in the project.

(c) On the Page we call the service which has been registered

        public ITrekService _ProductService;
        private readonly ILogger<IndexModel> _logger;

        public TrekDisplayModel(ILogger<IndexModel> logger, ITrekService productService)
        {
            _logger = logger;
            _ProductService = productService;
        }

         public async Task OnGetAsync()
        {
            try
            {
               var shows = await _ProductService.GetTrekImages(page);
            }
            catch
            {
             }
        }

5. Create a Web App Serice Plan and Web App in Azure

(a) App Service Plan

az appservice plan create --name TrekBucketListApp --resource-group c --sku F1

(b) Web App

az webapp create --resource-group ProjectNodlehs --plan TrekBucketListApp --name TrekBucketListApp --runtime "DOTNET|6.0"

(c) Creation of app settings in the web app in Az portal

az webapp config appsettings set --name TrekBucketListApp --resource-group ProjectNodlehs --settings Values:test="test123"

For initial testing purposes, we will deploy the web app directly via Vs Code to Az portal

6. Create a Key Vault Service

Instead of saving configuration values in the Azure function and Web App we can make use of the Key vault service to save secrets.

Azure Key Vault is a cloud service for securely storing and accessing secrets. A secret is anything that you want to tightly control access to, such as API keys, passwords, certificates, or cryptographic keys.

Key Vault Basics

We can create a Key Vault from the Azure portal.

The next step would be to enable system-assigned managed identity on the service which will be consuming the Key Vault Secret. In this scenario, we would have to enable the same on the Function app and Web App.

After that, on the Key Vault service, we need to provide Access policy rights to the Function App for reading secrets. This is done via

Function App >> Settings >> Access policies >> Add Access policy

After that, we can add your secrets to save in the Key Vault.

Finally, in the last step, we will replace the plain text configuration values set in the Function app with the value fetched from the Key vault.

This is done using

@Microsoft.KeyVault(SecretUri=)

SecretUri is got from the secret created in the key vault.

After saving the values the configuration if successful will be displayed with a green tick.

Azure Functions is a serverless solution means you don't have to worry about the infrastructure and work on writing code. Azure Functions Overview

I will be using the following services :

• Azure Function

• SendGrid - For sending email notifications

• Application Insights

(1) The First Step is create a Azure TimerTrigger Function using VS Code.

        [FunctionName("FetchCowinData")]
        public static void Run([TimerTrigger("0 */15 * * * *")]TimerInfo myTimer, ILogger log)
        {
            // Code Here
        }

This will be triggered every 15 mins.

The following packages need to be added.

dotnet add package System.Collections --version 4.3.0
dotnet add package System.Net.Http --version 4.3.4  
dotnet add package  SendGrid

We will call the API - Apisetu for checking the available vaccination slots. Data will be fetch per district code wise. If data is found an email will be triggered.

(2) Next Step is to create an Azure Fucntion app in the portal and publish the code via Visual Studio.

The Function app is created using a consumption model to minimize the cost. You're only charged for the time that your function app runs. This plan includes a free grant on a per subscription basis. - Estimating Consumption plan costs

The Config values used in the function was be set via Azure portal >> Function App >> Configuration

The Values in local.settings.json will be overridden by the values in
Function App >> Configuration

To make this even more secure we can set these values via an Azure Key Vault.

(3) SendGrid - Email service - You can register for a free account with a daily limit of 100 emails which is quite good for testing and development purposes.

Will be using SendGrid to send email notifications.The number of emails triggered can be monitored via the SendGrid dashboard.

(4) Application Insights-Useful to monitor your applications. Here we will be using it to monitor the Azure function. Live metrics is also available for providing real time data.

Once the Function is running we get email notification if data is found via the API. Sample Email :

Every SAS is signed with a key. You can sign a SAS in one of two ways:

• With a key created using Azure Active Directory (Azure AD) credentials. A SAS that is signed with Azure AD credentials is a user delegation SAS.

• With the storage account key. Both a service SAS and an account SAS are signed with the storage account key.

Service SAS

https://docs.microsoft.com/en-us/azure/storage/blobs/sas-service-create?tabs=dotnet

Account SAS

https://docs.microsoft.com/en-us/azure/storage/common/storage-account-sas-create-dotnet?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=dotnet

Will be using account SAS with the storage account key.

Trying the same using Asp.Net core 6.

Github Link : https://github.com/ElstonMisquitta88/BlobSASDemo

Create a new ASP.NET Core web app

dotnet new webapp -n AzureFriday -f net6.0
dotnet add package Azure.Storage.Blobs --version 12.10.0
dotnet dev-certs https --trust

In appsettings.json we will add the following keys to be used

  "K_StorageAccountName": "demo",
  "K_StorageAccountKey": "Key Value",
  "K_StorageAccountBlobUri": "https://<name>.blob.core.windows.net",

Code to Fetch Blobs from the container

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Azure.Storage.Blobs;
using Azure.Storage.Blobs.Models;
using Azure.Storage.Sas;
using System;
using System.IO;
using System.Text;
using System.Threading.Tasks;
using Azure.Core;
using Azure.Identity;
using Azure.Storage;


namespace AzureFriday.Pages
{
    public class Sample1Model : PageModel
    {
        public List<string> LstBlobContents { get; set; }

        // requires using Microsoft.Extensions.Configuration;
        private readonly IConfiguration Configuration;

        public Sample1Model(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public void OnGet()
        {
            // Create a service level SAS that only allows reading from service level APIs
            AccountSasBuilder sas = new AccountSasBuilder
            {
                // Allow access to blobs
                Services = AccountSasServices.Blobs,

                // Allow access to the service level APIs
                ResourceTypes = AccountSasResourceTypes.All,

                // Access expires in 1 hour!
                ExpiresOn = DateTimeOffset.UtcNow.AddHours(1)
            };
            // Allow read access
            sas.SetPermissions(AccountSasPermissions.All);

            // Create a SharedKeyCredential that we can use to sign the SAS token
            string StorageAccountName = Configuration["K_StorageAccountName"];
            string StorageAccountKey = Configuration["K_StorageAccountKey"];
            StorageSharedKeyCredential credential = new StorageSharedKeyCredential(StorageAccountName, StorageAccountKey);

            // Build a SAS URI
            string StorageAccountBlobUri = Configuration["K_StorageAccountBlobUri"];
            UriBuilder sasUri = new UriBuilder(StorageAccountBlobUri);
            sasUri.Query = sas.ToSasQueryParameters(credential).ToString();

            // Create a client that can authenticate with the SAS URI
            string containerName = "data";
            BlobServiceClient service = new BlobServiceClient(sasUri.Uri);

            List<string> numberList = new List<string>();
            foreach (BlobItem blob in service.GetBlobContainerClient(containerName).GetBlobs())
            {
                BlobClient blobClient = service.GetBlobContainerClient(containerName).GetBlobClient(blob.Name);
                numberList.Add(blobClient.Uri.ToString());
            }
            LstBlobContents = numberList;
        }
    }
}

Code to Render Images on Page

@page
@model AzureFriday.Pages.Sample1Model
@{

    foreach (var item in Model.LstBlobContents)
    {
        <p>
        <img src=@item width="200" height="150">
        </p>
    }
}

https://acloudguru.com/blog/engineering/cloudguruchallenge-your-resume-in-azure

The final output
https://www.resume.elston.co.in/

GitHub Link : https://github.com/ElstonMisquitta88/cloudguru-azure-resume

The main purpose of taking the challenge was that I am new to Azure and wanted to learn more and work on Azure services. This became quite a learning experience. Trying out the servies and deploying on a live environment was fun.

I have divided the work done into the following steps:

1. Create a Static Website.
2. Custom Domain for the Website.
3. Workflow in Github for the static website.
4. Create a Cosmos DB for saving the website visitor count.
5. Create a Function to Fetch/Update the visitor count.
6. Create a KeyValult to save the Cosmos DB connection string.
7. Workflow in Github for the Function.
8. Create a simple Unit test for the Function

(Step 1) Create a Static Website

• Create a Repository in GitHub.

• Used a website template from https://templateflip.com/

• Added the files to the GitHub Repository.

• Installed GitHub Desktop to create a local clone copy.

• In Visual Studio via the Source Control Option - Push any changes in the files to GitHub Repository.

• Create a Resource Group on Azure Portal Via CLI

Prior to this step you need to install Azure CLI or use Via Cloud Shell in Azure Portal

In CMD type (this is to login into azure)

az login

You will be redirected to a web page for Azure subscription authentication.

az group create --location   --name
az group create -l westindia -n rg_cg_resume

• Next step is to create a Storage Account

az storage account create --name --resource-group
az storage account create --name cgresume --resource-group rg_cg_resume --kind StorageV2 --access-tier hot --location westindia --sku Standard_LRS

• In Azure portal navigate to the storage account which you have just created. In that search for Static Website option is the left hand side blade.

Enable the static Website and add the name of the default page to be used. Click on Save.

After saving the Primary endpoint will be generated. You can use this link to view your website.

(Step 2) Custom Domain for the Website

• To assign a custom Domain we will need to create first a CDN profile.

• After creating the CDN Profile you will need to create a Endpoint which will point to the storage account holding the static website.

• Give a name for the endpoint.

• Origin Type - Storage static website

• Origin Hostname - Enter the Primary endpoint which was generated from the storage static website(This will be available to select from the dropdown)

• After creation of the endpoint, after sometime you will be able to view your website via the Endpoint hostname. (This will take some time)

• Now we will need to assign your custom domain to the endpoint created.

• First create a CNAME record will your domain provider pointing to the Endpoint hostname.

• After that create a custom domain entry and save.

• Next Step is to enable HTTPS for the domain.

At this point we have our basic website up and running with Https enabled.

(Step 3) Workflow in Github for the static website

• We will create a Workflow in GitHub to publish any changes checked in GitHub.

  https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blobs-static-site-github-actions

• You need to execute this is Azure CLI

az ad sp create-for-rbac --name {myStaticSite} --role contributor --scopes /subscriptions/{subscription-id}/resourceGroups/{resource-group} --sdk-auth

• Replace the placeholders with your subscription ID and resource group name. The output is a JSON object with the role assignment credentials that provide access to your storage account similar to below. Copy this JSON object for later.

{
    "clientId": "<GUID>",
    "clientSecret": "<GUID>",
    "subscriptionId": "<GUID>",
    "tenantId": "<GUID>",
    (...)
  }

• Configure the GitHub secret

• In GitHub, browse your repository.

• Select Settings > Secrets > New secret.

• Paste the entire JSON output from the Azure CLI command into the secret's value field. Give the secret a name like AZURE_CREDENTIALS.

• Go to Actions for your GitHub repository.

• Select Set up your workflow yourself.

• The file will appear in the .github/workflows folder of your repository

name: Blob storage website CI

on:
    push:
        branches: [ main]
    pull_request:
        branches: [ main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:            
    - uses: actions/checkout@v2
    - uses: azure/login@v1
      with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

    - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        azcliversion: 2.0.72
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        azcliversion: 2.0.72
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"

  # Azure logout 
    - name: logout
      run: |
            az logout

• Review your deployment
• Go to Actions for your GitHub repository.
• Open the first result to see detailed logs of your workflow's run.

(Step 4) Create a Cosmos DB for saving the website visitor count.

(Step 5) Create a Function to Fetch/Update the visitor count

• Create a HTTP Trigger Function via Visual Studio Code. In that we will be using Input / Output binding to fetch and update value from Cosmos DB.

using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Logging;
using Newtonsoft.Json;
using System.Net;
using System.Net.Http;
using System.Text;

namespace CustomCounter
{
     public class Counter
    {
        [JsonProperty(PropertyName = "id")]
        public string Id {get; set;}

        [JsonProperty(PropertyName = "index")]
        public string index {get; set;}


        [JsonProperty(PropertyName = "Count")]
        public int Count {get;set;}

    }
    public static class ResumeCounterTrigger
    {
        [FunctionName("GetResumeCounter")]
        public static HttpResponseMessage Run(
            [HttpTrigger(AuthorizationLevel.Anonymous , "get", Route = null)] HttpRequest req,
                     [CosmosDB(
                    databaseName:"CloudResume", 
                    collectionName: "tblCloudResume",
                    ConnectionStringSetting = "democosmos_DOCUMENTDB", 
                    Id = "One", 
                    PartitionKey = "RecordCount")] Counter Readcounter,  
                    [CosmosDB(
                        databaseName:"CloudResume",
                        collectionName: "tblCloudResume",
                        ConnectionStringSetting = "democosmos_DOCUMENTDB",
                        Id = "One", 
                        PartitionKey = "RecordCount")] out Counter updatedCounter,            
            ILogger log)
        {
                log.LogInformation("GetResumeCounter was triggered.");
                updatedCounter = Readcounter;
                updatedCounter.Count += 1;
           var jsonToReturn = JsonConvert.SerializeObject(updatedCounter);
           return new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content = new StringContent(jsonToReturn, Encoding.UTF8, "application/json")
            };
        }
    }
}

• Next a create a function App in the Azure Portal. Have selected consumption based function.
• Have enabled Application Insights for the same.
• You also have to enable CORS (use the URL of the static website) to use the function.

(Step 6) Create a KeyValult to save the Cosmos DB connection string

• In order to prevent the Cosmos DB connection string in the function to be plain text we will be using KeyValult by creating a secret.

https://docs.microsoft.com/en-us/azure/key-vault/secrets/quick-create-portal

Additional steps to be done

• Enable Managed Identify in Azure Functions https://docs.microsoft.com/en-us/azure/active-directory/managed-identities-azure-resources/overview

• In Key vault add access policy for the created Identity

• Finally in the function, in Application Settings add the value for the Cosmos DB connection string.

https://docs.microsoft.com/en-us/azure/app-service/app-service-key-vault-references

(Step 7) Workflow in Github for the Function.

• We will create a workflow for publishing Function code to the Function app.

name: WebSiteFunctions

# Deploy push made from Functions folder.
on:
  push:
        branches: [ main ]
        paths:
        - 'Functions/**'


# CONFIGURATION
# For help, go to https://github.com/Azure/Actions
# 1. Paste the RBAC json into the following secret in your repository:
#   AZURE_RBAC_CREDENTIALS
# 2. Change these variables for your configuration:

env:
  AZURE_FUNCTIONAPP_NAME: <Function App Name>  
  AZURE_FUNCTIONAPP_PACKAGE_PATH: '<path to your web app project, defaults to the repository root>'  
  DOTNET_VERSION: '3.1'    # dotnet version

jobs:
  build-and-deploy:
    runs-on: windows-latest
    steps:
    - name: 'Checkout GitHub Action'
      uses: actions/checkout@master

    - name: 'Login via Azure CLI'
      uses: azure/login@v1
      with:
        creds: ${{ secrets.AZURE_CREDENTIALS }}

    - name: Setup DotNet ${{ env.DOTNET_VERSION }} Environment
      uses: actions/setup-dotnet@v1
      with:
        dotnet-version: ${{ env.DOTNET_VERSION }}

  - name: 'Run dotnet'
      shell: pwsh
      run: |
        pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/API'
        dotnet build --configuration Release --output ./output
        popd

    - name: 'Run Unit Test'
      shell: pwsh
      run: | 
        pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/Test'
        dotnet test

    - name: 'Run Azure Functions Action'
      uses: Azure/functions-action@v1
      id: fa
      with:
        app-name: ${{ env.AZURE_FUNCTIONAPP_NAME }}
        package: '${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/API/output'

(Step 8) Create a simple Unit test for the Function

https://madebygps.com/how-to-use-xunit-with-azure-functions/

https://docs.microsoft.com/en-us/azure/azure-functions/functions-test-a-function#c-in-visual-studio