Jenkins+Docker+github+Vue Automated Deployment

Keywords: CentOS Docker github jenkins

1, Introduction

Jenkins is an independent open source software project. It is a continuous integration tool developed based on Java. It is used to monitor continuous and repeated work. It aims to provide an open and easy-to-use software platform to make continuous integration of software possible. Formerly Hudson, it is an extensible continuous integration engine. It can be used to automate various tasks, such as building, testing and deploying software.

Jenkins features:

Open source free;
Cross platform, supporting all platforms;
master/slave supports distributed build;
Visual management page in web form;
Super simple installation and configuration;
tips timely and fast help;
There are more than 200 plug-ins


Docker is an open source application container engine, which is based on Go language and complies with Apache 2.0 protocol.

Docker allows developers to package their applications and dependency packages into a lightweight and portable container, and then publish them to any popular Linux machine. It can also realize virtualization.

Containers completely use the sandbox mechanism, and there will be no interfaces between them (similar to iPhone app s). More importantly, the performance overhead of containers is very low.


Vue (pronunciation / vju) ː/, be similar to   view) is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from bottom to top. Vue's core library only focuses on view layers, which is not only easy to start, but also easy to integrate with third-party libraries or existing projects. On the other hand, when with Modern tool chain And various Support class library When used in combination, Vue can also provide drivers for complex single page applications.

This article introduces a process of Jenkins' docker to automatically build, publish and deploy Vue projects.

2, Environment configuration

The tools required for CentOS 7 system installation are as follows:

The above tools can be installed by themselves. jdk, maven, nodejs, git and can also be installed automatically later through jenkins.

Next start:

1. Install maven packaging plug-in to enter:

Jenkins > System Management > plug-in management > optional plug-ins, search NodeJS Plugin Install.


Install plug-ins

Wait for the installation and restart


(2) Global tool configuration:

         Jenkins > System Management > global tool configuration  

jdk configuration. I fill in jdk1.8, JAVA_HOME fills in the Java of the native jdk_ If there is no home path, you can choose to install automatically. Just select the version. However, automatic installation can only be installed after Oracle login.

  (3) git configuration

         It can be ignored for local installation, and optional automatic installation is not installed

(4) maven configuration

         If the machine is installed locally, fill in the maven installation directory. If it is not installed, it can be installed automatically



(5) NodeJS configuration

        If the machine is installed locally, fill in the installation directory of NodeJS. If it is not installed, it can be installed automatically

(6) docker configuration

If it is not installed, it can be installed automatically. You do not need to fill in this field for local installation

  Finally, click apply and save.

3, Start new task

1. Click new task

2. Fill in the task name, select to create a free style project, and click OK


  3. Source code management, fill in the project git address. Here I fill in my github address. If you need to log in, you can add an account password or ssh public key for authorization

  4. Build branches. I default master here

5.github download time is slow. Fill in 10 minutes here


  6. To build the environment, select nodejs here

  7. Start the project construction and fill in the shell script

  (1) The shell script needs to be changed according to its own time. The following is for reference only

echo $PATH
node -v
npm -v
#npm install -g cnpm --registry= 
#Install dependencies, using the default user
npm install --unsafe-perm
#Build project to / dist
npm run build:prod
#Move the constructed dist project to the / opt/data/build directory
#/Root /. Jenkins / workspace / Linfen blog UI / dist built dist path
mv /root/.jenkins/workspace/linfen-blog-ui/dist /opt/data/vue

cd /opt/data/vue

#Copy docker file Linfen system / SRC / main / docker / dockerfile
cp -Rf /root/.jenkins/workspace/linfen-blog-ui/static/docker/Dockerfile /opt/data/vue

#Execute the build Dockerfile command
docker build ./ -t my/linfen-blog-ui

if [[ -n $(docker ps | grep linfen-blog-vue) ]];then
        echo "l[infen-blog-vue]Running, restarting..."
        #Stop previous container operation
		docker stop linfen-blog-vue

		#Delete previous container
		docker rm linfen-blog-vue
        echo "[linfen-blog-vue]Does not exist, deploying..."

#Run the container you just created
docker run  --name  linfen-blog-vue -d -p 80:80 -v /opt/software/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /opt/software/nginx/logs:/var/log/nginx my/linfen-blog-ui

echo "Build complete"

  (2) You need to create a folder in opt to build the project into a docker

# Create project build directory
mkdir /opt/build/vue

# nginx configuration file directory and log directory
# For nginx configuration directory, you need to submit a copy of nginx.conf file here
mkdir /opt/software/nginx/conf/

# nginx log directory
mkdir /opt/software/nginx/logs/

  8. Create Docker files and put them in the / opt/build/vue directory

# Set base mirror
FROM nginx
# Define author
MAINTAINER linfen-blog-ui
# Copy the contents of the dist file to the directory / usr/share/nginx/html
COPY dist/  /usr/share/nginx/html

9. Start the build

10. View the console and build


  The successful construction is as follows:

Build complete.

 Tip: built files are meant to be served over an HTTP server.
 Opening index.html over file:// won't work.

+ mv /root/.jenkins/workspace/linfen-blog-vue/dist /opt/data/vue
+ cd /opt/data/vue
+ cp -Rf /root/.jenkins/workspace/linfen-blog-vue/static/docker/Dockerfile /opt/data/vue
+ docker build ./ -t my/linfen-blog-vue
Sending build context to Docker daemon  5.096MB

Step 1/3 : FROM nginx
 ---> ad4c705f24d3
Step 2/3 : MAINTAINER linfen-blog-vue
 ---> Running in 2cdc9a4459ef
Removing intermediate container 2cdc9a4459ef
 ---> 28909ac4fee0
Step 3/3 : COPY dist/  /usr/share/nginx/html
 ---> 9232c7507bc7
Successfully built 9232c7507bc7
Successfully tagged my/linfen-blog-vue:latest
++ docker ps
++ grep linfen-blog-vue
+ [[ -n d0b9cc5ca3cc   f1b654517986     "/docker-entrypoint...."   23 hours ago   Up 21 hours>80/tcp, :::80->80/tcp           linfen-blog-vue ]]
+ echo l[infen-blog-vue]Running, restarting...
l[infen-blog-vue]Running, restarting...
+ docker stop linfen-blog-vue
+ docker rm linfen-blog-vue
+ docker run --name linfen-blog-vue -d -p 80:80 -v /opt/software/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /opt/software/nginx/logs:/var/log/nginx my/linfen-blog-vue
+ echo Build complete
 Build complete
Finished: SUCCESS

The log is too long, so only part of it is intercepted.

11. Browser input http://ip:80 , we can see our final results. Alibaba cloud and other server deployments need to turn off the corresponding firewall and security group rules

It is recommended to install and configure the jdk installed in Jenkins, otherwise it is easy to cause environmental problems.

This concludes the tutorial

Posted by Cynthia on Tue, 21 Sep 2021 13:50:35 -0700