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&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就执行下面的代码

先cd到我们的项目目录下,git clone的目录

执行pull命令拉取最新的代码

将当前目录权限赋予给用户

设置读写权限

使用npm run build构建Vue项目

删除web目录下的文件(我使用mv命令会要求输入yes,即使使用管道命令也无法成功,所以直接使用了rm,正常来说需要备份再删除处理)

移动打包好的static目录和index.html文件到web目录下

测试

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

懒是程序员的第一生产力

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