The foreword 0.

When developing a new project, we always need to deploy the front end to a test server for test or production access. Simply put, if you want to deploy a front end to a server, the server needs to provide a service to access the front end. If we don’t have Node.js in development, we need the server to provide a service to access the front end, be it an IIS service, a Nginx service, or a Tomcat service. Wherever we deploy, we need to constantly package and replace the server code when the front end code changes frequently (especially during development). It may be replaced by operation and maintenance for us, or by ourselves through FTP. In short, this approach can be tedious.

Front-end automation deployment, we may also often hear, through Jenkins and GitLab warehouse, when our warehouse code specified branch push, will automatically trigger Jenkins task. With the Jenkins task, we can automatically update the latest front-end code, package the code automatically on the server through scripts, update the Nginx specified directory, and restart the Nginx service. To achieve the goal of front-end automation deployment.

What follows is a whole process of front-end automation deployment from 0 to 1, which is also a pit step by step. It is recorded for reference and mutual learning. There may be some imperfections or mistakes, and you are welcome to correct them.

My development system is Windows, test server is centos,Mac system may have different tools or operations, code repository in GitLab, such as GitHub or code cloud platform, some configuration methods are not the same, please judge by yourself.

This article is aimed at: beginning and intermediate front-end development

  1. Terminal tool
  • I am a Windows development environment, so I choose MobaXterm as the terminal to operate centos. Currently, there are many terminal tools in Windows, such as SecureCRT, Xshell, Putty, etc. Some need to pay, depending on personal preference
  • MobaXterm is available as a free version

  1. A Linux centOs server

  2. Gitlab houses the VUE project warehouse

2. Installation environment

Installing the Java Environment

Jenkins is an open source continuous integration tool written in Java, so you need to install Java before you install it

  1. Check whether the Java environment has been installed in the system
java -version
Copy the code

If yes, skip installing Java. 2. Install Java

yum install java
Copy the code

Install Jenkins

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

Installed,Jenkins default port 8080

If the ports conflict, you can modify the ports

vim /etc/sysconfig/jenkins
Copy the code

Find JENKINS_PORT=”8080″ for modification

Vim modify port simple command:

  • Use ↑ and ↓ to move the cursor to the line that you want to modify

  • Press I to enter edit mode

  • Press Esc to exit editing mode

  • Press :wq to save the configuration and exit

  • After finishing the

3. The configuration Jenkins

Start the Jenkins

service jenkins start
Copy the code

Restart/stopped Jenkins command will start in restart | stop

Check the status

systemctl status jenkins
Copy the code

If active Running is displayed, it is successful

Access to the address

http://[centos service address]:[Jenkins port, default 8080]Copy the code

Get Jenkins password at terminal

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

Get the password and fill in the page above -> Continue

Select the recommended plug-in to proceed to the next step

After the installation, create an administrator user

At this point Jenkins has been installed

Installing a plug-in

Manage Jenkins -> Manage Plgins

Install the Generic Webhook Trigger plugin to implement Jenkins+WebHooks continuous integration

Jenkins service needs to be restarted after the installation is complete

Create a task

1. Create a task

  1. Enter the task name

3. Configure git

Git is not installed on your centos system

Install git

Install Git using commands in the centos system

yum install -y git
Copy the code

Check whether the installation is successful

git version
Copy the code

Configure Git authentication

After installing Git, an error message will be displayed indicating authentication failure

To configure git user information [your Git username, password]

Specifies the Git branch (which triggers the current Jenkins task when it has a push operation)

Configuring build triggers

We’ve just installed the Generic Webhook Trigger plugin in Jenkins

We chose the Generic Webhook Trigger option in the build Trigger to pair Jenkins and GitLab

Jenkins sets the API Token

Manage Jenkins –> Manage Users–> Select Users–> Settings –> Add Token

Copy the generated token

Configuration gitlab hook

Log in to GitLab and go to the project you want to deploy > Settings >Integrations> Add Webhook

After saving, you can test whether the configuration takes effect

Select Test->Push envents if the message “successfully” is displayed, the configuration is normal

A build record will also be added to the Jenkins task

Install the Node

NPM install is required to install the package after git has pulled the code, so we also need to install Node on centos before this configuration

