Docker + Jenkins Automatic Deployment Front-end Project

Recently, I was not very busy at work, so I took some time to study how to use Docker to deploy front-end projects automatically, so I made a note of it for future reference. The following system is Centos8, Jenkins is installed on the server to be deployed, so there is no step of remote deployment at present. The whole process is divided into three parts: ① Installing Docker ② installing and configuring Docker ③ adding deployment scripts for the project

Centos8 installation docker

Switch to root and perform the code installation

  yum install -y yum-utils \
  device-mapper-persistent-data \
  lvm2
Copy the code

Set docker’s warehouse address for subsequent image fetching:

  yum-config-manager \
  --add-repo \
  https://download.docker.com/linux/centos/docker-ce.repo
Copy the code

Then install Docker Community Edition and command line etc:

yum install docker-ce docker-ce-cli containerd.io
Copy the code

If the installation fails and an error message is displayed indicating that the containerd. IO version is too early, install containerd. IO locally. Download the installation package.

Yum wget https://download.docker.com/linux/centos/7/x86_64/edge/Packages/containerd.io-1.2.6-3.3.el7.x86_64.rpm - y Install containerd. IO - 1.2.6-3.3. El7. X86_64. RPMCopy the code

After the installation is successful, execute the docker installation command again. After the installation is successful, set the boot automatically:

# Boot automatically
systemctl enable docker
Start the Coker service
systemctl start docker
Copy the code

At this point, the Docker has been installed. Check the Docker version to ensure that the Docker is correctly installed. If the version number is displayed, the installation is correct.

docker -v
Copy the code

Change the image acceleration address, there is no default deamon.json file after installation, need to manually create, the next purchase is Ali cloud server, so the acceleration address is also configured as Ali cloud.

mkdir -p /etc/docker
tee /etc/docker/deamon.json <<-'EOF'
{ "registry-mirrors": ["https://sdh86fuc.mirror.aliyuncd.com"]}
EOF
Copy the code

Json to take effect and restart docker

systemctl deamon-reload
systemctl restart docker
Copy the code

Common docker commands

Docker ps -a view all containers

Docker ps view containers in action

Docker start Container ID/name Start container

Docker stop Container ID/name Close the container

Docker exec it container-id/name /bin/bash The docker exec it container-id/name /bin/bash command is used to enter the container and exit the container without stopping

Docker rm -f id/name Deletes a container

Docker Images view all images

Docker RMI name Delete the image

Docker run-itd –name node-test Docker run-itd –name node-test docker run-itd –name node-test

Docker run – name mynginx – d – 80, p 80 – v/software/nginx/mynginx. Conf: / etc/nginx/nginx. Conf nginx use nginx mirror create nginx container, -p maps port 80 and -v mounts local files to etc, the container’s folder

Docker installation Jenkins

Pull Jenkins mirror image

docker pull jenkins/jenkins
Copy the code

Create Jenkins working folder and change folder permissions

mkdir -p /var/jenkins_test
chmod 777 /var/jenkins_test
Copy the code

Run the container instance with the Jenkins image drawn, run in the background with -d, the default port of -p Jenkins is 8080, and map it to port 9090 of the host. -v Mount the Jenkins /var/jenkins_home working directory to the /var/jenkins_test directory on the host. – v $(which docker) : / usr/bin/docker – v/var/run/docker. The sock: / var/run/docker. The sock mapping docker command, make internal can use Jenkins docker command, The container instance name is jenkins_test

docker run -u root -d -p 9090:8080 -v /var/jenkins_test:/var/jenkins_home -e TZ="Asia/Shanghai" -v /etc/localtime:/etc/localtime -v $(which docker):/usr/bin/docker -v /var/run/docker.sock:/var/run/docker.sock --name jenkins_test jenkins/jenkins
Copy the code

At this point, type in IP :9090 in your browser and Jenkins’ page will appear. If the access fails, the following problems may exist:

The firewall of centos is faulty. Enable the firewall to enable port 9090

service firewalld start
firewall-cmd --zone=public --add-port=9090/tcp --permanent
firewall-cmd --reload
Copy the code

Check whether 9090 exists on all open ports

firewall-cmd --zone=public --list-ports
Copy the code

If the cloud server is used, enable port 9090 in the security group. Security Groups > Rules > Inbound Direction > Manually Add Port 9090.

Jenkins configuration

Initialize the Jenkins

Open IP :9090. The following screen is displayed. You need to enter the password for initialization.

Click Continue and select the recommended plug-in for installation. This process is slow. After the installation is complete, create an administrator user.

