Following on from my previous post around creating a Blazor WASM Container Image of my application which you can access below….. this blog article will focus on the next step of my process which is to take my container image created and push this into an Azure Container Registry:

Using Docker to Containerise a Blazor Web Assembly (WASM) App for a 3D Printed Robot Arm running on a Raspberry Pi!

January 28, 2021March 4, 2022

You can follow along with this blog article using the below YouTube video:

Recap on Creating my Image using Docker Desktop

We can see we have no images or containers created in our Docker Desktop by either using the GUI:

Or running the docker command:

To create our Blazor WASM App image and run it in a container we can do this from our docker-compose.yml as follows:

docker-compose up --build

From here we can see that our Docker Desktop now has a few images as follows:

The image we are concerned with which is running our application is ‘jonnychipz-clazorwasm’.

We are now going to push a copy of this image into our Azure Container Registry.

Creating the Azure Container Registry

For this example I will utilise AZ CLI (Azure Command Line Interface) to create my Azure Container Registry (ACR)

Via a command line, use AZ Logon and if you have more than one subscription, then make sure you utilise th ‘AZ Acount set’ command to ensure you are in the correct subscription context:

Ok so now we can begin creating the resoureces we need in Azure to hold our Container image:

Create a resource Group

First we need to create a resource group in Azure to hold our resources:

 az group create --name jonnychipz-acr-rg --location uksouth

Create a container Registry

Next we can use AZ CLI to create our Container Registry and store it in our newly created resource group, For the purposes of this article I will use the ‘Basic’ tier for Dev and training purposes, but you can find the different tier information here: https://docs.microsoft.com/en-us/azure/container-registry/container-registry-skus

To create an ACR, the name has to be unique across Azure and contain 5-50 alphanumeric characters.

az acr create --resource-group jonnychipz-acr-rg --name jonnychipzacr001 --sku Basic

Log in to the registry

From our command line we can now login to our newly created ACR:

az acr login --name jonnychipzacr001 

Push image to the registry

Before we push the container image I have created into ACR< we must first tag the image with the fully qualified name of my container registry service, in my instance it will be ‘jonnychipzacr001.azurecr.io’

docker tag jonnychipz-blazorwasm jonnychipzacr001.azurecr.io/jonnychipz-blazorwasm:v1

At which point we can see our tagged version of our image:

Finally we can then push our image to our ACR using the Docker ‘Push’ command:

docker push jonnychipzacr001.azurecr.io/jonnychipz-blazorwasm:v1

This invokes the push of the container image:

Before we can see that it has been pushed completely to our container registry in Azure:

We can remove the images locally from our Docker Desktop:

docker rmi jonnychipzacr001.azurecr.io/jonnychipz-blazorwasm:v1

Note that this removes the local copy only and not the copy we have just pushed to ACR.

List Container Images in ACR

We can use the following command to list our images in our ACR:

az acr repository list --name jonnychipzacr001.azurecr.io --output table

Run Container Image in ACR

We can bind the host port of 8080 to our Blazor WASM container port 80 as follows:

 docker run -p 8080:80 jonnychipzacr001.azurecr.io/jonnychipz-blazorwasm:v1

And there we have it!

Our image has been built and published to Azure Container Registry.

All Code from this article can be found here: https://github.com/jonnychipz/YouTubeVideos/tree/main/Azure%20Container%20Registry

Future Blog

In a future article I will be looking to see how we can take this Blazor WASM web application in the ACR and provision this into an Azure Web App Service Plan to run it from there!