perform

yum install -y node
Copy the code

Jenkins configuration construction

So far, when we push the code,Jenkins will automatically pull the latest code into centos, then we need to execute NPM install in the code to install all dependencies, and then package the project with NPM build

In the Jenkins configuration, add build steps

Select Execute shell To perform operations using shell commands

Run the following script in the command box

${BUILD_NUMBER} ${BUILD_NUMBER}
#Dependencies need to be installed every time the code is updated to prevent package.json updates
npm install
#The build commandNPM run build echoCopy the code

And then we save it and then we push the code to verify it

The node_modules dist folder was added to the workspace after the task was successfully built, indicating that our step was successfully executed

We in centos/var/lib/Jenkins/workspace/us from the git clone code can be found

Remember this path

/var/lib/jenkins/workspace/

Install Nginx

Now that the code has been pushed to centos, you need to start a Nginx service to access the front-end page details here

Install build tools and library files

GCC is a compiler under Linux, it can compile C,C++,Ada,Object C and Java languages

yum -y install gcc
Copy the code

Installing PCRE

Pcre is a Perl library, including perl-compatible regular expression library. The HTTP module of Nginx uses PCRE to parse regular expressions, so you need to install the PCRE library

yum install -y pcre pcre-devel
Copy the code

Zlib installation

Nginx uses Zlib to gzip the contents of HTTP packages, so it needs to be installed

yum install -y zlib zlib-devel
Copy the code

Install openssl

Openssl is the cornerstone of secure web communication. Without OpenSSL, our information would be running naked

yum install -y openssl openssl-devel
Copy the code

Install Nginx

Download the stable version of Nginx

Wget HTTP: / / http://nginx.org/download/nginx-1.20.1.tar.gzCopy the code

2. Decompress the package to usr/local/ SRC

The tar - ZXVF nginx - 1.20.1. Tar. GzCopy the code

3. Compile and install

CD /nginx-1.20.1./configure make make installCopy the code

4. Start the Nginx

Finding the installation path

whereis nginx
Copy the code

Common Nginx commands:

#Start and stop nginxRun the following command to stop the nginx process: CD /usr/local/nginx/sbin/. /nginx -s stop /nginx -s reload # Reload the configuration file, modify the nginx.conf and run this command to make the new configuration take effectCopy the code

Enable Nginx default port 80 If there is a port conflict you can modify the port (more on how to modify the port later)

Visit the page to check whether Nginx is running properly

Nginx starts normally

5. Synchronize the front-end build file to the Nginx service

The Nginx service is available on centos, and the front-end build code is available. Now you need to synchronize the front-end code to the Nginx service, so that it can be accessed through the Nginx service

To sort out what we’re going to do next:

  • inNginx in HTMLCreate a folderteacherFile to put the front-end packaged code here
  • configurationNginx confThe file configures the port and access path
  • Writing the script willJenkinsIn theworkspaceUnder the front-end code package copy tonginx/html/teacherIn the
  • restartNginxservice

Create teacher folder in Nginx

Centos to find the folder where Nginx is located

If you forget, you can pass

#Find the nginx location
whereis nginx
Copy the code

We will create teacher(optionally named) in the HTML folder to hold the front-end code

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

Configure the Nginx conf file

Next we need to configure the proxy service for our front-end code to access

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;
            indexindex.html; }}Copy the code

The following configuration

Write a script

The next thing to do is write a script that will execute NPM install to install all the dependencies when Jenkins is done pulling the code

Then run NPM Run Build to package the Vue project

Put the packaged dist folder into a tar package and put it in nginx/ HTML /teacher folder. Then unzip and delete the tar package

Script writing needs to understand some basic shell commands, specific tutorials can be searched, learn

To make it easy for Jenkins to execute the script, we create a deploy.sh script in the build folder (Vue project) of the front-end code

So if you change the script you don’t have to change the Jenkins build script you just push the code

The script content is as follows:

deploy.sh

