This article was first published on my personal blog: Efficient Front-end Project Automation deployment Practices – Using Webhook operation and maintenance, welcome to visit!

Optimization of reason

Recently, when I visited my blog website, I found that it often failed to open. My blog was installed on the coding Pages service, and I carefully checked the codes on the coding service and found that there was nothing wrong, which should be caused by the instability of the server of coding Pages. As I was sending resumes recently, this situation also caused me some troubles. In order to give recruiters a good browsing experience, I decided to optimize the operating environment of my blog website.

Optimization idea – put the website files on my own server

Execution method – Use FTP deployment

My optimization idea is to put the website files on my own server. I originally planned to use Hexo’s FTP deployment plugin to do this. When I ran Hexo D, the files were automatically uploaded to the server. After I tried this, I found that due to the nature of THE FTP protocol, when transferring a large number of files, the network bandwidth was not fully utilized, resulting in a very slow speed. This situation can only be solved by packaging and uploading the website files, and then decompressing them on the server side. Think about it, I think this is too complicated and cumbersome, it is not reflect my code cleanliness style, refuse to refuse!

Execution method – Use Webhook to automate deployment

In my previous internship company, I have seen my colleagues use Webhook and understand its operation methods and functions. Check out Github again:

Webhooks allow you to build or set up integrations, such as GitHub Apps or OAuth Apps, which subscribe to certain events on GitHub.com. When one of those events is triggered, we’ll send a HTTP POST payload to the webhook’s configured URL. Webhooks can be used to update an external issue tracker, trigger CI builds, update a backup mirror, or even deploy to your production server. You’re only limited by your imagination.

In a nutshell, WebHooks can be used to update external problem trackers, trigger CI builds, update backup images, and even deploy to production servers. This completely matches my current requirements, so a new idea came to me — clone my blog project on the server side and install dependencies, set corresponding Webhook hooks on the coding service, write callback methods that accept Webhook requests on the server side and execute building-related commands in the callback method. So you don’t have to pass papers around. It’s simple. Let’s do it!

step

  1. Clone your own project files at the appropriate location on the server and install the dependencies. In this case, I’m a Hexo blog project, so I have to install the Hexo dependencies globally.

  2. Write a service that receives webhook callbacks. In this case, I wrote it in Node.js. You can also use other backend languages, as long as you can execute shell commands. Write webhook.js in the appropriate place on the server as follows:

const http = require('http')
const { exec } = require('child_process')

const PORT = 9999 // Service port
const path = '/www/wwwroot/projects/xxxxxxx/' // This is the file address of the project on the server side
const commands = [
  'cd ' + path,
  'git pull'.'yarn dep'.// This command is compiled by my hexo project
  'rm -rf .. /.. /hexo-blog/'.// Delete the original file
  'mv ' + path + 'public/ .. /.. /hexo-blog/' // Place the compiled files in the site project folder
].join('&') // Write the commands to be executed on the server in turn

var deployServer = http.createServer(function(req, res) {
  if (req.url.search(/deploy\/? $/i) > 0) { // the deploy flag is marked here in case the user visits the site and accidentally starts the command
    let work = exec(commands, {
      maxBuffer: 5000 * 1024.// The default is 200 x 1024
    }, function(err, out) {
      if(! err) { res.writeHead(200)
        res.end('Deploy Done.')
      }
    })
    work.stdout.on('data'.function(data) {
      console.log('stdout: ' + data)
    })
    work.stderr.on('data'.function(data) {
      res.writeHead(500)
      res.end('Server Internal Error.')
      console.log('stderr: ' + data)
    })
  } else {
    res.writeHead(404)
    res.end('Not Found.')
  }
})

deployServer.listen(PORT)

Copy the code

The code is short and simple, and the point is to call node’s child process to execute the command. Note that when using child processes, printouts in callback functions are not printed to the console. You need to set the current execution to a variable and get printouts from its STdout and stderr data listeners. In addition, exec creates a buffer in memory to buffer all the output data during execution, and maxBuffer is an attribute that specifies the size of this buffer. If the output exceeds the specified size, an error of maxBuffer exceeded will be reported. This is also a common error, so we need to increase its maxBuffer.

After writing the server code, we SSH to the server and execute Node webhook.js to start the server without closing it for later debugging, and note that the port you set is already open in the server security group, or you can use the Nginx reverse proxy to start another service on port 80. We won’t go into details here. The goal is to make the service accessible to the extranet.

  1. Start and set up webhook services in Git project management Settings

    URL is mandatory. Fill in the following format:http://your server address: the port you just set /deploy, the token is send webhook, make the mark the end of the service, and prevent malicious or unintentional webhook service request to the role, if set the token, depending on the Git server, sends different token format, usually in the request header custom parameters, we need in the server receives the request method for processing, No more demos here.

  2. If setup is complete, the system automatically sends a detection command to initiate the Webhook callback.

    If the Settings are normal, a large output is displayed on the SSH interface

  3. At this time, we check the corresponding file of the website, and we will find that it has been updated! At this time set up the corresponding website services, you can normally visit our website.

  4. Pm2 is a node process management tool that can be used to simplify the tedious task of managing many Node applications. Global installation PM2:

npm install -g pm2
Copy the code

Enabling the Process Service

pm2 start webhook.js
Copy the code

If status is online like this, it is running properly

Webhook listens to our code push, so now we can easily deploy our project with Git push only.