Achieve the goal

The local push code to GitHub, Webhook automatically triggered the build action on Jenkins, completed the installation of node plug-in and package, and then through the Publish Over SSH plug-in, the packaged file will be deployed to the target server.

preparation

Github account and project centos server; Java SDK is installed on the server. Server install nginx + start; Jenkins + start server installed; Jenkins is an open source continuous integration tool written in Java that can be installed directly on Centos via the yum command line. Jenkins is just a platform, it’s all about plugins. That’s why Jenkins is popular, because Jenkins has everything.

Log in to the server first and update the system software

Git $yum install git $yum install git $yum install nginx $yum install nginx/ / installation
$ service nginx start / / startRedirecting to /bin/systemctl start nginx.serviceCopy the code

Nginx has been successfully started. Visit http:// your IP address/and the default nginx welcome screen will be displayed if the installation is successful

Install Jenkins $wget - O/etc/yum repos. D/Jenkins. 'HTTP://pkg.jenkins-ci.org/redhat/jenkins.repo
rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key 
$ yum install jenkins // Use yum to install Jenkins

$ service jenkins restart  / / start Jenkins

Copy the code

The default port for Jenkins startup is port 8080. You can access it by entering your server IP address and port 8080 in the browser.

Input the cat/var/lib/Jenkins/secrets/initialAdminPassword view the initial password

Here, we select the recommended general plug-in installation, and wait for the plug-in installation and account initialization

Then install the two recommended plug-ins Rebuilder SafeRestart

Install nodeJs plugin in Jenkins because our project will use Node package, so we install nodeJs plugin in Jenkins first, then go to global tool configuration, configure a version of Node we will use.

Create a task Click Create a new task

Jenkins associated the GitHub project address

Select the build environment and write shell commands

After the configuration is complete, click “Build Now”. After the construction is complete, click “Workspace” and you can find that there is an additional packaged Dist directory. Click console Output to view the detailed build log

Now that you have the local code submitted to Github, click Build on Jenkins to pull the code and package it. Next, you can implement the packaged dist directory and put it on the target server.

Install the Publish Over SSH plug-in, which we will use to implement server deployment capabilities. After the installation is complete, choose System > System Settings >Publish over SSH to set server information

Passphrase: SSH Servers: Path to the key file (private key) key: Copy the private key to this box SSH Server Name (whatever you choose) Hostname specifies the Name or IP address of the SSH Server to be connected to. Use password authentication, or Use a different key: Passphrase/Password: Password for login mode Port: Port (default22) Timeout (ms) : Specifies the Timeout period (ms). Default value300000

Copy the code

After filling in the password, click Test. If “Success” appears, the configuration is successful

Mysql > select Send Build artificial over SSH from testJenkins

Name: select an SSH server that you have configured. Source files: Write the path of the file that you want to transfer. Remove prefix: Delete the prefix that you want to Remove. SSH Servers Exec Command = 'Exec command'; After transferring the commands to be executed, I executed three commands: go to the test directory, unzip it, and delete the compressed package after unzip it. Note that I added the compressed dist directory command to the buildCopy the code

Fill in the blanks and execute the build. After success, log in to our target server and find the file to run in the test directory

The access domain name discovery project is now accessible

Next, the implementation of the development of local push code to Github, triggering Webhook, Jenkins automatically execute the construction.

Install Generic Webhook Trigger plugin github to add Trigger configuration method 1. In the testJenkins project, click build Trigger and select Generic Webhook Trigger. Fill in the token

Use the format shown in the red box above to trigger Webhook when pushing code. A small green check box appears below

To test it, remove the 9900 from the vue project homepage, push the code to Github, and find that the build in Jenkins has been automatically executed.

It is also OK to view the page

A set of simple front-end automation workflow has been set up. Whether to manually build in Jenkins after code push or automatically build after code push depends on the situation of the company.

The original address mp.weixin.qq.com/s/ACjfE8EVE…