This is a hands-on practical on deploying the React-Django application on docker with the help of the Jenkins Master node and Agent node. The web app I am going to use is react-django-todo.
Prerequisites
To begin with, you need to have two systems, here I am using AWS EC2 t2.micro instances (with Ubuntu 22.0 installed) and to differentiate I have labeled them with labels Master and Agent. This project requires docker, docker-compose, and Java installed on your systems. One more tool, Jenkins, is required in the Master server.
Here are my blogs you can refer to:
Create AWS EC2 instance: https://neel-soni.hashnode.dev/launch-os-on-aws-step-by-step-guide,
Install docker and docker-compose: https://neel-soni.hashnode.dev/install-docker-on-ubuntu-and-centos and
Install Jenkins: https://neel-soni.hashnode.dev/install-jenkins-on-ubuntu-and-centos
Two instances are up and running
Check versions of docker, Java, and Jenkins to verify tools are installed.
docker -v
docker-compose -v
java -version
systemctl status jenkins
All tools installed.
- Give access of the docker to the Agent server by adding the user to the docker group. With this, there will be no need of using sudo before docker.
SSH Connection
Connect Master and Agent systems with ssh.
To create ssh connection, create a public and private key of the Master server and give access of the public key to the Agent server. This will help the Jenkins Master node to connect with the Agent node.
- Goto master and change the directory to .ssh
cd .ssh
- create keys with ssh-keygen
ssh-keygen
Your keys will be created.
Now to connect, copy the Master server's public key (id_rsa.pub) and paste into the Agent server's .ssh/authorizes_keys file.
- To test, you can connect to the Agent server from the Master server. (Will need IP of the Agent server)
ssh ubuntu@18.212.221.130
After the connection is established and you have verified then exit the connection.
Both the systems are connected, so we can head over to Jenkins and set up as Jenkins Agent.
Setup an Agent node
To set up an Agent node, Follow the steps:
- Go to the Master's Jenkins dashboard by using the IP address of the Master server with port number 8080 <54.89.165.214:8080> and choose "Setup an Agent". If you don't find the option on the dashboard do check at /manage/computer/ and click on "Create Node".
- Give a name for the node and click on "Create".
- Next, there will be a form you need to fill up.
- Enter a description (optional)
- Give root directory: mean working directory. I have given "/home/ubuntu/"
- Give a label to the node. I have given "dev".
- In the usage option choose "Use this node as much as possible".
- Launch method choose "Launch method via SSH"
- Host: enter the Agent IP address.
- For the credentials click on "Add" and choose "Jenkins" and it will pop up another form.
- In the kind option choose "SSH username with private key"
- What we will do here is, give the private key of the Master server to Jenkins so that it can create a connection with the Agent server.
- ID: choose any id, I have given "dev-ssh-key".
- Give a description.
- Username: Enter the username of the system. In my case, it is "ubuntu".
- Private Key: choose to enter directly.
- We have already generated keys in the Master server, copy the private key and past it into the box.
- After adding the key click on save.
You will be back on the main form.
Next in credentials, choose the option that you have just created. In my case it is Ubuntu.
In host key verification choose "Non verifying verification Strategy".
Click on save. That's all you need to do for setting up an Agent node.
- If the connection is successful, then you will see "In sync" in the clock difference tab.
GREATE! The Agent node is configured successfully with the Master node.
Create a pipeline
To create a pipeline, follow the steps:
- Go to the dashboard of the Master node and click on 'Create a job"
- Enter an item name, choose "Pipeline" from the options, and click "Ok".
Give a description and select "GitHub project". Enter the GitHub repo URL of your project. In my case, it is "https://github.com/neelsoni26/react_django_demo_app"
In Build Triggers choose "GitHub hook trigger for gitscm polling"
- In the pipeline section, I have chosen "Pipeline script from SCM" because I have my Jenkinsfile on GitHub. This is the best option if you don't want to modify the pipeline from the Jenkins portal. It will automatically change once you update the code on GitHub.
- The script path is Jenkinsfile.
Click on "Save".
In my Jenkinsfile,
- I have defined agent as "dev".
- Cloned the GitHub code.
- Build the image.
- Set environment variables for credentials to login into dockerhub.
- Tag the image.
- Push the image.
- Down already running containers and up a new build.
pipeline
agent {label "dev"}
stages{
stage("Clone Code"){
steps{
git url: "https://github.com/neelsoni26/react_django_demo_app", branch: "main"
}
}
stage("Build and Test") {
steps{
sh "docker build . -t django-todo-app"
}
}
stage("Login and Push image")
{
steps{
withCredentials([usernamePassword(credentialsId:"dockerhub",passwordVariable:"dockerhubPassword",usernameVariable:"dockerhubUsername")]){
sh """
#!/bin/sh
docker tag django-todo-app ${env.dockerhubUsername}/django-todo-app:latest
docker login -u ${env.dockerhubUsername} -p ${env.dockerhubPassword}
docker push ${env.dockerhubUsername}/django-todo-app:latest
"""
}
}
}
stage("Deploy") {
steps{
sh "docker-compose down && docker-compose up -d"
}
}
}
}{
- For credentials as environment,
- Find the plugin "Environmental Injector" and install it.
- After installation restart the server.
- Set credentials at Manage Jenkins > Credentials
- click on global
- Click on "New Credentials" and fill up the form.
- Click on "Create" and done. now you can use these data in Jenkins.
The pipeline is ready. However, to trigger the build GitHub webhook must be configured.
GitHub webhook
To setup a webhook, follow the steps:
- Open the GitHub repository page and click on "Setting".
- Click on "Webhooks" from the left side list.
- Click on "Add webhook".
- It will open a form.
Enter URL. The structure should be <IP:8080/github-webhook/>.
Click on "Save".
- If it connects then it will show a green check mark else a red cross mark.
The GitHub webhook has been configured.
Build Pipeline
To build a pipeline click on the "Build now" option from the left side list.
As I have made this pipeline fully automated, I will update something in the source code on GitHub and it will start a new build itself.
Updated docker-compose file.
Now it has created a new build and succeeded. Check the stages below.
Check on the Docker Hub
To check web app is running, port 8001 must be open.
Use the Agent server's IP to view the application.
The app is up and running.
This was the full hands-on on how to create and deploy project with Master and Agent nodes also created a fully automated CI/CD pipeline.
How was this project? Let me know in the comment down below.
Thank You.