Lab 04 Automate everything

In this lab you will deploy the complete AskVantage App to Azure. It assumes that you have completed all previous labs, and builds on top of the gathered knowledge and created Azure resources.

Customize the application

To make the AskVantage app your own app, open the file src/AskVantage/AskVantage.Frontend.Client/Layout/NavMenu.razor and replace the name of your app with your name:

Replace this:

<a class="navbar-brand" href="">AskVantage.Frontend</a>

With something like this:

<a class="navbar-brand" href="">AskVantage by Alex and Loek</a>

Of course, this is a purely cosmetic change. Later this will be the 'proof' that you are in fact running your own application in production.

Container Images

You will run the AskVantage app as a container on the Azure Container Apps resource. To do so, you will need to build container images of the Frontend and Image API projects. Once the images are ready, they need to be pushed (uploaded) to a custom Azure Container Registry, so they can be pulled (downloaded) by the Azure Container Apps service.

Run this command to list your container registry:

ACRNAME=$(az acr list -g rg-workshop -o table | awk 'NR==3 {print $1}')
echo $ACRNAME

This command extracts the name column value of the first line in the table and assigns it to the variable ACRNAME and displays the value. We will need this when tagging container images later.

Use the following command to log in to the container registry:

az acr login --name $ACRNAME

This authenticates your az and docker CLI to the Azure Container Registry, so you can push the images.

Getting Azure Container Registry details

Execute the following commands to build a container image for the Frontend project, using the Dockerfile in the solution:

cd /workspaces/Workshop-Azure-AI/src
docker buildx build -t frontend:v1 -f ./AskVantage/AskVantage.Frontend/Dockerfile .

The next command tags the image with the name of your Container Registry, so the CLI knows where to push the image to:

docker tag frontend:v1 $ACRNAME.azurecr.io/frontend:v1

Use the following Azure CLI command to push the freshly tagged image:

docker push $ACRNAME.azurecr.io/frontend:v1

Assert that the image was pushed to your registry:

az acr repository show-tags --name $ACRNAME --repository frontend --output tsv

The result should be v1.

Image API

Let's build the second container image for the Image API. We could use the exact same approach as above, but here we will use a different approach. The result will be the same. In the terminal navigate to the Image API project folder:

cd /workspaces/Workshop-Azure-AI/src/AskVantage/Apis/ImageApi

Build and tag the container image using .NET SDK. Verify that the new image was created and tagged correctly:

dotnet publish -c Release -p:PublishProfile=DefaultContainer -p:ContainerRepository=$ACRNAME.azurecr.io/imageapi -p:ContainerImageTags=v1
docker images

The output of the second statement should look similar to this:

REPOSITORY                                     TAG            IMAGE ID       CREATED          SIZE
acrworkshopzbl4bnkm4vvlg.azurecr.io/imageapi   v1             1573a7e119d6   36 seconds ago   243MB
acrworkshopzbl4bnkm4vvlg.azurecr.io/frontend   v1             7069cbff4d2e   14 minutes ago   271MB

Use the following Azure CLI command to push the image:

docker push $ACRNAME.azurecr.io/imageapi:v1

Deploying to Azure

The previous lab ended with a deployment to Azure. Let's first see if that deployment succeeded, before we publish our own container image to the Azure Container Apps Environment.

Run the following command to get the URL of the 'frontend' container running in Azure Container Apps:

az containerapp show   --name frontend   --resource-group rg-workshop   --query "properties.configuration.ingress.fqdn"   --output tsv

The output should look similar to this:

frontend.livelywater-e1234567.westeurope.azurecontainerapps.io

Copy this URL and paste it into a new browser tab. This should show the application, even though you have not deployed to Container Apps Environment yet? This is because the earlier deployment used images prepared earlier by us during the development of this workshop. This way the initial deployment works, even if the proper images were not available yet.

Open the Bicep template file infrastructure/template.bicep again and inspect the parameters. The parameter named acrLoginServer indicates the Azure Container Registry instance that will be used to pull the imageapi and frontend images. This needs to be replaced with the name of your personal registry.

In a terminal, rerun the command to get and display your registry name again and copy the displayed value:

ACRNAME=$(az acr list -g rg-workshop -o table | awk 'NR==3 {print $1}')
echo $ACRNAME

In the Bicep template, replace the registry name of the acrLoginServer parameter. The value should still end with {your registry name}.azurecr.io. Only replace the registry name before the period ..

Deploy the Bicep template again, to replace the container images with your own images:

 az deployment group create --resource-group rg-workshop --template-file template.bicep 

Just like in Lab 03, the deployment might return an error about OpenAI, due to a bug in Azure. It will work regardless. Assert that the image is now pulled from your personal Azure Container Registry:

az containerapp show \
--name frontend \
--resource-group rg-workshop \
--query "properties.template.containers[].{Name:name, Image:image}" \
--output table

The output should look similar to this:

  Name                Image
  ------------------  -----------------------------------------------
  frontend-container  acrworkshopzbl1abn23aalg.azurecr.io/frontend:v1

In your browser, refresh the application page from before. It should now show your customized AskVantage application!

You have deployed your application to production, using Infrastructure as Code and scripted commands. No manual steps like clicking in portals were required, and all steps can be executed from an automated delivery pipeline. Feel free to create a pipeline using GitHub Actions.