【全棧項目上線（vue+node+mongodb）】07.使用git webhooks 優雅的自動化上線vue項目（巨詳細）：）

時間 2019-11-07

標籤項目上線 vue+node+mongodb vue node mongodb 使用 git webhooks 優雅自動化詳細欄目 MongoDB 简体版

原文原文鏈接

項目上線

github 和打包上線，感受比較繁瑣

每次更新完代碼，手動push 到遠程倉庫，若是想讓服務器的代碼也同步的話，須要手動去服務器上面，拉取，編譯，把編譯後的代碼複製須要的路徑。前端

使用git webhooks 完美解決這個問題

webhooks 概念

打開方式

在你的github項目中點擊 settings 會在左側webhooksvue

hook 鉤子，想要在git某個生命週期觸發一個事件，就是想讓程序在咱們觸發一個git事件的時候，作一些事情。
舉個列子：當咱們把代碼 git push origin master 的時候，push成功之後，但願服務器自動把代碼拉取，更新，作一些本身但願作的事情。git

使用詳細指南

下面以 vnshop10 爲例子，點擊圖片的 add webhook 按鈕github

點擊 addwebhook 後會出現確認密碼

確認完以後出現如下

輸入一個payload url

Payload URL 當咱們提交代碼後，git webhook 會像這個url提交一個post請求web

選擇返回的類型

Content type
一個是json 類型（選擇json類型）
一個是x-wwwl-from-urlencoded 類型shell

Secret 輸入祕鑰，這個和程序裏面的祕鑰要保持一致

選擇觸發的事件

Which events would you like to trigger this webhook?npm

咱們選擇 Just the push event.json

把deploy的項目克隆下拉

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

須要修改的
api

添加的文件瀏覽器

打開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