Build Docker Image with Azure DevOps and Push to Docker Hub

In this article we will :

• Build a docker image from a NodeJS application
• Build the Docker image with an Azure DevOps pipeline
• Push the Docker image to Docker Hub with Azure

Create an Azure account.

This is a prerequisite to continue this tutorial. Please note that you can go for the free-tier for now. The link HERE.

Create a Git Repository

I went for the Gitlab free account, but any git repo will do the job.

Create a Docker Hub repository

Again, the free account is fully sufficient to start. Only limitation is number of repositories and users. Link HERE.

Your App

For the tutorial, I’ll build a simple NodeJS app, following their Hello World.

Dockerize the App

Let’s say, we have our Micro Service in whatever language (we don’t care because the goal is to put it in a docker container with the deployment stack).

It can be a NodeJS app, a Spring Boot App, a ReactJS front…

Dockerfile & .dockerignore

Everything is explained in the NodeJS documentation.

Resulting Dockerfile

Test on local with a docker build if you want to be sure it works

Azure Pipeline

Create a new Build Pipeline

• Select Other git for any git repository to continue with the configuration screens.

• Create a new service connection for your Git Repo

• Set the default branch (if you don’t know or care, surely it’s master)

• Select the Docker Container template

We can see now that our pipeline has 2 steps, we will configure them

Build an Image (docker build)

• Create a new Docker Registry Service Connection

• Select “Container Registry” as “Container Registry Type”. Instead of Azure Registry because we will build our image and push to Docker Hub instead of Azure Registry

• Change the Image name to reflect you Docker Hub’s path and project name/version

This example assumes that my Docker Hub username is : hubuser

My repository is : hubrepo

My image name : 1 (Build Id, incremented at each pipeline execution)

Push an Image (docker push)

• Again, the Container Registry and the Service Connection

• The Image name, matching the name defined earlier

And that’s it! We can save the job and queue.

Tips

• If you have Build Error and needs more log, launch a manual build with “system.debug” to true.

It will provide full logs.

Thank you for your time.