gitee基于webhooks实现前端简单自动化部署

1.为什么采用自动化部署

简而言之,程序员优秀传统:懒 =>高级生产力.

基于gitee进行的自动化部署,服务器环境为Ubuntu

基于webhooks进行的自动化部署更加轻快便捷

2.部署步骤

1).服务器购买

可以购买阿里云抢占式服务器进行实验,花费应该在一大洋以内,或者直接购买一年低配服务器,一百大洋以内.

• 实例创建完成之后要配置安全组 => 只有配置了安全组,对应端口才可以访问(80,以及webhooks需要使用的7777端口

  • 进入实例
    
    

  • 配置安全组
    
    

  • 加入安全组,选择对应实例
    
    

  • 配置
    
    

2).服务器安装一些环境

• 连接服务器
• 安装一些环境,例如git,node,pm2

3).gitee创建仓库并配置webhooks

• 创建仓库,并在服务器端添加ssh连接秘钥

// 服务器端生成秘钥:
ssh-keygen -t rsa -c "你的邮箱之类的标识用的"  // 不用加双引号

• 具体如何查看ssh-key,可以自行百度,系统不同略有不同
• 在gitee添加ssh-key
  
  
  
  
• 给仓库添加webhooks
  
  
  
  

4).webhooks代码与sh脚本

echo start build

# 获取最新版代码
git pull

#安装依赖
npm install

# 打包项目
npm run build

echo build end

var http = require('http')
var createHandler = require('gitee-webhook-handler')
var handler = createHandler({ path: '/example', secret: 'example' })
// 上面的 secret 保持和 Gitee 后台设置的一致

function run_cmd(cmd, 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) {
    console.log(req.url)
    handler(req, res, function (err) {
      res.statusCode = 404
      res.end('no such location')
    })
  })
  .listen(7777, () => {
// 此端口要和gitee设置的端口号一致
    console.log('WebHooks Listern at 7777')
  })

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

handler.on('*', function (event) {
  console.log('Received *', event.payload.action)
  //   run_cmd('sh', ['./deploy-dev.sh'], function(text){ console.log(text) });
})
// gitee 判断方式
handler.on('Push Hook', function (event) {
  console.log('Received a push event for %s to %s', event.payload.repository.name, event.payload.ref)
 // 此处shell脚本,根据自己编写的文件的文件名来决定
  run_cmd('sh', ['./deploy-dev.sh'], function (text) {
    console.log(text)
  })
})

// github 判断方式
// handler.on('push', function (event) {
//   console.log('Received a push event for %s to %s', event.payload.repository.name, event.payload.ref)
//   // 分支判断
//   if (event.payload.ref === 'refs/heads/master') {
//     console.log('deploy master..')
//     run_cmd('sh', ['./deploy-dev.sh'], function (text) {
//       console.log(text)
//     })
//   }
// })

5).部署

• 通过git clone ssh地址 将代码拉下来
• 测试git pull 是否能够拉取最新代码
• 通过 pm2 执行webhooks.js(可以先通过node 执行代码进行测试,没问题在通过pm2托管程序)
• 配置nginx文件
  • 1. 修改nginx.conf 中的用户为服务器用户即服务器登录名 一般为root

cd /etc/nginx
vi nginx.conf

• 2.添加项目配置

cd /etc/nginx/sites-enabled
vi example  // 创建nginx服务配置

server {
    listen       80;
  # 如果有域名,此处可以根据域名进行映射,没有可以不写
    server_name  example.zdzspace.cn;
  // 对应项目打包静态文件所在地址
    root /root/example/dist;
   location /{
       # root /root/www;
      // 当访问 的时候默认直接以dist/index.html 为入口
        index index.html;
      # 该配置能让vue项目刷新后,仍能正常访问页面
        try_files $uri $uri/ /index.html;
 }
}
nginx -s reload // 重新加载nginx

• 所有操作完成之后,就可以直接通过git push操作自定进行代码打包编译

6).一些问题

• 端口号占用

lsof -i:端口号  // 查看占用端口号pid
sudo kill -9 pid // 结束对应进程

• nginx命令

nginx -t // 测试配置文件书写是否有误
nginx // 启动nginx
nginx -s stop // 停止nginx
nginx -s reload // 重启nginx

• 接收到请求,但是没有执行脚本
  
  是否对应脚本文件名称写错了
• nginx 不能启动
  
  配置文件书写错误