CentOS + Jenkins + nginx + gitlab front end automation deployment full record

0. Preface

When we were developing a new project , You always need to deploy the front end to the test server , Give test or product access . In a nutshell , If you want to deploy the front end to the server , The server needs to provide a service to access the front end . If we don't involve in development Node.js, Then we need the server to provide a service to access the front end , May be IIS service ,Nginx Service or Tomcat service , Wherever deployed , When the current side code is updated frequently ( Especially in the development stage ), We need to keep packaging to replace the code on the server . Maybe the O & M will help us replace , Or we can do it ourselves ftp Replace in a way . All in all , This way, it's more complicated .

Front end automated deployment , We may also often hear , adopt Jenkins and gitlab Get through to the warehouse , When our warehouse code specifies the branch push after , Will automatically trigger Jenkins The task of . adopt Jenkins Mission , We can automatically update the latest front-end code , And automatically package the code on the server through scripts , And update the Nginx In the specified directory , And restart Nginx service . To achieve the purpose of front-end automatic deployment .

Next , It's a game from 0 To 1 The whole process of front-end automated deployment , The period is also a pit step by step , recorded , For your reference , learn from each other . There may be some imperfections or mistakes , You are also welcome to correct .

My development system is windows, The test server is centos ,Mac There may be different tools or operations on the system , The code warehouse is placed in gitlab in , For example GitHub perhaps Code cloud Such as platform , Some configurations are also different , Please judge for yourself .

The target group of this article : Preliminary and intermediate front-end development

  1. Terminal tools
  • I am a Windows development environment , So I chose MobaXterm As an operation centos Terminal , at present windows There are also many terminal tools in , such as SecureCRT、Xshell、Putty etc. , Some need to pay , Depending on your hobby
  • MobaXterm Optional free version


  1. Linux centOs A server

  2. gitlab Deposit vue Project warehouse

2. Installation environment

install Java Environmental Science

Jenkins It's open source. , Use Java Continuous integration tools written by , Therefore, you need to install... Before installation Java

  1. Check if the system is installed java Environmental Science
java -version
 Copy code 


If you can find , Then skip the installation Java This step 2. install Java

yum install java
 Copy code 

install Jenkins

1. Download dependency
 Copy code 
sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
 Copy code 
2. Import secret key
 Copy code 
sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
 Copy code 
3. install
 Copy code 
yum install jenkins
 Copy code 


Installation completed ,Jenkins Default port for 8080

If the port conflicts , You can modify the port

vim /etc/sysconfig/jenkins
 Copy code 

find JENKINS_PORT="8080" modify


vim Modify port simple command :

  • adopt ↑↓ Move the cursor to the line to be modified

  • Press i Enter edit mode

  • After modification, press Esc Exit edit mode

  • Press :wq Save and exit

  • After repair

3. To configure Jenkins

start-up Jenkins

service jenkins start
 Copy code 

restart / Stop Jenkins The order will start in restart|stop that will do

Check the status

systemctl status jenkins
 Copy code 

appear active running It means success


Access address

http://[centos Service address ]:[Jenkins port , Default 8080]
 Copy code 


Get... On the terminal Jenkins password

cat /var/lib/jenkins/secrets/initialAdminPassword
 Copy code 

Get the password Fill in the page above -> continue


Select the recommended plug-in for the next step


After installation , Create administrator user



thus ,Jenkins Installed

Installing a plug-in

Manage Jenkins -> Manage Plgins


install Generic Webhook Trigger plug-in unit Realization Jenkins+WebHooks Continuous integration


After installation, you need to Restart Jenkins service

Create tasks

1. Create tasks


  1. Enter task name


3. To configure git


This error is due to our centos Is not installed on the system git

install git

stay centos Install... Through commands in the system git

yum install -y git
 Copy code 

Installation completed Check whether the version verification is installed successfully

git version
 Copy code 

To configure git Authentication

installed git after It still reports an error Prompt authentication failed


You want to configure git User information for [ Yours git user name , password ]


Appoint git Branch ( When the branch has push In operation , Will trigger the current Jenkins Mission )


Configure build triggers

We were just Jenkins Installed in Generic Webhook Trigger plug-in unit

We select... In the build trigger Generic Webhook Trigger Options , take Jenkins and gitlab coordinate


Jenkins Set up API Token

Manage Jenkins --> Manage Users--> Select the user --> Set up --> newly added Token


Copy the generated token


To configure gitlab hook

Sign in gitlab Enter the project you want to deploy >settings>Integrations>add webhook


After preservation You can test whether the configuration is effective


choice Test->Push envents If you are prompted successfully Indicates that the configuration is normal

At this time Jenkins A build record will also be added to the task


install Node

