GitHub+Vue自动化构建
懒是第一生产力,写Vue都知道,写完了想在服务器上跑,就得npm run build,然后将生成的dist目录下的文件放到web目录下,但是每次都这样搞好像很麻烦,然后懒使我决定找个新路子.
Github + WebHooks自动化部署
流程如下,在GitHub创建个项目(也可以用码云,带WebHook功能就行),在自己的服务器上部署WebHook脚本,配置GitHub的WebHook通知,当我们push到仓库时,Github会主动发送一个通知到我们的服务器,然后服务器接到通知执行我们部署的脚本,开始自动化构建.
需要的资源
-
GitHub账号一个 -
Linux服务器一台,我个人使用系统为Centos7.2
详细步骤
先配置服务器
-
ssh连接上服务器 - 安装必备环境
2.1.git:命令为yum install git
2.2. 宝塔面板:详细安装方法
2.3.node:命令为yum install nodejs
2.4.npm:命令为yum install npm
2.5.vue-cli:命令为npm install -g @vue/cli
登录面板配置WebHook
依次选择软件管理-宝塔插件-安装WebHook
image
添加Hook,名称自定义,脚本先留空
image
image
添加成功返回点击查看密钥
image
配置GitHub
新建一个自己的仓库,然后按下图依次选择
image
配置
webhook
image
Payload URL在上图的宝塔面板密钥页面能看到
http://服务器ip:8888/hook?access_key=xxxxxxiHNtaNoccENzeiKGi2GuaiaxYkyhxR0Dx¶m=pull
注意最后有个param参数需要和脚本里对应起来,我这里写的是pull
服务器配置git
首先ssh上服务器,随便找个目录使用git clone将我们在GitHub上的项目clone到目录下,这里为了方便我就不添加账号专门用于管理git,正式环境一般会为git添加一个账号只用于git目录,做权限控制
编写自动化脚本
if test $1 = 'pull'
then
cd /root/myprojectgit/vueprojectlist/
git pull origin master
chown -R www:www ./
chmod -R 755 ./
npm run build
rm -rf /www/wwwroot/www.xxx.com/*
mv /root/myprojectgit/vueprojectlist/dist/* /www/wwwroot/www.xxx.com/
fi
脚本解释:如果我们传入的参数为pull就执行下面的代码
- 先cd到我们的项目目录下,
git clone的目录 - 执行
pull命令拉取最新的代码 - 将当前目录权限赋予给用户
- 设置读写权限
- 使用
npm run build构建Vue项目 - 删除
web目录下的文件(我使用mv命令会要求输入yes,即使使用管道命令也无法成功,所以直接使用了rm,正常来说需要备份再删除处理) - 移动打包好的
static目录和index.html文件到web目录下
测试
修改一下代码然后push到github上,然后稍等几十秒刷新网页,就可以看到我们修改后的内容,如果没有显示,我们可以在脚本里添加echo语句查看webhook日志来监控脚本是否正常运行,该功能在webhook面板有设置按钮.
懒是程序员的第一生产力
文中错误希望大家及时指出,有问题可以私信我
