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 不能启动
配置文件书写错误
分类:
软件插件
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 10亿数据,如何做迁移?
· 推荐几款开源且免费的 .NET MAUI 组件库
· c# 半导体/led行业 晶圆片WaferMap实现 map图实现入门篇