Master CI/CD with Jenkins: From Server Setup to Automated React Deployments

Prerequisite Concepts

Meaning of CI

CI stands for Continuous Integration. It pulls code from a repository, runs predefined scripts to compile the code, produces an artifact, and pushes the artifact to an artifact repository (e.g., GitLab CI, GitHub CI, Jenkins). This step does not deploy the code.

Meaning of CD

CD has two meanings: Continuous Delivery and Continuous Deployment. Continuous Delivery deploys the artifact to a test environment for verification, while Continuous Deployment deploys directly to production.

Initialize Environment

Prepare a new server (or local machine) with the following tools:

docker

git

java (required for Jenkins)

jenkins

Docker Installation

yum install -y yum-utils device-mapper-persistent-data lvm2
sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
yum install docker-ce -y
systemctl start docker
systemctl enable docker

Configure Docker to use the Aliyun mirror:

sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<'EOF'
{
  "registry-mirrors": ["https://fwvjnv59.mirror.aliyuncs.com"]
}
EOF

sudo systemctl daemon-reload
sudo systemctl restart docker

Git Installation

yum install git -y

Generate SSH keys for Git access:

ssh-keygen -t rsa -C "your_email"
cat ~/.ssh/id_rsa.pub

Java Installation

yum install -y java

Jenkins Installation

# Add Jenkins repo
wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
# Install Jenkins
yum install jenkins -y

Start and enable Jenkins service:

systemctl start jenkins
systemctl enable jenkins

First Look at Jenkins

Start Jenkins Service

Jenkins is a Java application that provides a platform for continuous integration.

Access Jenkins Service

Open a browser and navigate to http://<server_ip>:8080. Ensure the port is open in the security group.

Initialize Jenkins

During the first start, Jenkins writes an admin password to a file. Retrieve it with:

cat /var/lib/jenkins/secrets/initialAdminPassword

Install Recommended Plugins

Before installing plugins, change the update site to a faster mirror:

sed -i 's|http://updates.jenkins-ci.org/download|https://mirrors.tuna.tsinghua.edu.cn/jenkins/g' /var/lib/jenkins/updates/default.json && \
sed -i 's|http://www.google.com|https://www.baidu.com/g' /var/lib/jenkins/updates/default.json

Configure User

After completing the initial setup, Jenkins is ready for use.

Applying Jenkins

Jenkins can integrate multiple tools (e.g., Git, Node, Nginx) and orchestrate them as a single task.

Integrate various applications such as Git, Node, Nginx.

Manage multiple application steps within one Jenkins job.

Example: Docker Node Task

Create a job that runs the following commands to check Docker version and pull the latest Node image:

docker -v
docker pull node:latest

Creating the Job

Adding the Script

Building the Job

Trigger the build and verify the log ends with STATUS:SUCCESS.

If the job fails due to Docker permission, add the Jenkins user to the Docker group:

gpasswd -a jenkins docker
newgrp docker

Example: Compile React Project

The goal is to build a React project, generate a build directory, and serve it with Nginx.

Install Node Plugin

After installation, configure the Node version in Jenkins global settings.

Test Node Environment

Create a job that runs node -v using the configured Node tool.

Create React Project

Generate a React app locally and push it to a Git repository.

npx create-react-app ci-pro
# or for older npm versions
create-react-app ci-pro
# install globally if needed
npm install -g create-react-app

Project structure after creation:

.
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock

Integrate Nginx

Create an Nginx configuration that serves files from /etc/nginx/html:

server {
    listen 80;
    server_name _;
    root /etc/nginx/html;
}

Build a custom Docker image that copies the React build output into the Nginx image:

FROM nginx:1.15
COPY build /etc/nginx/html
COPY conf /etc/nginx

Configure Git Credentials in Jenkins

Add an SSH private key credential (Credentials → SSH Username with private key) so Jenkins can clone the repository.

Job Build Script

The build steps performed by Jenkins:

#!/bin/sh
npm install --registry=https://registry.npm.taobao.org
npm run build
docker build -t react-project .
# Stop any running containers of the same image
docker kill $(docker ps | awk '/ci-project/ {print $1}')
# Run the new container
docker run -d -p 3000:80 react-project

Build and Verify

Trigger the job, then access http://<server_ip>:3000. A successful React UI indicates the pipeline works.