#! /bin/bash
#Once a non-zero value is returned, the entire script exits immediately
set -e
#Script directorysh_dir=$(cd "$(dirname "$0")"; pwd)#Project root
base_dir="${sh_dir}/.."
#Dist directory
dist_dir="${base_dir}/dist"
#Nginx directory
nginx_dir="/usr/local/nginx"
#The teacher directory
teacher_dir="${nginx_dir}/html/teacher"
#Sbin directory
sbin_dir="${nginx_dir}/sbin"
#The package nameTar_name = "the teacher. The tar. Gz" echo "= = = = = = = = = = = = = = = = = = = = to start building the = = = = = = = = = = = = = = = = = = = = = = = = = = = '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
#Package the dist directory into the nginx/ HTML /teacher directoryCD ${dist_dir} tar - ZCVF "${teacher_dir} / ${tar_name}" * echo '= = = = = = = = = = = = = = = = = = = = finished packaged = = = = = = = = = = = = = = = = = = = = = = = = = = ='#Go back to the Nginx directory and unpack the package you just typed
cd ${teacher_dir}
tar -zxvf ${tar_name}
#Remove gz packageRm ${tar_name} - rf echo '= = = = = = = = = = = = = = = = = = = = finished code update = = = = = = = = = = = = = = = = = = = = = = = ='#Restart the NginxCD ${sbin_dir}. / nginx -s reload echo '= = = = = = = = = = = = = = = = = = = = after restart the = = = = = = = = = = = = = = = = = = = = = = = ='Copy the code

The script is already written, so how do you get Jenkins to pull up the latest code and execute it

Open Jenkins–> find the task we created –> Configure –> Update Build –> modify the script in Execute shell and save:

#The current location is in the code repository rootCD build // Go to the build folder and run the sh deploy.sh scriptCopy the code

Restart the Nginx service

The Nginx configuration has not taken effect yet, so let’s go back to centos

Restart the Nginx service

Specific commands:

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

After the restart,commit Push adds the script that was just added to the front-end code

After the push Jenkins will automatically Build our automated deployment task

Jenkins Authority Issues

It seemed that everything was ok, but when we pushed the code construction task, we found that Jenkins reported an error in packaging the task, as follows:

In centos, you can run the deploy.sh script to test it successfully. There is no permission problem. If you install Jenkins as user root, you will not have the root permission.

The solution is to modify Jenkins’ users

Modify the /etc/sysconfig/jenkins file

Vim /etc/sysconfig/jenkins JENKINS_USER="rootCopy the code

cd /var/lib
chown -R root:root jenkins
#Restarting Jenkins Service
service jenkins restart
Copy the code

After modification, push the code again to test, finally successful deployment, the page can be accessed normally, the code is up to date. At this point, our entire front-end automation deployment is almost complete.

By now, the entire process of automated front-end deployment has been completed

But..

Jenkins occupies too much memory

When I thought everything was ok, the backend found the server comparison card, checked the memory usage, and found that Jenkins had a relatively high occupancy

Centos Run the top command to check the memory usage of the current program.

#Finding a Java service
jps
#The top command monitors the CPU memory usage of the systemTop -d 2-c-p [Jenkins ID]Copy the code

Here’s Jenkins on his mission:

Now let’s fix Jenkins’ memory footprint,

Modifying a configuration file:

vim /etc/sysconfig/jenkins
Copy the code

Modify JENKINS_JAVA_OPTIONS as follows:

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

After modifying :wq, restart the Jenkins service

service jenkins restart
Copy the code

At the end

Through the above operation, the front end of the automatic deployment is completed. There are also many optimizations to be made, such as the Jenkins service not being on the same machine as Nginx where the front-end code will be deployed, requiring remote file transfers and shell commands. For example, Jenkins could send a notification email to everyone involved in the test after the build was successful. We’ll share these next time if we get a chance.

There are still many imperfections in the whole process. The emphasis is to experience this process. I hope you are not limited to the front-end code, but also have some understanding of Jenkins Nginx shell script vim command and other front-end periphery, so as to enhance our competitiveness.

You are also welcome to put forward ideas and learn from each other.

For more ways to learn, please check out our profile.

The resources

More complete front end questions

Jenkins+Nginx+Github/Gitlab Automated Build deployment front End project

CentOS7 Installs nginx and nginx configuration

CentOS tar package decompress details (decompress to the specified folder)

Automatic deployment solutions in VUE/React projects that cannot be ignored