Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to use Jenkins and Nginx to achieve automatic construction and continuous integration of front-end projects", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use Jenkins and Nginx to achieve automatic construction and continuous integration of front-end projects" this article.

Jenkins introduction

Jenkins is an open source continuous integration tool written in Java and can be installed directly from the yum command line on CentOS. Jenkins is just a platform, and what really works is plug-ins. This is why Jenkins is popular, because Jenkins has all kinds of plug-ins.

First log in to the server to update the system software

$yum update install Java and Git$ yum install java $yum install git install Nginx$ yum install nginx / / install $service nginx start / / start

Redirecting to / bin/systemctl start nginx.service appears.

This indicates that Nginx has been started successfully. Visit http://. If you successfully install your ip/, you will see the default welcome screen of Nginx:

Install Jenkins$ wget-O / etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo rpm-- import https://jenkins-ci.org/redhat/jenkins-ci.org.key $yum install jenkins / / use the yum command to install Jenkins$ service jenkins restart / / start Jenkins directly after completion

After Jenkins starts successfully, the default is port 8080, and the browser enters your server's IP address plus port 8080 to access it.

Enter cat / var/lib/jenkins/secrets/initialAdminPassword to view the initial password.

Here we choose to recommend the installation of the general plug-in, and then wait for the installation of the plug-in and initialization of the account.

Then install the two recommended plug-ins: Rebuilder and SafeRestart.

Install the NodeJs plug-in in Jenkins

Because our project is packaged with Node, first install the NodeJs plug-in in Jenkins, and then go to the global tool configuration to configure a version of Node that we want to use.

Create a task

Click to create a new task.

Jenkins Associated GitHub Project address:

Select the build environment and write the shell command:

Click build immediately after the configuration is completed, wait for the build to be finished, and click on the workspace to find that there is an extra packaged dist directory. Click the console output to view the detailed build log.

So far, the local code has been submitted to GitHub, and then click build on Jenkins, you can pull the replacement code and package it. Next, put the packaged dist directory on the target server.

Install the Publish Over SSH plug-in, and we will implement the server deployment function through this tool

After installation, go to "system Management"-> "system Settings"-> "Publish over SSH" to set server information:

Passphrase: password (password for key. If not set, it is empty)

Path to the Path to key:key file (private key)

Key: copy the private key to this box (just write one for path to key and key)

Configuration of SSH Servers:

SSH Server Name: the name of the logo (whatever you choose)

Hostname: the hostname or IP address that needs to connect to the SSH (recommended IP)

Username: user name

Remote Directory: remote directory (path to the testjenkins folder created in step 2 above)

Advanced configuration:

Use password authentication, or use a different key: check this box to log in with a password. If you don't want to match SSH, you can try this first.

Passphrase/Password: password for password login mode

Port: Port (default 22)

Timeout (ms): timeout (milliseconds) defaults to 300000

What is configured here is to log in with the account password. Click test after completion, and the Success appears indicating that the configuration is successful.

Configure the post-build operation in the testJenkins project just now, select send build artificial over SSH, and the parameters are described as follows:

Name: choose a SSH server that you have configured

Source files: write the path of the file you want to transfer

Remove prefix: the prefix to be removed. The directory structure of the remote server will be the same as that written by Source files.

Remote directory: write under the directory address of the remote server you want to deploy. If you don't write it, it will be the default remote directory in the SSH Servers configuration.

Exec command: after transferring the command to be executed, I have executed three commands to enter the test directory, decompress, and delete the compressed package after the decompression is complete.

Notice that the compressed dist directory command is added to the build:

Perform the build after filling it out. Log in to our target server after success and find that there are files to be run in the test directory:

Access to the domain name discovery project can be accessed.

Next, after the native push code is developed on the GitHub, the Webhook,Jenkins is triggered to execute the build automatically.

Jenkins installs the Generic Webhook Trigger plug-in

GitHub add trigger

Configuration method

In the testJenkins project just now, click on the build trigger to select Generic Webhook Trigger and enter token:

GitHub configures Webhook.

Select the Settings- > Webhooks > add webhook configuration method in the GitHub project and follow the format in the red box above, and select to trigger Webhook in the push code. After success, a small green tick appears below.

To test it, take 9900 of the home page of the Vue project, and then the push code goes to GitHub and finds that the build in Jenkins has been executed automatically.

The view page is also ok.

The above is all the contents of the article "how to use Jenkins and Nginx to achieve automatic construction and continuous integration of front-end projects". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.