摘要：正文準備首先確定需要完成的內容明確需求監(jiān)聽指定提交執(zhí)行指定多個腳本而且因為我這邊是需要分別對和目錄分別執(zhí)行部署命令。部署部署我們只需要對然后就可以在本地開發(fā)完之后推送，服務器就能自動拉取代碼并且部署。

之前斷斷續(xù)續(xù)在重構一個項目，然后發(fā)現功能一開始設計太多了，可能需要花大量時間來增加，但是核心功能基本完成，于是想著能不能半上線狀態(tài)，然后通過更新提交git，讓服務器部署自動更新。這之前接觸過git hook是可以實現的，因此這里記錄一篇文章邊搗鼓邊寫。

首先確定需要完成的內容,明確需求:

1.監(jiān)聽指定 git 提交
2.執(zhí)行指定多個腳本

而且因為我這邊是需要分別對client 和server 目錄分別執(zhí)行部署命令。所以需要特別處理。

首先去域名管理那邊增加一條A記錄指向新的項目名稱.因為Webhooks是需要外網域名的，因此先提前加一條。new.xxx.com

然后就是需要對服務器上Nginx做轉發(fā)配置。

我的nginx是很久之前配置的

在etc/nginx/conf/vhost里增加一個文件，里面寫入如下內容：

server
        {
                listen 80;
                server_name new.xxx.com;
                index index.html index.htm index.php default.html default.htm default.php;

                location / {

                        proxy_pass http://127.0.0.1:8801;
                }
                access_log off;

        }

將本地的8801轉發(fā)出去。

然后重啟一下Nginx nginx -s reload

然后git clone 倉庫

因為項目用了mongodb數據庫:
需要創(chuàng)建一個對應的數據庫并添加權限。

1. 切換數據庫到 abc
2. 指定了數據庫 abc ,擁有權限: userAdmin
 db.createUser(
   {
     user: "123",
     pwd: "123",
     roles: [ { role: "userAdmin", db: "abc" } ]
   }
 )
 3. 驗證下上面創(chuàng)建的賬號 123

 db.auth("123","123")
 => 1

這個其實是最簡單的,只要在你的github對應的項目倉庫右側選擇settings

然后選擇webhooks

選擇add webhook

然后按照如下配置即可:

這里需要記住你自己設置的secret 以及你定義的推送動作，我這里是pushCode 。

寫之前先來看下最終的目錄結構:

├── README.md
├── clean.sh // 清理緩存，并且執(zhí)行git命令
├── client
│   ├── autoClient.sh // client端自動監(jiān)聽
│   ├── build
│   ├── config
│   ├── package.json
│   ├── public
│   ├── scripts
│   ├── src
│   ├── tsconfig.json
│   ├── tsconfig.test.json
│   ├── tslint.json
│   ├── www
│   ├── yarn.lock
├── deploy
│   └── index.js // 監(jiān)聽webhook事件然后依次執(zhí)行 clean.sh autoClient.sh autoServer.sh
├── package.json
├── server
│   ├── autoServer.sh // server端自動監(jiān)聽
│   ├── dist
│   ├── package.json
│   ├── src
│   ├── tsconfig.json
│   ├── tslint.json
│   └── yarn.lock

因為項目原因，腳本還需要做一些定制。
首先是client端，因為前端是用了typescript + React全家桶 所以打包起來特別慢，當在服務器build的時候，因為阿里云內存給的不夠，所以會很卡。基于這個考慮，是打算本地bulid完之后，推送到git上，服務器去git pull。

而且前端還有個考慮是用什么跑前端代碼。因為服務器沒裝類似服務，因此打算用node框架koa起一個HTTP服務來跑。

代碼如下:

www目錄中

app.js

const Koa = require("koa")
const morgan = require("koa-morgan")
const path = require("path");
const static = require("koa-static")
const fs = require("fs")
const app = new Koa();
// logger
app.use(morgan(":remote-addr - :remote-user [:date[clf]] ":method :url HTTP/:http-version" :status :res[content-length] :response-time ms"));
// static assets
app.use(static(path.join(__dirname,"../build")));
//異步讀取文件的形式
// app.use(async (ctx,next) =>{
//     ctx.type = "html";
//     ctx.body = await fs.createReadStream(path.resolve(__dirname, "..", "./build", "index.html"));
// })
module.exports = app;

index.js

"use strict";
const app = require("./app");
const PORT = process.env.PORT || 8801;
console.log("client start")
app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}!`);
});

這樣通過命令node ./www/index.js能夠監(jiān)聽同級build目錄。

當然這比較粗暴，還需要慢慢改進。

我們需要在client目錄下建立autoClient.sh

#! /bin/bash
cd ./
echo "client build"
kill -9 $(lsof -i:8801 |awk "{print $2}" | tail -n 2) 
node ./www/index.js

用來自動執(zhí)行監(jiān)聽動作。

因為多次推送監(jiān)聽的前端端口一致，如果不處理會報錯。需要先根據端口號8801結束進程然后重新開啟服務。

然后是server端，因為整個后端是用koa完成的，項目比較小，在服務端即時編譯花費不了多少時間，因此直接執(zhí)行yarn start( "start": "yarn run build && yarn run watch",)用來編譯和監(jiān)聽。

在server目錄里建立autoServer.sh

#! /bin/bash
cd ./
echo "server start"
kill -9 $(lsof -i:8866 |awk "{print $2}" | tail -n 2) 
yarn run start

同樣我們需要在執(zhí)行監(jiān)聽之前結束上一個端口的進程。

然后我們來看clean.sh 這個shell腳本是用來清理client目錄下build文件夾。

#! /bin/bash
rm rf ./client/build
git reset --hard origin/master
git clean -f
git pull

可以看到 先清理了緩存然后再向服務器拉取代碼.

最后我們來看部署的腳本deploy/index.js

var spawn = require("child_process").spawn
var http = require("http")
var spawn = require("child_process").spawn
var createHandler = require("github-webhook-handler")
var handler = createHandler({ path: "/pushCode", secret: "xxx" }) // 根據git上webhook的配置填寫
http.createServer(function (req, res) {
  handler(req, res, function (err) {
    res.statusCode = 404;
    res.end("no such location")
  })
}).listen(7777)

handler.on("error", function (err) {
  console.error("Error:", err.message)
})

// 監(jiān)聽 push 事件
handler.on("push", function (event) {
  console.log("Received a push event for %s to %s",
    event.payload.repository.name,
    event.payload.ref)
    init() // 每次拉取都重新監(jiān)聽
}
)
function rumCommand( cmd, args, cwd, callback ) {
  var child = spawn( cmd, args, {cwd: cwd} )
  var response = ""
  child.stdout.on("data", function( buffer ){ response += buffer.toString(); })
  child.stdout.on("end", function(){ callback( response ) })
}

function init() {
  rumCommand("sh", ["../clean.sh"], "./" ,function( result ) { // 清理緩存
    console.log(result)
  })

  rumCommand("sh", ["../server/autoServer.sh"], "../server" ,function( result ) { // cLient端更新
    console.log(result)
  })
  
  rumCommand("sh", ["../client/autoClient.sh"], "../client" ,function( result ) { // server端更新
    console.log(result)
  })

}

init() // 腳本運行第一次默認指向一次

這里需要聲明的是因為多目錄下執(zhí)行腳本需要對應的環(huán)境。因此才把腳本都分開放。

部署我們只需要對pm2 start deploy/index.js

然后就可以在本地開發(fā)完之后推送，服務器就能自動拉取代碼并且部署。