利用Github webhook 自动部署VUE项目之乞丐版

2,164

用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 脚本会在编译后将结果拷贝到网站目录。整个流程就完了,如果除了问题,去看日志就完事了。因为是乞丐版,所以就没有做编译状态的显示这些。