<img src="https://secure.leadforensics.com/133892.png" alt="" style="display:none;">

In the previous article, we learned how we can load our custom image from docker's hub repository to Azure WebApp for Containers, but in this article we will learn how we can push multiple containers into Azure Container Registry and host it on Azure WebApp for Containers using docker dompose feature. This is preview feature and is avialable only on Linux hosted WebApps.

In this article, we will also create an Azure container registry and then use docker commands to push a container image into the Azure registry and finally host on WebApp to display live weather data. Make sure you have installed Dockers for windows (in case windows) and running before you build the source code from GitHub.

Docker Compose is a tool for defining and running multi-container Docker applications. Docker Compose define the services that make up your app in docker-compose.

Azure container registry is a private docker registry in Azure where you can store and manage private docker container images and related artifacts.

Creating Azure container registry

Let us quickly navigate to Azure CLI and using bash. If you are unsure how to use Azure CLI please follow this.

Create resource within a region, for example West Europe.

az group create --name Dynamic365RG --location westeurope --tags "Demo=DocComp"

Create a Linux app plan.

az appservice plan create -n linuixappplan -g Dynamic365RG --is-linux

Create Azure container registry

az acr create -n adnancontregistry -g Dynamic365RG --sku Standard --admin-enabled true

Check in Azure portal that we must have everything in place.

No alt text provided for this image

Now open the Azure container registry in Azure portal and note URL, username and password becuase we need them when we finally push our images to this registry.

No alt text provided for this image

Build and Push Images to Registry

Lets clone this git URL in visual studio or visual studio code, it has all the source code and relevant docker files we need. I hope you have opened it with visual studio 2017/2019 and cool thing is with visual studio 2019 with version 16.3+ they have built-in support for terminal (powershell command prompt) which is avaible in View -> Terminal. Navigate to terminal window. Now our project structure should look like this. Source Code.

No alt text provided for this image

The application is very simple because our focus is on docker compose instead of compiling and understanding of complex code. The source code is built in Visual studio 2019 (16.7). Make sure docker-compose project is start up project.

Please note, we have docker compose file and docker file in each project respectively. Here is a preview of our docker compose file.

No alt text provided for this image

The service section defines two containers being used.

  • WeatherPortal (Frontend container which calls weatherapi to render data)
  • WeatherApi (Backend container which fetch live weather data.)

Please note only weatherportal application requires SSL but communication between two containers will be http because they are in isolated environment from external world and hence they do not need SSL. The weatherportal application access the other container (weatherapi) through URL http://weatherapi/weatherforecast. (you can see this call in Index.cshtml.cs page on GitHub).

Now build the project and visual studio will automatically build the two images from you using the docker-compose file if you are using visual studio 2019.

Alternatively (Visual studio code), you can also the run following command to build containers yourself. (In fact, in visual studio behind the scenes executes the same docker-compose command using docker-compose-override.yaml file).

docker-compose   -f   "docker-compose.yml"  - --no-ansi   build 

Now, both the images are ready and now is the time to tag these images and push these images to our registry in Azure. But first, we need to login into our Azure registry using the parameters mention above. URL, username and password.

docker login adnancontregistry.azurecr.io

The above command will prompt for username and password for Azure registry and after that you will get the login succeeded message.

Now tag both the images as shown below (in order to push it into Azure registry):

docker  tag weatherapi:latest   adnancontregistry.azurecr.io/weatherapi:latest
docker  tag weatherportal:latest adnancontregistry.azurecr.io/weatherportal:latest

Now is the time to push both images to our registry:

docker push adnancontregistry.azurecr.io/weatherapi:latest
docker push adnancontregistry.azurecr.io/weatherportal:latest

Remember, the command prompt will show you the registry URL for the push it belongs to as in our case it is adnancontregistry.azurecr.io. We can see in Azure portal both are in our registry.

No alt text provided for this image

Furthermore you can also push these images form visual studio using the publish command but this is personal choice for myself I like automation so I will go with azure devops CI/CD commands/pipelines approach.

Now as our images are in azure container registry (cloud) and hence we need to modify our local docker-compose.yml so that both of image sections pull images from azure container registry. You can copy textform GitHub docker-compose-azureregistry.yaml.

No alt text provided for this image

Now we will need this as configuration file when create our webapp for docker compose in azure. Now go to Azure portal and lets create our multi container application.

Create new Azure Multi Container WebAPP

Please follow the following steps.

No alt text provided for this image

Select Docker compose as options and you can grab the configuration file form github

No alt text provided for this image

Now finally paste following docker-compose-azureregistry.yaml into configuration section as shown below:

No alt text provided for this image

Now click the webapp URL and our weather application is connected to https and showing us the live weather data. Yes, our containers are successfully deployed and connected.

No alt text provided for this image

Great, now our application is running and picking up the live weather data from Norwegian Meteorologisk institutt API (https://api.met.no/). Worth to note is that the weather information container changes color according to the weather image. As it is cloudy, so we have more gray tone. See the webapi on GitHub and extend to your needs. This could be a wonderful starting point for a bigger application. 

The idea behind this blog was to share the thoughts and challenges I have encountered during a requirement, so that others wouldn’t have to go through the same. My customer's application was definitely a bit complex and more layered and partitioned into multiple containers. However, it is important to note that this feature is not replacement of Azure kubernetes service which is very powerful for container orchestrations but again it depends if your application is not that much enterprise in scope for kubernetes.

Stay tuned, there is more to come regarding Dynamics 365 and Finance and Operations.

I hope this would be beneficial to the community!

Abonner på bloggen!

Diskuter dette innlegget

right-arrow share search phone phone-filled menu filter envelope envelope-filled close checkmark caret-down arrow-up arrow-right arrow-left arrow-down