GitHub+Vue自动化构建

懒是第一生产力,写Vue都知道,写完了想在服务器上跑,就得npm run build,然后将生成的dist目录下的文件放到web目录下,但是每次都这样搞好像很麻烦,然后懒使我决定找个新路子.

---

Github + WebHooks自动化部署

流程如下,在GitHub创建个项目(也可以用码云,带WebHook功能就行),在自己的服务器上部署WebHook脚本,配置GitHub的WebHook通知,当我们push到仓库时,Github会主动发送一个通知到我们的服务器,然后服务器接到通知执行我们部署的脚本,开始自动化构建.

需要的资源

1. GitHub账号一个
2. Linux服务器一台,我个人使用系统为Centos7.2

详细步骤

先配置服务器

1. ssh连接上服务器
2. 安装必备环境
   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&param=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就执行下面的代码

1. 先cd到我们的项目目录下,git clone的目录
2. 执行pull命令拉取最新的代码
3. 将当前目录权限赋予给用户
4. 设置读写权限
5. 使用npm run build构建Vue项目
6. 删除web目录下的文件(我使用mv命令会要求输入yes,即使使用管道命令也无法成功,所以直接使用了rm,正常来说需要备份再删除处理)
7. 移动打包好的static目录和index.html文件到web目录下

测试

修改一下代码然后push到github上,然后稍等几十秒刷新网页,就可以看到我们修改后的内容,如果没有显示,我们可以在脚本里添加echo语句查看webhook日志来监控脚本是否正常运行,该功能在webhook面板有设置按钮.

---

懒是程序员的第一生产力

文中错误希望大家及时指出,有问题可以私信我