As a front-end, AFTER I bought Tencent cloud server, I always wanted to try automatic package deployment of the project, but Jenkins was too large, the poor people bought a low configuration server is still not able to play, and there are gitHub webhooks, so I tried to use Node.js combined with webhooks to run the automatic deployment process.

Preparation: a server (build the Node environment and install Git), a front-end project hosted on Github and deployed on the server.

  • Create a service on the server (I used Node.js) that listens for post requests triggered by webhooks on gitHub,

The request contains the following data:

This differentiates triggered events (only push triggers are identified) from branches (only master branches are identified and automatically deployed) and then executes the deployment script.

The service code deploy.js is as follows:

var http = require('http') var createHandler = require('github-webhook-handler') var handler = createHandler({ path: '/', secret: Function run_cmd(CMD, args, args) function run_cmd(CMD, args, args, args, args) callback) { var spawn = require('child_process').spawn; var child = spawn(cmd, args); var resp = ""; child.stdout.on('data', function(buffer) { resp += buffer.toString(); }); child.stdout.on('end', function() { callback (resp) }); } http.createServer(function (req, res) { handler(req, res, function (err) { res.statusCode = 404 res.end('no such location') }) }).listen(7777) // On ('error', function (err) {console.error(' error :', function (err) {console. Err. Message)}) / / push event trigger handler on (' push ', function (event) {var name = event. Content. The repository. The name; console.log('Received a push event for %s to %s', event.payload.repository.name, event.payload.ref); // Check whether the master branch has changed. If (event.paypay. ref === 'refs/heads/master') {run_cmd('sh', ['./deploy.sh',name], function(text){ console.log(text) }); }}) // Shell script handler.on('issues', function (event) { console.log('Received an issue event for % action=%s: #%d %s', event.payload.repository.name, event.payload.action, event.payload.issue.number, event.payload.issue.title) })Copy the code

What the deployment script does: the server pulls and updates the code base (the server needs to configure Git, generate the public key, and add the public key to the GIhub project), packages and generates DIST, and moves it to the corresponding directory to replace the release file.

Sh deployment script code is as follows

#! /bin/bash WEB_NAME="$1"# PROJECT_PATH="/root/project/${WEB_NAME}/" # I use static directory of nginx DEPLOY_PATH = "/ usr/share/nginx/HTML / ${WEB_NAME} /" CD $PROJECT_PATH MD5 = ` md5sum package. The json | cut ` d '- f1 Rm - rf dist git pull NEW_MD5 = ` md5sum package. The json | the cut - d '- # f1 ` package before and after use. Json file MD5 value whether change to decide whether or not to NPM install if [ $MD5 == $NEW_MD5 ]; Else echo "change install" NPM installfi NPM run build if [[! -d "dist"]]; then echo "build error" exit 1fi rm -rf $DEPLOY_PATH* cp -rf dist/* $DEPLOY_PATH echo "build success $WEB_NAME"Copy the code

This service can be managed using PM2, and I rely on NPM Install to re-install depending on whether the MD5 value of the package.json file changes.

Configure url and secert in the Github project

Test, modify project code, commit, push. The gitHub panel has a trigger record, and the ReDeliver button makes it easy to debug without having to push it every time.

In this way, the front-end automatic deployment project process is realized, but in actual production, the INTERFACE CI system such as Jenkin is more reliable.