GitHub+Vue自动化构建部署

GitHub+Vue自动化构建

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


Github + WebHooks自动化部署

流程如下,在GitHub创建个项目(也可以用码云,带WebHook功能就行),在自己的服务器上部署WebHook脚本,配置GitHubWebHook通知,当我们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

GitHub+Vue自动化构建部署_第1张图片
image

添加Hook,名称自定义,脚本先留空
GitHub+Vue自动化构建部署_第2张图片
image

GitHub+Vue自动化构建部署_第3张图片
image

添加成功返回点击查看密钥
GitHub+Vue自动化构建部署_第4张图片
image

配置GitHub

新建一个自己的仓库,然后按下图依次选择

GitHub+Vue自动化构建部署_第5张图片
image

配置 webhook
GitHub+Vue自动化构建部署_第6张图片
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就执行下面的代码

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

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


懒是程序员的第一生产力

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

你可能感兴趣的:(GitHub+Vue自动化构建部署)