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文件
-
- 修改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 不能启动
配置文件书写错误
