Why do you need to use a Jenkins pipeline to push your docker image into your docker hub? Assuming you have a docker file and you build your docker images manually and push it to your hub. Suppose your developer needs to make changes or commits in the GitHub repository once in a while; the current application might not be in sync with the one that is in the Docker hub. If the developer commits in the repository periodically, for instance, on a daily basis, then you need to automate building a new docker image every time. Remember, your docker file is constant, but the docker image is not. This changes every time when you build a new image. The docker image comes with a tag and an ID. This blog explains the whole process of building a docker image and pushing it to the docker hub using the Jenkins pipeline. You can also automate this periodically.

Click here for Jenkins tutorials.

I have created a ReactJs application with 3 web pages and provided it in the GitHub repository.

Click this link for your Repository.

We will use this repository for our Jenkins pipeline as SCM. You also need accounts for GitHub, docker, and Jenkins.

Step 1: Jenkins – Plugins to download

You need to install plugins for the docker in Jenkins. Go to Manage Jenkins > Manage Plugins > Available and install 5 plugins: search for these following plugins and install them,

1. Docker API Plugin
2. Docker Commons Plugin
3. Docker Pipeline
4. Docker Plugin
5. docker-build-step

Step 2: Jenkins – Add your Credentials

You have to add your docker account’s username and password to your Jenkins account.

Go to Manage Jenkins > Manage Credentials > System > Global credentials (unrestricted) > Add Credentials

Choose Kind as Username with password and Scope as Global; provide your docker username and password with a unique ID of your own. This ID is used for referring the username with a password later in your pipelines.

You have to add GitHub credentials and give your GitHub repository URL. Make sure you have a Dockerfile on your repository. (The repository link from this blog has one already!)

Step 3: Jenkins – Create a Pipeline

Select Pipeline from the list, and give a suitable name for your pipeline project. Click OK.

Step 4: Write your Pipeline Script

1. On your pipeline project, go to Configure for writing your pipeline script.
2. We will now write this script in the pipeline box, Select your Definition, as Pipeline.

node {   
    stage('Clone repository') {
        git credentialsId: 'git', url: 'https://github.com/Monishamacharla/reactapp'
    }
    
    stage('Build image') {
       dockerImage = docker.build("monishavasu/my-react-app:latest")
    }
    
 stage('Push image') {
        withDockerRegistry([ credentialsId: "dockerhubaccount", url: "" ]) {
        dockerImage.push()
        }
    }    
}

1. First of all, you are cloning your git repo from the URL mentioned. This can be done by adding the credentials of your git account in your Jenkins, the Same as Docker.
2. Next, You will build the image, assuming you already have your dockerfile on your repository on the main directory, also you have to create a repository on your docker account, here I have given the name “my-react-app”. This will build your docker image
3. After this, you have to push the image into your docker hub. Now is the time to provide your docker credentials ID that you have created before.
4. You can schedule your jobs periodically too.

Basically, you can also write a separate file for your pipeline script and add it to your repository, this file is called as Jenkinsfile. The Jenkinsfile is like a text file similar to the contents present on the pipeline script.

Step 5: Build

Save your Pipeline script, and then click Build Now.

Go to your console output and check the messages.

Step 5: Check your Docker Hub

Go to your repository in the docker hub, and check your latest docker image built and pushed by the Jenkins.

The next step would be deploying the container in a testing environment, you can use Amazon Elastic Container Services or even Kubernetes.

Happy learning!