用VUE写了个小项目,每次更新了都要在本地 build 好了后打包再上传到服务器上,再解压。
这就很麻烦,一开始想要的用 jenkins 来自动集成,但是操作起来很麻烦,且没必要。但是我注意到了 github 提供了一个 webhook 钩子,当 push 了代码后,github 会向指定的 Url 发起一个 POST 请求。
那么,我就想到了可以用 flask 来监听请求,当收到了 github 的 POST 请求,就执行 shell 脚本开始 build 并把 dist 目录里的代码复制到网站目录。
那么开始动手
将源码 clone 到服务器上
因为代码在 github 是公开的,所以不需要配置私钥,如果是私有的,则需要配置一个私钥让 github 信任服务器。
将源码拷贝下来。
> cd /root/build_home
> git clone https://github.com/jethroHuang/clock_h5.git
编写 shell 脚本
有了项目目录,就编写脚本来编译吧。
/root/build_home/build_mirror.sh
#!/bin/bash
cd /root/build_home/clock_h5
rm -rf dist
git pull
npm install
npm run build
if [[ ! -d "dist" ]]; then
echo "build error"
exit 1
fi
rm -rf /www/wwwroot/mirror.jethro.fun/*
cp -rf dist/* /www/wwwroot/mirror.jethro.fun/
echo "build success"
编写 flask 脚本
有了编译的脚本,下一步就是监听 github 的钩子了。
/root/build_home/webhook/main.py
# coding: utf-8
from flask import request, Flask
import queue
import os
import threading
import time
app = Flask(__name__)
# build 事件队列
build_signal = queue.Queue()
# 是否 build 中
runing = False
@app.route('/push', methods=['POST', 'GET'])
def push():
if request.method == 'GET':
return 'OK'
else:
# 如果队列是空的,则添加一个事件,否则不添加,为了防止重复请求添加过多的事件导致一直 Build
# 这样可使队列中始终只有一个事件,当 build 开始执行后,又会变空,此时才能添加。
# 就能实现执行中多次请求,最终都只会执行一次 build
if build_signal.empty():
build_signal.put('request build')
return 'OK'
@app.route('/')
def index():
if runing:
return '<h1>运行中</h1>'
else:
return '<h1>空闲中</h1>'
def buildThread():
# 循环监听 build 事件
global runing
while True:
# 如果事件队列不为空,则表示需要执行Build
if not build_signal.empty():
item = build_signal.get()
print(item)
runing = True
# 开始执行 build 脚本
os.system('/root/build_home/build_mirror.sh > /root/build_home/webhook/build.log')
runing = False
time.sleep(0.5)
# 启动一个线程来循环事件队列
t1 = threading.Thread(target=buildThread)
t1.start()
if __name__ == "__main__":
app.run(host="0.0.0.0", port='5060')
启动 flask 项目
> nohup python3 /root/build_home/webhook/main.py > /root/build_home/webhook/myout.file 2>&1 &
去 github 添加 webhook
点击 Add webhook
输入登录密码
填写 flask 监听的 url,当 push 代码后 github 会向这个 url 发起 post 请求
配置完成
到这里以及配置好了,接下来只需要 git push 以下代码,github 就会去请求我们的 flask 项目的 /push 路由,此时会运行打包的 shell 脚本,shell 脚本会在编译后将结果拷贝到网站目录。整个流程就完了,如果除了问题,去看日志就完事了。因为是乞丐版,所以就没有做编译状态的显示这些。