Hey! Jenkins front-end automation deployment

Why write this article, first start with a bat 🦇… The way we used to launch a project was to develop it locally and deploy the compiled product on the server using FTP or other methods, which was cumbersome and inefficient. So this installment will use Jenkins to build a front-end automation pipeline.

1. This section describes the front-end automatic deployment process

• Local code is pushed to a remote repository
• Jenkins on the server listens, performs the build, pulls the code, executes the compile package, and deploys the compiled artifacts into the Web project working directory
• The server Nginx reverse proxy is accessible by the client

3. Server configuration

Installing the Java Environment

sudo yum install java
Copy the code

Viewing the version number

java -verson
Copy the code

If the version number is displayed, the installation is successful

sudo yum install git
Copy the code

git -version
Copy the code

Install Jenkins

Method 2 adopted in this paper

Method 1

If you have previously imported keys using Jenkins, skip this step. If you are installing keys for the first time, enter the following command

sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
Copy the code

The installation

yum -y install jenkins
Copy the code

This is slow, so you can try method 2

Way 2

1. Download Jenkins locally and click here. This article is Jenkins-2.204.2-1.1.noarch.rpm 2. Use the Transmit command to push the device to the server. (For details about other software or operating systems, see the Transmit command.) 3.

Sudo RPM - ih Jenkins - 2.204.2 1.1 noarch. RPMCopy the code

If an error occurs, you can check to see if these three directories exist. If not, you need to create them

service jenkins start
Copy the code

Configuring Jenkins Permissions

Jenkins currently does not have permission to execute shell scripts. Perform the following operations

Sudo vim /etc/sysconfig/jenkins = JENKINS_USER="root"Copy the code

After that, modify Jenkins related folder user permissions

chown -R root:root /var/lib/jenkins
chown -R root:root /var/cache/jenkins
chown -R root:root /var/log/jenkins
service jenkins restart
Copy the code

$ cd{your Jenkins working directory}/updatesEnter the update configuration location
Copy the code

$ sed -i 's/http:\/\/updates.jenkins-ci.org\/download/https:\/\/mirrors.tuna.tsinghua.edu.cn\/jenkins/g' default.json && sed -i 's/http:\/\/www.google.com/https:\/\/www.baidu.com/g' default.json
Copy the code

Iv. Gitee configuration

1. Create your own repository and upload your own code (if you haven’t registered first)
2. Open repository Settings add the public key (server public key)

Enter the server in public key generation mode

ssh-keygen -t rsa -C "***@163.com"
Copy the code

Press enter three times as prompted to generate an SSH key. Run cat ~/. SSH /id_rsa.pub to view the public key of the server. Add the public key

Initialize the

1. Browser inputhttp://server address :8080You’ll go to the getting Started page, copy and paste the password as prompted, and click Continue
   

   

2. Install the plug-in, you can choose the recommendation (since the installation plug-in speed is configured above, this should be fast, if it is still slow, or the installation fails, you can skip it first)

3. After installing the plug-in, create the user. Click Save and finish
   

   

4. Click Start

Create the first new task

Go to the home page and click New Item or start creating a new task to start our first step

Git hook

When we push code locally to the remote repository, the repository will send a POST request to the configured Jenkins server interface address. Jenkins will receive it and build the trigger task.

1. On the configuration page, click source code Management and select Git

Use the Generic Webhook Trigger Plugin (you need to install it if you don’t have it), check it, and add the Token(to Trigger the remote repository web hooks).

3. Warehouse configuration hook

Open warehouse management, add webHook,

URL rule: http://:< port >/generic-webhook-trgger/invoke? token=<Token is the token configured in the build trigger in the Jenkins task configuration

And then I’m gonna add

4. Build configuration

This article is only a demo. It only involves deploying the code to the web working directory to select build => add build steps => execute shell to execute the command. The operation of executing the command is to put the files in the directory. Copy it to the /work/ LSQ web working directory

\cp -r -a ./* /work/lsq
Copy the code

5. Click Apply and save

test

Once we’ve configured it, we can test it out

1. Push code from the local repository to the remote repository

2. In The Jenkins task, you can see the build history

   

3. If you click there, you can see the console output

   

4. Enter the server to view

The work/ LSQ directory of the server is indeed updated synchronously, indicating that it is successful!

Nginx configuration

When the automated deployment is successful, I hope my users can access the page of my server, which needs to use Nginx. If you want to learn more about Nginx, please refer to here. This time only involves the installation and simple use of Nginx in the server

sudo yum install nginx -y
Copy the code

nginx -v
Copy the code

Visit the home page

You can configure the security group to allow the browser to access port 80 (the default port 80) of the server. Then you can view the home page

Modify the Nginx configuration

Now that you have access to the page, you need to take a look at the Nginx configuration and configure the page into the automated deployment HTML file we configured above.

1. First look at the Nginx configuration

/etc/nginx/nginx.conf is the main nginx configuration file

vim /etc/nginx/nginx.conf
Copy the code

Root indicates the default startup directory of the service

2. Changing the Boot directory

Change the directory to ‘/work/ LSQ ‘and save it

3. Restart the Nginx

nginx
nginx -s reload
Copy the code

4. Access Server IP address

Check whether the anti-counterfeiting server IP address is valid again. After confirmation, the page is indeed displayed as the files in the working directory.

The overall regression

Now that our simple front-end automation deployment is complete, it’s time to take a step back. The overall logic is: update the local file, push the code to the remote warehouse, and automatically take effect online **

1. Native code update

Change Hello Word to Hello World

git add .
git commit -m"change text"
git push origin master
Copy the code

2. Jenkins build

See if the Build of the Jenkins mission was successful

3. Online valid

Visit the line again to see if it works