We are git After pulling the code, you need to pass npm install To install the package So before this configuration We still need to centos Installation on system Node


yum install -y node
 Copy code 

Jenkins The build

So far, , When we push After code ,Jenkins The latest code will be automatically pull To centos in , Next we need to execute... In the code npm install Installation depends on , Then the project will be npm build pack

stay Jenkins Configuration in progress , Add build steps


choose Execute shell adopt shell Command to operate

Execute the following script in the command box

echo ' Build version number :'${BUILD_NUMBER}
 # Every time you update the code, you need to install the dependent package prevent package.json to update 
npm install
# build command 
npm run build
echo ' Build complete '
 Copy code 

And then after saving We push Code Check it out


After the task is successfully built There are more in the workspace node_modules dist Folder It shows that our steps are successful

We are centos Of /var/lib/jenkins/workspace/ You can find us from git On clone Code for

Remember this path


install Nginx

At present, the code has been pushed to centos in , Now we need to start a Nginx Service to access the front-end page Detailed steps view here

Install compilation tools and library files

gcc yes linux The compiler under , It can be compiled C,C++,Ada,Object C and Java Other languages

yum -y install gcc
 Copy code 

install PCRE

pcre It's a perl library , Include perl Compatible regular expression library ,nginx Of http Module USES pcre To parse regular expressions , So you need to install pcre library

yum install -y pcre pcre-devel
 Copy code 

zlib install

zlib The library provides many ways to compress and decompress nginx Use zlib Yes http The contents of the package go on gzip, So you need to install

yum install -y zlib zlib-devel
 Copy code 

install openssl

openssl yes web The cornerstone of secure communication , No, openssl, It can be said that all our information is streaking

yum install -y openssl openssl-devel
 Copy code 

install Nginx

1. Download a stable version of Nginx

wget http://nginx.org/download/nginx-1.20.1.tar.gz
 Copy code 

2. Decompress the package to usr/local/src

tar -zxvf nginx-1.20.1.tar.gz
 Copy code 

3. Compilation and installation

cd /nginx-1.20.1
make install
 Copy code 

4. start-up Nginx

Find the installation path

whereis nginx
 Copy code 


frequently-used Nginx command :

# start-up 、 stop it nginx
cd /usr/local/nginx/sbin/
./nginx # start-up
./nginx -s stop # stop it , Direct search nginx process id Reuse kill Order to force the killing process
./nginx -s quit # Exit stop , wait for nginx The process stops after processing the task
./nginx -s reload # Reload the configuration file , modify nginx.conf Use this command after , The new configuration will take effect
 Copy code 

