Zhiyuan Wang, Medical Support Group of Wedoctor Front-end Technology Department

Concept of pre –

The meaning of CI

CI stands for continuous building.

After pulling the code from the code base, execute the operation script predefined by the user, build a product through a series of compilation operations, and push the product to the product base. Common tools include Gitlab CI, Github CI, Jenkins, etc. This link does not participate in the deployment, but only builds the code and saves the build. The building is called an artifact, and the place where the artifact is kept is called a artifact repository

The implications of the CD

CD has two meanings: Continuous Deployment and Continuous Delivery.

The concept of continuous delivery is to take artifacts out of the artifact repository and deploy them in a test environment/deliver them to the customer for early testing. Continuous deployment is the deployment of artifacts to production.

Initializing the Environment

From now on, we will really practice CI, CD, it is recommended to get a new server, to avoid messing up the environment, if you need to buy, you can refer to the document nanny guide: buy Ali Cloud ECS server. Whether newly bought or their own computer, computer basic environment is as follows

  • docker
  • git
  • Java: Jenkins is based on the Java environment
  • jenkins

Assuming the machine is available, based on centos, let’s set up the service

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
Copy the code

Here you need to configure the docker image source as Ali Cloud, otherwise the operation of docker image download will be very slow

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

After modification, you need to reload all modified configuration files

sudo systemctl daemon-reload
sudo systemctl restart docker
Copy the code

Git installed

yum install git -y
Copy the code

Git needs to be initialized to generate SSH public and private keys

ssh-keygen -t rsa -C "Your email"
Copy the code

SSH /. You can run the following command to view the public key and configure it on a platform such as Github or code cloud so that the corresponding private key has the permission to operate the repository

cat ~/.ssh/id_rsa.pub 
Copy the code

Extension: You can run the following command to obtain the private key, which is not required here, but is required in the later configuration of Jenkins permission, please pay attention to it

cat ~/.ssh/id_rsa 
Copy the code

Java installation

yum install -y java
Copy the code

Install Jenkins

When the critical moment comes, you need to configure Jenkins’ yum source

[root@jenkins ~]# wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
[root@jenkins ~]# rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
Copy the code

Then download it

yum install jenkins -y
Copy the code

If the command is slow, press CTRL + C to stop the original command and run the following command to download the command from tsinghua University

wget https://mirrors.tuna.tsinghua.edu.cn/jenkins/war/latest/jenkins.war
Copy the code

At this point, we have built the most concise version of CI environment

I met Jenkins

Start Jenkins Service

Jenkins can be understood as a Java project with the goal of providing a software platform for continuous software integration, as shown in the figure below

Since it is a project, naturally we need to start it to start a service, run the following command to start Jenkins

systemctl start jenkins
Copy the code

You are advised to run the following command if you want to start the system automatically

systemctl enable jenkins
Copy the code

Access Jenkins Service

So how do you verify your success? Naturally, the default port provided by Jenkins service is 8080. Enter IP :8080 in the browser (if it is Ali Cloud server, remember to configure the security group to open this port) and enter Jenkins login page. If the following interface appears, it indicates success

Initialize the Jenkins

Next, let’s do some initialization to start Jenkins for the first time. If you’ve already used Jenkins, you can skip this chapter.

First, you need a password. Jenkins will write the password to the specified directory when booting up. Just copy and paste it

Novice: install plug-ins

Install the recommended plugin directly, but you need to change the image of the Jenkins plugin before clicking, otherwise it will take too long

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
Copy the code

Getting started: Configure users

Configure the address, which is usually the next step

Enjoy Your Jenkins! Enjoy Your Jenkins! Enjoy Your Jenkins!

Application of Jenkins

Since it is a software platform for continuous software integration, it naturally needs to do the following two points

  • Such as Git, Node, nginx and other multi-application integration
  • Integrating the work of multiple applications into a single task, Jenkins controls the internal details

That means Jenkins is task-oriented

Application case: Set the task of downloading node through Docker

Let’s take checking the Docker version and pulling down the Docker node image as an example to create a task. Actually, it is to execute the following commands, but we do not want Jenkins to control it, because this means that some complicated scripts can be automatically executed in the form of tasks in the future

docker -v
docker pull node:latest
Copy the code

First, create a new task

Add the script to execute

Build tasks

Now that we have completed the task creation, let’s start building the task!

First return to the project details, then click Build Now, finally enter the build task details to see the log, if the last output is STATUS:SUCCESS, it indicates SUCCESS

Add: If the following failure occurs, it means that the user [Jenkins] has no permission to access the Docker service, so we need to add the user to the corresponding group of the service

Run the following command

gpasswd -a jenkins docker
Copy the code

Then update it

newgrp docker
Copy the code

Example: Compile the React project

Now let’s put it into practice. The goal is simple: Get Jenkins to help us do the following steps

  1. Executing a build command to process a React project stored in Git or the code cloud generates onebuilddirectory
  2. Start an Nginx service and put thisbuildMove the contents under nginx to the static file directory

So there will be a corresponding service on the server, we can directly access nginx service port to access project, can be done automatically to a project, build, automated deployment services, such as the late git access or yards cloud after upload hooks, we can realize automation integration or automation deployment, it is also our CICD says.

Setting up the Node Environment

