Deploy multiple docker container to Azure container registry

This post is about deploying multiple docker container to Azure container registry.The below demo customer manager application and micro services will be containerised using docker and then pushed over to Azure as a private container registry.

The application uses below tech stack which is forked from https://github.com/DanWahlin/Angular-Docker-Microservices

Tech StackVersion/Toolset
Frontend AppAngular 6, Node.js, MongoDB
Container/ImagingDocker Desktop
Web ServerNginx
MicroservicesASP.NET Core/PostgreSQL 
Private Registry Azure container registry

Prerequities

  • Homebrew on Mac
  • Git version control
  • npm installed v14.2.0s
  • Install Docker Community Edition – https://docs.docker.com/docker-for-mac/install/
  • Have an account in Microsoft Azure to create a container registry using the Azure portal.

Build the source code on local

Clone the source code onto your local working directory.

Check for Git to be installed and clone the GitHub repository on your local machine working folder.

git clone https://github.com/varunmaggo/Angular-Docker-Microservices

Once the git clone is completed, the local folder will have the required files. I use VSCode for Editing the configuration files.

In order to build the solution on local, we install the local packages/dependencies. Execute the below commands, it takes a few minutes to install required packages/dependencies.

  1. Install Angular CLI: npm install @angular/cli -g
  2. Run npm install at the root of the project
  3. Run npm install in ./microservices/node

Once the packages are done, just execute the command ng build

Dockerize the Application/Micro-services

Now we will need to add and configure docker-compose.yml file, since we have multiple services so need to have multiple ports being configured as well.

Before building via docker, adding Docker Compose support to the project, along with multiple docker files which are as follows:-

  • container_name: nginx: .docker/nginx.dockerfile
  • container_name: nodeapp: .docker/node.development.dockerfile
  • container_name: ‘aspnetcoreapp’: .docker/aspnetcore.development.dockerfile

Build the solution via Docker commands.

Run docker-compose build

Once the solution builds successfully, all the images are visible. Also check for tagging which are very crucial for later on docker images to be pushed. I had tried this demo yesterday, so my images created are of yesterday.

Run docker images

Run docker-compose up

It builds, (re)creates, starts, and attaches to containers for a service.

Now the application has started and can be accessible on localhost.

Also, we can see the docker dashboard, for their available ports and services availability.

Create Azure Container Registry to push dockerized application/micro-services

Open the Microsoft Azure portal, to create Azure Container Registry. https://portal.azure.com

We create a new azure container registry – MiniCRM.

minicrmdemo.azurecr.io

docker login minicrmdemo.azurecr.io

Before pushing an image to ACR registry, we must tag it with the fully qualified name of ACR login server. In this case, minicrmdemo.azurecr.io

docker tag nginx minicrmdemo.azurecr.io/angular-docker-microservices:latest 

Similar docker tag commands can be executed for multiple images. Next step is to push the docker container to ACR.

docker push minicrmdemo.azurecr.io/angular-docker-microservices:latest

Next Demo

To use this docker image from container, we can launch web app in Azure, that will be a separate post in itself.