【全栈项目上线（vue+node+mongodb）】07.使用git webhooks 优雅的自动化上线vue项目（巨详细）：）

项目上线

github 和 打包上线，感觉比较繁琐

每次更新完代码，手动push 到远程仓库，如果想让服务器的代码也同步的话，需要手动去服务器上面，拉取，编译，把编译后的代码复制需要的路径。

使用git webhooks 完美解决这个问题

webhooks 概念

打开方式

在你的github项目中 点击 settings 会在左侧webhooks

hook 钩子，想要在git某个生命周期触发一个事件，就是想让程序在我们触发一个git事件的时候，做一些事情。
举个列子：当我们把代码 git push origin master 的时候，push成功以后，希望服务器自动把代码拉取，更新，做一些自己希望做的事情。

使用详细指南

下面以 vnshop10 为例子，点击图片的 add webhook 按钮

点击 addwebhook 后 会出现确认密码

确认完之后出现以下

输入一个payload url

Payload URL 当我们提交代码后，git webhook 会像这个url提交一个post请求

选择返回的类型

Content type
一个是json 类型 （选择json类型）
一个是x-wwwl-from-urlencoded 类型

Secret 输入秘钥，这个和程序里面的秘钥要保持一致

选择触发的事件

Which events would you like to trigger this webhook?

我们选择 Just the push event.

把deploy的项目克隆下拉

git clone https://github.com/itguide/deploy-vnshop.git deploy

需要修改的

添加的文件

打开index.js

const http = require('http')
const shell = require('shelljs')
const createHandler = require('github-webhook-handler')
const handler = createHandler({ path: '/webhook', secret: 'vnshop' })
    // 上面的 secret 保持和 GitHub 后台设置的一致

const port = 9988
const projects = ['vnshop.shudong.wang', 'vnshop', 'deploy', 'deploy-vnshop']

const projectHandler = (event, action) => {
    const project = event.payload.repository.name // 提交的仓库名字
    console.log(project);
    const branch = event.payload.ref
    if (projects.includes(project)) {
        console.log(new Date(), `Received a ${action} event for ${project} to ${branch}`)
        shell.exec(`sh ./projects/${project}.sh`, (code, stdout, stderr) => {
            console.log(new Date(), 'Exit code:', code)
                // console.log(new Date(), 'Program output:', stdout)
            console.log(new Date(), '执行完毕！错误信息：？', stderr)
        })

    }
}

http.createServer((req, res) => {
    handler(req, res, err => {
        res.statusCode = 404
        res.end('no such location')
    })
}).listen(port, () => {
    console.log(new Date(), `Deploy server Run！port at ${port}`)
    shell.exec('echo shell test OK!', (code, stdout, stderr) => {
        // console.log('Exit code:', code)
        // console.log('Program output:', stdout)
        // console.log('Program stderr:', stderr, stderr === '', !!stderr)

    })
})

handler.on('error', err => {
    console.error('Error:', err.message)
})

handler.on('push', event => { projectHandler(event, 'push') })
handler.on('commit_comment', event => { projectHandler(event, 'commit') })

以上代码重点修改

path：和git webhooks的payload 保持一致 记得前面加上完整url路径 比如： http://vx.itnote.cn:9988/webhook

相当于一个api，每次我们往github 提交事件的时候，github 的webhooks 根据我们设定的事件，然后像这个url提交一个post请求，然后服务器就会根据触发的请求，做一些事情。

secret：和git webhooks的secret 保持一致

触发的shell 脚本，根据自己的项目业务，编写自己的shell

注意：以下shell 是针对这个教程的项目仅供参考，如果你的项目不符合，请修改自己的shell，
我的项目是 vnshop10 所以这个shell文件名字是 vnshop10
需要添加的文件
vnshop10.sh

#!/bin/bash
 
WEB_PATH='/home/wwwroot/vnshop/'
WEB_PATH_CLIENT='/home/wwwroot/vnshop/client'
WEB_USER='www'
WEB_USERGROUP='www'
# we can do 
echo "Start deployment vx.itnote.cn"
cd $WEB_PATH
echo "pulling source code..."
# git reset --hard origin/release
# git clean -f
# 把项目拉取到最新
git pull
git checkout master
echo "changing permissions..."
# 切换到client里面
cd $WEB_PATH_CLIENT
# 把vue项目编译
npm run build
chown -R $WEB_USER:$WEB_USERGROUP $WEB_PATH_CLIENT
echo "Finished."

以上代码修改完后推送到自己 的仓库

检查一下远程仓库是谁的
git remote -v 

更改成自己的仓库
先删除远程的仓库地址
git remote remove origin

添加自己的仓库地址
git remote add origin 自己的仓库地址

然后去服务器自己把刚才推送的这个项目克隆下拉

cd /home/wwwroot

git clone https://github.com/itguide/deploy-vnshop.git

进入到项目里面
cd /home/wwwroot/deploy-vnshop

安装依赖包
cnpm i

然后启动这个deploy项目

cd /home/wwwroot/deploy-vnshop

使用pm2 启动，需要提前安装 pm2  npm i -g pm2

pm2 start index.js --name deploy --watch -i max -e ./logs/deploy/error.log -o ./logs/deploy/out.log

测试接口启动是否成功

netstat -anp | grep 9988

可以使用浏览器打开

http://vx.itnote.cn:9988/webhook

如果浏览器不可以访问，是阿里云主机的话，需要配置安全组规则

去填写git webhooks 这些配置

上面的信息，都要和自己填写的保持一致

填写好点击 add webhook 按钮

测试git webhook是否配置成功

生成一个 webhook 点击进去
出现以下情况，表示配置成功

测试整个流程是否ok，本地编写代码，push到仓库，检查线上代码是否发生改变。

在本地修改代码，然后提交到master 经过几秒钟漫长的等待，发现线上代码成更改

大功告成，如果不能帮助到你，请留言

如果帮助到你，请点赞，收藏，嘿嘿，也可以打赏哦！

欢迎加入前端持续学习