In order to compile the React project, at least the Jenkins service must have node service. This service is provided in the form of plug-in.

  1. Download the Node plug-in first
  2. After installing the plug-in, the corresponding service will appear in the global configuration center. We select the specified version and start it

In this way, the requirement of Jenkins to provide the corresponding Node service is realized. Know the idea, then we start to implement it!

First, we need to download the Node plug-in

Wait until the installation restarts

Then we need to add Node to the Jenkins global configuration

Start by finding the system global configuration

Install the specified version, choosing to install from the image

Now we have the Node environment

Testing the Node environment

Next, we will apply the Node environment we created to execute the task. We will create a task first, the process is the same as before, the only difference is that in the last step we need to select the Node environment, choose our own version

We execute the following script in the task

node -v
Copy the code

Perform a task

If the status is SUCCESS and the node version is output, the node environment has been set up successfully

Create the React project

Next, we create a react project locally (let’s say ci-Pro) and upload it to the code cloud. We initialize it on the local machine and push it to the code cloud.

Use scaffolding

NPM version 6+ can be executed directly

npx create-react-app ci-pro
Copy the code

Or if the version is low, you have to install it locally

create-react-app ci-pro
Copy the code

If you have not installed the scaffold before, run the following command to install it

npm install -g create-react-app
Copy the code

Once the installation is complete, we will have the following directory structure

. ├ ─ ─ the README. Md ├ ─ ─ package. The json ├ ─ ─ public │ ├ ─ ─ the favicon. Ico │ ├ ─ ─ index. The HTML │ ├ ─ ─ logo192. PNG │ ├ ─ ─ logo512. PNG │ ├ ─ ─ Manifest. Json │ └ ─ ─ robots. TXT ├ ─ ─ the SRC │ ├ ─ ─ App. CSS │ ├ ─ ─ App. Js │ ├ ─ ─ App. Test, js │ ├ ─ ─ index. The CSS │ ├ ─ ─ index. The js │ ├─ ├─ ├─ ├.txt ├─ ├.txt ├─ ├.txtCopy the code

Access nginx

After compiling the project, we need to put the artifacts in the static resource directory of nginx, and then provide the service through Nginx. Naturally we need to access the nginx service and implement the configuration file of Nginx first

Create corresponding files

mkdir conf && vi conf/default.conf
Copy the code

Specify a static resource directory

Conf file contents

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

Here we provide nginx service through Docker, involving moving directories, configuring custom configuration files and other actions, we need to customize the image, which requires us to implement our own Dockerfile

Create corresponding files

vi Dockerfile
Copy the code

Do the following two things:

  1. After Jenkins was ordered to packbuildThe directory is moved to nginx’s static resources directory
  2. Specify a custom configuration file
FROM nginx:1.15
COPY build /etc/nginx/html
COPY conf /etc/nginx
Copy the code

At this point, we have completed the construction of the local project, and then associated with the remote repository, push can be done, look at the current directory tree

. ├ ─ ─ Dockerfile ├ ─ ─ the README. Md ├ ─ ─ the conf │ └ ─ ─ the default. The conf ├ ─ ─ package. The json ├ ─ ─ public │ ├ ─ ─ the favicon. Ico │ ├ ─ ─ Index.html │ ├ ─ ─ logo192. PNG │ ├ ─ ─ logo512. PNG │ ├ ─ ─ the manifest. Json │ └ ─ ─ robots. TXT ├ ─ ─ the SRC │ ├ ─ ─ App. CSS │ ├ ─ ─ App. Js │ ├ ─ ─ App. Test. Js │ ├ ─ ─ index. The CSS │ ├ ─ ─ index. The js │ ├ ─ ─ logo. The SVG │ ├ ─ ─ reportWebVitals. Js │ └ ─ ─ setupTests. Js └ ─ ─ yarn.lockCopy the code

Configure Jenkins access to the warehouse

Assuming we have the SSH address for the repository, go to our Jenkins task configuration page and add.

It will say no permission

The reason is very simple. The public key pair of the local computer is matched with the public key on the code cloud, so the local computer naturally has the permission to operate the remote warehouse, but there is no private key on the Jenkins server, so we need to configure the private key in Jenkins to obtain the permission, where do we configure it?

Configure => Source management => Git => Repositories -> Credentials => Add => SSH Username with private keyCopy the code

For details on how to obtain the private key, see the Git installation module

At this point, we have completed the Jenkins git configuration

The configuration script

Going back to Jenkins, configure the scripts to be executed during the build task by doing two things

  1. Install dependencies and build projects
  2. performDockerfileFile Image Generation
  3. Start services based on the new image (to avoid port conflicts, disable all services under the image first)

The script content is as follows (if it is a cloud server, open the port on the console)

#! /bin/sh

npm install --registry=https://registry.npm.taobao.org
npm run build
docker build -t react-project .
docker kill $( docker ps  | awk '/ci-project/ {print $1}')
docker run -d -p 3000:80 ci-project
Copy the code

The location of the script is shown

At this point, our configuration work is done, continue to build!

Build tasks

Just like before, return to the task details and click Build Now

When you start building, you can look at the details of the build task to determine whether it was successful

If successful, try to access the service

IP: 3000"Copy the code

If the react service interface is displayed, you have succeeded.

Go to the online diagnosis and treatment platform of Wedoctor Internet hospital, make a quick consultation, and find a top three doctor for you in 3 minutes.