Image Website in Asp.Net Core 6
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.
(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
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.
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.
