github管理项目 使用 webhooks 实现推送,服务器实时自动部署


首先我们要考虑的一个问题是,git推送,服务器实时部署的原理是什么?

如下图

在这里插入图片描述
主要的流程过程

本地代码push → 远程库发起请求 → 服务器更新

那么流程是这样一个流程,具体的我们该如何实现呢?

一、配置 github ,监听推送向指定的服务器端口发起 push 行为

首先还是打开我们要监听的 github 地址,找到 settings 设置
在这里插入图片描述

找到左侧选项的 webhooks 选项,新增一个推送监听项,而这个监听项也就是向服务器发送一个 push ,而对应的服务器也可以接收到这个 push ,那么我们就可以根据这个 push 去执行一些事情,实现服务器的自动部署。
在这里插入图片描述
在这里插入图片描述
创建完成之后那么在 webhooks 列表页也就有了一项我们刚刚配置的请求 push 项
在这里插入图片描述
那么这个时候我们 github 需要操作的步骤也就完成了

二、配置服务器,安装 git ,node ,pm2

准备工作

在这边也是推荐给大家安装一下宝塔面板就不需要手动的去安装配置node了,可以参考下方链接。

Linux系统安装宝塔面板

安装好宝塔面板之后 会给你一个账号密码
在这里插入图片描述
安装成功之后我们也可以使用 这行代码进行查看账号密码

/etc/init.d/bt default

打开对应的外网地址 输入上方的用户名密码 进入到指定的页面

在这里插入图片描述
这个时候我们就可以下载对应的 PM2 管理器,里面也同时夹带了 node 以及 pm2 ,当然我们还需要做的一步操作是要把 github 配置的 push 端口放开,因为安装宝塔的同时也为我们开启了防火墙。
在这里插入图片描述
接下来我们需要安装 git ,我这边使用的系统是 Ubuntu 同时的大家可以根据自己的 linux 系统进行查找配置安装

sudo apt-get install git

安装好git之后进行命令配置,大家可以自行查找

三、启动 node 服务器,执行 sh 文件

自己在服务器定义一个文件夹,我的项目都是放在了 www 里面的,我这边就是进入到 www 文件下之后,在内部新建了一个webhooks文件夹。

在这里插入图片描述
最先的进入到文件夹后我们需要做的还是

npm init -y // 初始化
npm i github-webhook-handler // 安装 github webhook监听工具

接下来我们需要新建两个文件

gitupdate.js

var http = require('http')
var createHandler = require('/www/webhooks/node_modules/github-webhook-handler')
// secret:填写 github 配置的密码  path设置成 / 即可
var handler = createHandler({ path: '/', secret: 'password' })

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) {
  handler(req, res, function (err) {
    // 断开请求
    console.log('请求过来了,不要走了!')
    res.statusCode = 404
    res.end('no such location')
  })
}).listen(4000,function(){
  console.log((new Date()) + '我启动起来了', 4000);
})

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)
    // 监听到 push 执行 sh 文件夹
    run_cmd('sh', ['./deploy.sh',event.payload.repository.name], function(text){ console.log(text) });
})

handler.on('issues', function (event) {
  console.log('Received an issue event for %s action=%s: #%d %s',
    event.payload.repository.name,
    event.payload.action,
    event.payload.issue.number,
    event.payload.issue.title)
})

deploy.sh

# WEB_PATH 填写对应的要自动更新的地址 其实就是进入的那个文件夹下
WEB_PATH='/www/projects/'tinkerbell-ui
WEB_USER='root'
WEB_USERGROUP='root'

echo "Start deployment"
# 此步进入到上方的填写的文件夹下
cd $WEB_PATH
echo "pulling source code..."
# 执行三步拉取操作
git reset --hard origin/main
git clean -f
git pull
echo "changing permissions..."
chown -R $WEB_USER:$WEB_USERGROUP $WEB_PATH
echo "Finished."

配置完成之后这个时候我们就可以使用 pm2 运行我们的项目了

pm2 start gitupdate.js --name tinkerbell-ui

在这里插入图片描述
那么这个时候自动部署也就成功了

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
可以的,Github Actions可以用来自动化前端项目部署到云服务器。以下是一个简单的例子: 1. 首先,在你的Github仓库中创建一个`.github/workflows`文件夹,并在该文件夹下创建一个`deploy.yml`文件。 2. 在`deploy.yml`文件中设置触发部署的事件,例如push到master分支。然后设置一个`job`,该`job`会在触发事件后运行。 3. 在该`job`中,使用`actions/checkout` action拉取代码,并使用`actions/setup-node` action安装依赖。 4. 接下来,使用你喜欢的打包工具打包你的前端代码,例如webpack或者parcel。打包后的文件会被存储在一个`dist`文件夹中。 5. 然后,使用`appleboy/ssh-action` action将打包后的文件上传到云服务器。该action会使用SSH登录到你的服务器,并将文件复制到服务器上的指定目录。 下面是一个示例的`deploy.yml`文件: ```yml name: Deploy to Cloud Server on: push: branches: - master jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v2 - name: Setup Node uses: actions/setup-node@v1 with: node-version: '12.x' - name: Install dependencies run: npm install - name: Build run: npm run build - name: Deploy to Cloud Server uses: appleboy/ssh-action@master with: host: ${{ secrets.HOST }} username: ${{ secrets.USERNAME }} password: ${{ secrets.PASSWORD }} port: ${{ secrets.PORT }} script: | cd /path/to/your/project rm -rf * scp -r /path/to/your/project/dist/* ./ ``` 这个例子是使用密码登录到云服务器的。如果你使用的是SSH Key,你需要相应地修改`deploy.yml`文件。此外,你需要在Github仓库的`Settings`中添加`secrets`,以保存你的服务器信息和登录凭证。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

归来巨星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值