Create and Push a Docker Image to Azure Container Registry

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:

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
Command Line
Azure Portal View

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
Command Line
Azure Portal View

Log in to the registry

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

az acr login --name jonnychipzacr001 
Command line

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:

Command Line
Azure Portal View

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!

One thought on “Create and Push a Docker Image to Azure Container Registry

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s