利用Github webhook 自动部署VUE项目之乞丐版
2020/4/20 11:18:38
本文主要是介绍利用Github webhook 自动部署VUE项目之乞丐版,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
用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 脚本会在编译后将结果拷贝到网站目录。整个流程就完了,如果除了问题,去看日志就完事了。因为是乞丐版,所以就没有做编译状态的显示这些。
这篇关于利用Github webhook 自动部署VUE项目之乞丐版的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南