This article will automate the deployment of my previous front-end code for building a mobile shelf based on VUe-CLI3.0 to the target server at 🌰.

Achieve the goal

Push the code locally to GitHub, Webhook automatically triggers the build action on Jenkins, completes the installation and packaging of the Node plug-in, and then publishes Over SSH plug-in to deploy the packaged file to the target server.


  1. Github accounts and projects
  2. Centos server;
  3. Java SDK is installed on the server.
  4. Server installation nginx + start;
  5. Jenkins + boot on server;

Jenkins is introduced

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, and all that really works are plug-ins. That’s why Jenkins is so popular, because Jenkins has all kinds of plugins.

First, log in to the server to update the system software

$ yum update
Copy the code

Install Java and Git

$ yum install java
$ yum install git
Copy the code

Install nginx

$yum install nginx // $service nginx startCopy the code

Redirecting to /bin/ Systemctl start nginx.service

Nginx has started successfully. Visit http://ip /. If the installation is successful, the default welcome page will be displayed

Install Jenkins

$ wget -O /etc/yum.repos.d/jenkins.repo rpm --import $yum install Jenkins // Use the yum command to install Jenkins $service Jenkins Restart // Start JenkinsCopy the code

Jenkins will start on port 8080 by default. Enter your server IP address and port 8080 to access the browser.

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

Here, we just choose the recommended universal plug-in installation, and wait for the plug-in installation and account initialization

Then install the two recommended plugins Rebuilder SafeRestart

Install the nodeJs plug-in in Jenkins

Since we will be using node packaging for our project, we will first install the nodeJs plug-in in Jenkins, and then go to the global tool configuration to configure the version of Node we will use.

Create a task

  1. Click Create a New task

  2. Jenkins associated GitHub project address

  3. Select the build environment and write the shell commands

When the configuration is complete, click Build now, wait until the build is complete, click workspace, and you can see that an extra dist directory has been packaged. Click on the console output to see the detailed build log

You can pull and package the code by clicking build on Jenkins. The next step is to put the packaged dist directory on the target server.

Install the Publish Over SSH plug-in, and we will use this tool to implement server deployment.

After the installation, go to System Management > System Settings >Publish over SSH and set the server information

Path to key: copy the private key to this box (either Path to key or key). SSH Server Name: Hostname: Hostname or IP address (recommended) Username: Username Remote Directory: Advanced configuration: Use password authentication, or Use a different key: Passphrase/Password: Password for login mode Port: Port (default 22) Timeout (ms) : Timeout (milliseconds) Default: 300000Copy the code

In this section, the login is configured with the account and password. After filling in the password, click Test. If Success is displayed, the configuration is successful

Select Send Build Artificial over SSH from testJenkins. Select send Build artificial over SSH.

Name: select one of the SSH servers you have configured. Source files: write the path to the file you want to transfer. Remove prefix: Do not write the prefix. Write to the directory where you want to deploy to the remote server. Otherwise, it is the default remote directory Exec in the SSH Servers configurationcommand: After transferring the command to be executed, I execute the entry heretestDirectory, decompress, and delete the compressed package after decompressionCopy the code

Note the addition of the compressed dist directory command to the build

When complete, execute the build. After successfully logging in to our target server, we found the file to run in the test directory

Access The Domain discovery project is now accessible

After the push code is developed locally on Github, the Webhook is triggered and Jenkins automatically executes the build.

  1. Jenkins installs the Generic Webhook Trigger plugin
  2. Github adds triggers

Configuration method

1. Select Generic Webhook Trigger from Build Trigger in testJenkins project and fill in the token

Select Settings->Webhooks> Add Webhook in the Github project. The configuration mode is to trigger Webhook when code is pushed according to the format in the red box above. After success, a small green tick will appear at the bottom

Test this by putting 9900 on the vUE project homepage, then push the code to Github, and find that the build in Jenkins has been automatically executed.

A simple workflow of front-end automation is set up, whether the code is pushed and built manually in Jenkins or pushed and built automatically, depending on the company.

The last

Write a little verbose, there are mistakes I hope you point out, also hope this article is helpful to you.

There is no server to learn children’s shoes can look at Tencent Cloud 1 core 2G, 1M bandwidth, 50GB of storage space cloud server, 1201 oh.