start-up Nginx Default port 80 If the port conflicts, you can modify the port ( Specific modification methods , I'll say later )

Visit the page to view Nginx Whether it starts normally


indicate Nginx Start up normal

5. Front end build After the file is synchronized to Nginx In service

at present ,centos On Nginx The service has , front end build The code after has , Now you need to synchronize the front-end code to Nginx In service , So that we can go through Nginx Service access

Sort out what we're going to do next :

  • stay Nginx in html Create under folder teacher file , Put the packaged code of the front end here
  • To configure Nginx conf file Configure ports and access paths
  • Scripting will Jenkins in workspace Front end code under Package and copy to nginx/html/teacher in
  • restart Nginx service

Nginx Created in teacher Folder

centos Find Nginx In the folder

If you forget, you can pass

# lookup nginx The position of 
whereis nginx
 Copy code 

We will be in html Create under folder teacher( Name at will ) To store the front-end code

cd /usr/local/nginx
# create a file 
mkdir teacher
 Copy code 

To configure Nginx conf file

Next, we need to configure the proxy service for our front-end code To visit

vim /usr/local/nginx/conf/nginx.conf
server {
listen 9091;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html/teacher;
index index.html;
 Copy code 

The following configuration


Write a script

The next thing to do is Write a script When Jenkins After pulling the code You need to execute npm install Install all dependencies

Then do it again npm run build Yes Vue Package the project

Will pack up the dist The folder is typed tar Put the bag in nginx/html/teacher Under the folder And extract the Delete tar package

Writing scripts requires some basic knowledge shell command , Specific tutorials can be searched by yourself , To learn

For convenience Jenkins Execute the script , We are in the front-end code build Folder (Vue project ) Create a deploy.sh Script

So if you modify the script No more changes Jenkins Build script for direct push Code can be updated

The specific script content is as follows :


# Once the return value is non-zero , The entire script will exit immediately 
set -e
# Script directory 
sh_dir=$(cd "$(dirname "$0")";pwd)
# Project root 
# dist Catalog 
# nginx Catalog 
# teacher Catalog 
# sbin Catalog 
# Package name 
echo '==================== Begin to build ==========================='
echo ' Build version number :'${BUILD_NUMBER}
echo ' Current directory : ' ${base_dir}
# Return to the following directory Installation package 
cd ${dist_dir}
npm install
# Delete the old dist file 
rm -rf dist
npm run build:prod
# take dist The catalog is packaged into nginx/html/teacher Under the table of contents 
cd ${dist_dir}
tar -zcvf "${teacher_dir}/${tar_name}" *
echo '==================== Pack up ==========================='
# go back to Nginx Unzip the package just hit under the directory 
cd ${teacher_dir}
tar -zxvf ${tar_name}
# Delete gz package 
rm -rf ${tar_name}
echo '==================== Code update complete ========================'
# restart Nginx
cd ${sbin_dir}
./nginx -s reload
echo '==================== Restart complete ========================'
 Copy code 

The whole script has been written , So how to make Jenkins Pull the latest code to execute

open Jenkins--> Find the task we created --> To configure --> Update build -> modify Execute shell Save the script in :


# The current location is in the root directory of the code warehouse 
cd build
// Get into build Folder Execute the script
sh deploy.sh
 Copy code 

restart Nginx service

We just modified Nginx The configuration has not yet taken effect , Then go back to centos in

restart Nginx service

Specific commands :

cd /usr/local/nginx/sbin
# restart Nginx service 
./nginx -s reload
 Copy code 

After the restart ,commit push The script just added in the front-end code

push after Jenkins automatically Build Our automated deployment mission

Jenkins Permission problems

Everything seems to be all right , When we push Code When you build a task, you find Jenkins Package task error , as follows :


There is a permission problem , So in centos In the system , Direct manual execution deploy.sh Test the script , Was a success , There is no permission problem . The problem is Jenkins On , So we installed Jenkins When , To the user is jenkins, This user certainly does not have root jurisdiction .

The solution is to modify Jenkins Users of

modify /etc/sysconfig/jenkins file


vim /etc/sysconfig/jenkins
JENKINS_USER="root" # Change to root
 Copy code 


cd /var/lib
chown -R root:root jenkins
# restart jenkins service 
service jenkins restart
 Copy code 

After the modification , Again push Code test , Finally, the deployment is successful , The page can be accessed normally , The code is up to date . thus , Our entire front-end automation deployment is almost perfect .

Up to now , The whole front-end automated deployment process has been completed

however ..

Jenkins It takes up a lot of memory

When you think everything is all right , The back-end found that the server compares cards , Check the memory usage , Find out Jenkins High occupancy

centos perform top command Check the memory occupied by the current program :

# lookup java service 
# top The command is the of the monitoring system cpu Memory usage 
top -d 2 -c -p [ Just found Jenkins ID]
 Copy code 

The picture below is Jenkins The operation of the task :


Next, solve Jenkins The problem of high memory consumption ,

Modify the configuration file :

vim /etc/sysconfig/jenkins
 Copy code 

take JENKINS_JAVA_OPTIONS Make the following changes :

# JENKINS_JAVA_OPTIONS="-Djava.awt.headless=true"
JENKINS_JAVA_OPTIONS="-XX:MaxPermSize=512m -Djava.awt.headless=true"
 Copy code 


After revising :wq after restart Jenkins service

service jenkins restart
 Copy code 


Through the above one-way operation , The automatic deployment of the front end is completed . There's a lot of room for optimization , such as Jenkins Services and the code to deploy the front-end Nginx Not on the same machine , Need to remotely transfer files and execute shell command . For example, after the successful construction Jenkins You can send notification email to test related personnel, etc . If we have a chance to share these next time .

There are still many imperfections in the whole process , Focus on experiencing this process , I hope you are not limited to the front-end code , It can be done to jenkins Nginx shell Script vim command And others around the front-end also have some understanding , It's more difficult to improve our competitiveness .

We also welcome your comments , Learn from each other and make progress .

The original text of this article is sent to the front-end interview question collection of another account of our team centos+jenkins+nginx+gitlab Full record of front-end automated deployment , You are also welcome to pay attention to .

Recently, our team's small partners also developed a small , cheng , order , Let me see the code in the front-end interview questions , Included 600 Multiple front-end interview questions , I hope I can help my friends on the way to the interview . You can also visit WX Search directly in Front end interview question collection Focus on .

Reference material

More complete front-end interview questions

Jenkins+Nginx+Github/Gitlab Automate building and deploying front-end projects

centOS7 install nginx And nginx To configure

CentOS Next tar Package decompression details ( Unzip to the specified folder )

vue/react The automation deployment scheme that cannot be ignored in the project

Please bring the original link to reprint ,thank
Similar articles