In addition, the deployment script requires the support of other plug-ins, installed in System Administration -> Plug-in Management: Docker Pipeline, SSH Pipeline Steps, CloudBees Docker Build and Publish

Create a task

Click New Task, create a multi-branch pipeline task, name it yourself, because I’m using github test, I’ll call it test_With_github, and click OK.
After entering the new page, randomly set the display name, I set it as Test, click add source in branch source, select Github, input your Github repository address, add your user name and password in the credentials, click Verify, the verification is successful. Github source code, please be patient to see, test can use my demo, address: github.com/marco110/do… , you can fork to your own repository.
The default configuration is kept here. During construction, Jenkins will execute commands based on Jenkinsfile, which we will manually add to the project, as will be discussed later.

At that point Jenkins will automatically scan the warehouse.

Click Test in the upper left corner to enter the page and find that branches on Github have been scanned.

The project adds the deployment script

Now that Jenkins is deployed, it’s time to start working on our project, which refers to the github source code.

Add Jenkinsfile

When configuring the Jenkins task, we mentioned Jenkinsfile. Now we need to add Jenkinsfile to the project root directory. Jenkinsfile tells Jenkins how the mission needs to be executed. The code is as follows. What exactly each line does, I wrote in the code comments.

The construction process is divided into three stages:

Get Souce Code pull the source code from the Github address specified on our Jenkins configuration page.
NPM run build package source code.
We use nginx to deploy with our projects. I won’t talk too much about nginx.

#! groovy

import java.text.SimpleDateFormat

node(){// We will release an infinite number of versions, an infinite number of images, to keep the same name, we use time to distinguish, The image name format will be dockerName:tag, e.g. Marco-test :202105011023 def dateFormat = new SimpleDateFormat("yyyyMMddHHmm")
    def dockerTag = dateFormat.format(new Date())
    def dockerName='marco-test'

    stage('get souce code') {
        try {
            echo "get source code"
            checkout scm
        }
        catch(err) {
            echo "get source code failed"
            throw err
        }
    }

    stage('npm run build') {// Docker (docker, docker, docker, docker, docker, docker, docker, docker, docker)'node:12-alpine').inside {
                sh 'node --version'
                sh 'npm --version'
                sh "npm --registry https://registry.npm.taobao.org install"
                sh 'npm install'
                sh 'npm run build'
            }
            }
        catch(err){
                echo "npm run build failed"
                throw err
            }
    }

    stage('deploy with nginx') {
        try {
            sh 'pwd'
            sh 'ls'// The project is packaged in the dist folder and needs to be copied to the devops_build folder. Devops_build needs to be created manually and used in sh'cp -r dist ./devops_build'// Delete the old version, the code will be published countless times, so you need to delete the old version sh"docker rm -f ${dockerName}"// Create an nginx image with the working directory devops_build and the configuration file Dockerfile sh"docker build --no-cache=true -t ${dockerName}:${dockerTag} ./devops_build"// Run the nginx instance and map port 80 to host sh"docker run -u root --name ${dockerName} -p 80:80 -it -d ${dockerName}:${dockerTag}"// Keep only the latest three mirrors sh"""docker rmi -f \$(docker images | grep ${dockerName} | sed -n  '4,\$p' | awk '{print \$3}') || true"""
        }
        catch(err){
                echo "deploy with Nginx failed"
                throw err
            }
    }
}

Copy the code

Create devops_build

This folder is intended to run an instance of an Nginx container and needs to be run in the background at all times, so it cannot be written to Jenkinsfile like a Node container. With Jenkinsfile, the folder where the project is packaged has been copied to the devops_build folder. So there will be dist, Dockerfile and nginx.conf under this folder.

Dockerfile Script in Jenkinsfilesh "docker build --no-cache=true -t ${dockerName}:${dockerTag} ./devops_build"Create an image with the default configuration of Dockfile in the devops_build folder (nginx awareness required) :

Based on nginx:1.17.3-alpine,

Copy nginx.conf from the devops_build folder to the corresponding folder of the container.

Copy the packaged dist folder to the corresponding folder of the container.

The FROM nginx: 1.17.3 - alpine LABEL MAINTAINER ="marco"

ADD ./nginx.conf /etc/nginx/nginx.conf

RUN rm -rf /usr/share/nginx/html

ADD /dist/ /usr/share/nginx/html
Copy the code

Sh “docker run -u root –name ${dockerName} -p 80:80 it -d ${dockerName}:${dockerTag}” in JenkinsFile This completes the deployment.

At this point, visit IP :80 to see the website you posted.

The next section will document how to deploy projects to remote servers using Docker + Jenkins.

It is the first time to configure Jenkins. Please kindly point out any errors.