前端小册

Appearance

On this page

Github项目实现自动化部署 ​

当我们利用github来托管项目时，每次部署项目都要走同样的流程，敲击同样的命令行，尤其的我们的node项目更是无法忍受这种重复工作。

那到底有没有一种可以解放我们双手，当我们提交代码后，服务器自动执行我们已经制定好的命令行，答案是我们可以利用Github自有的Webhooks。

Webhooks ​

Webhooks是来监测你在github上的各种事件，我们可以通过定制它来监测一个push事件，每当我们提交代码时Webhooks会被触发，这是我们可以通过配置一个HOST POST请求到你所需要的地址。

如何配置 ​

找到你在Github上的项目地址上的Setting的Webhooks，如下图配置：

1h8u6A.md.png

项目配置 ​

  • 编写执行shell命令

在项目根目录下新建deployed.sh文件，输入你想在服务器上执行的命令行，如：

cd /front/docs/

git pull origin master
  • 编写执行脚本

在项目根目录下新建deployed.js文件

var http = require('http')
var spawn = require('child_process').spawn
var createHandler = require('github-webhook-handler')
var handler = createHandler({
  path: '/pushCode',
  secret: '12345678'
})
http.createServer(function (req, res) {
  handler(req, res, function (err) {
    res.statusCode = 404;
    res.end('no such location')
  })
}).listen(3000)

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

handler.on('push', function (event) {
  console.log('Received a push event for %s to %s',
    event.payload.repository.name,
    event.payload.ref)
  rumCommand('sh', ['./deployed.sh'], function (txt) {
    console.log(txt)
  })
})

function rumCommand(cmd, args, callback) {
  var child = spawn(cmd, args)
  var response = ''
  child.stdout.on('data', function (buffer) {
    response += buffer.toString()
  })
  child.stdout.on('end', function () {
    callback(response)
  })
}

nginx配置 ​

执行脚本跑在了3000端口，我们服务器对应启用到 3000 端口

upstream test {
    server 127.0.0.1:3000;
}

server {

  location /pushCode {
    proxy_pass http://test;
    proxy_redirect off;
  }

}

部署项目 ​

首次部署到服务器时，仍然是需要我们手动执行命令git pull项目，当我们在服务器上clone下我们的项目后，在本地尝试修改下代码，然后再次提交，可看到后台的日志

1h81Tf.md.png

再次查看Webhooks

1h88k8.md.png

表示已经自动触发了接口，项目自动化部署成功。

管理应用 ​

在服务器上执行node命令后，当我们离开服务器后，实际上程序进程关闭了，所以我们利用pm2来管理我们的node进程。

在项目根目录下新建pm2.json

[{
  "name": "test",
  "script": "deployed.js",
  "env_dev": {
    "NODE_ENV": "development"
  },
  "env_production": {
    "NODE_ENV": "production"
  }
}]

把所有的代码推送上服务器，进入服务器项目目录，执行

// 启动命令
pm2 start pm2.json

// 查看是否启动
pm2 list

// 查看日志
pm2 logs