How to Create a CI/CD Pipeline with Jenkins : React-app Example
In this article, I will show how to use Jenkins to automate CI/CD React App applications. This application uses React and Node.js to display a web page with the content “Welcome to React” and is accompanied by tests to check how rendering the application runs.
Prerequsites
- Virtual machine Installed docker
Running Jenkins in docker
In this tutorial, We will run Jenkins in a Docker container from jenkins/jenkins docker image. Let’s get started
The first step, create a bridge network in terminal
docker network create jenkinsReact-app will run with a docker container in docker container. This practice is called docker in docker (DinD). In simple terms, Docker In Docker involves running Docker within a Docker container. Instead of interacting with the host’s Docker daemon, a new Docker engine is created within a container, providing an isolated environment for managing containers and images. Furthermore about Docker in Docker (DinD), you can read this
Run this command in the terminal to create a container with name jenkins-docker from docker:dind image
docker run \
--name jenkins-docker \
--detach \
--privileged \
--network jenkins \
--network-alias docker \
--env DOCKER_TLS_CERTDIR=/certs \
--volume jenkins-docker-certs:/certs/client \
--volume jenkins-data:/var/jenkins_home \
--publish 2376:2376 \
--publish 3000:3000 \ # this port is for publish the app
--restart always \
docker:dind \
--storage-driver overlay2
Ok from here we had a Docker container for jenkins-docker. Next we will run a Docker container for Blue Ocean. Blue Ocean is UI from jenkins to help provide an interesting interface.
Create a file with command : nano Dockerfile then write this in that file
FROM jenkins/jenkins:2.440.1-jdk17
USER root
RUN apt-get update && apt-get install -y lsb-release
RUN curl -fsSLo /usr/share/keyrings/docker-archive-keyring.asc \
https://download.docker.com/linux/debian/gpg
RUN echo "deb [arch=$(dpkg --print-architecture) \
signed-by=/usr/share/keyrings/docker-archive-keyring.asc] \
https://download.docker.com/linux/debian \
$(lsb_release -cs) stable" > /etc/apt/sources.list.d/docker.list
RUN apt-get update && apt-get install -y docker-ce-cli
USER jenkins
RUN jenkins-plugin-cli --plugins "blueocean docker-workflow"Create a new image from Dockerfile before. We will name it myjenkins-blueocean:2.440.1–1
docker build -t myjenkins-blueocean:2.440.1-1 .Run the myjenkins-blueocean:2.440.1–1 image as a container in Docker using the following docker run command:
docker run \
--name jenkins-blueocean \
--restart=on-failure \
--detach \
--network jenkins \
--env DOCKER_HOST=tcp://docker:2376 \ #this env will integrated with DinD
--env DOCKER_CERT_PATH=/certs/client \
--env DOCKER_TLS_VERIFY=1 \
--publish 8080:8080 \
--publish 50000:50000 \
--volume jenkins-data:/var/jenkins_home \
--volume jenkins-docker-certs:/certs/client:ro \
myjenkins-blueocean:2.440.1-1 By now, we already have 2 containers
Preparing Jenkins Wizard
There are steps we will have to do to access Jenkins. At first time access jenkins, we will asked to unlock with auto-generated password
Access <localhost>:8080 in browser
Copy the password from Jenkins log to access it. Run command
docker logs jenkins-blueocean
Copy the password then input in Jenkins page
Click Install suggested plugins
Fill the administrator data then save and continue
Fill Jenkins URL with domain if you have or let it default
If successful, we will log in Jenkins Dashboard!
The project we will do is react-app from this repository. Fork it to your Github Account
After you Fork it, clone to your local with command:
git clone https://github.com/jenkins-docs/simple-node-js-react-npm-app.gitBack to Jenkins dashboard, at left menu click new item. The project name will be react-app
Fill the description coloumn as you want. Scroll down, find tab written Pipeline. in the Definition tab, choose option Pipeline Script from SCM. Choose Git then write your GitHub’s URL
Create Jenkins Pipeline with Jenkinsfile
We will create a pipeline to automate continous integration — continous deployment (CICD). Jenkins pipeline is created from Jenkinsfile, after that we will commit and push to github
Jenkinsfile is a text file that contain defintion of Jenkins Pipeline. Jenkins pipeline can be written in Declarative or Scripted Pipeline
Create a file namely Jenkinsfile in your local git then write the pipeline
pipeline {
agent {
docker {
image 'node:16-buster-slim'
args '-p 3000:3000'
}
}
stages {
stage('Build') {
steps {
sh 'npm install'
}
}
stage('Test') {
steps {
sh 'chmod +rx ./jenkins/scripts/*.sh'
sh './jenkins/scripts/test.sh'
}
}
stage('Manual Approval') {
steps {
sh './jenkins/scripts/deliver.sh'
input message: 'Lanjutkan ke tahap Deploy? (Klik "Proceed" untuk melanjutkan)'
}
}
stage('Deploy') {
steps {
sh './jenkins/scripts/deliver.sh'
input message: 'Sudah selesai menggunakan React App? (Klik "Proceed" untuk mengakhiri)'
sh './jenkins/scripts/kill.sh'
}
}
}
}Back to Jenkins dashboard, Click on Open Blue Ocean. Choose react-app project and the Run
After copying from the repository, Jenkins will run the job in agent. Then, download Node Docker image and run it in a docker container
The next Jenkins will Run Build stage. At this stage, npm will download all dependencies to run react-app then put in node_modules
Next stage is “Test”. Jenkins will run the test process. If there’s no problem, it will have a check mark
Next is manual approval. Click yes to proceed.
Finally, react-app will be deploying. we can access it on <localhost>:3000
The end pipeline is script to terminate the react-app.
That’s it. With this tutorial now you know how to build CICD through Jenkins
Thank you!
References
