GitHub+Vue自動(dòng)化構(gòu)建
懶是第一生產(chǎn)力,寫(xiě)Vue都知道,寫(xiě)完了想在服務(wù)器上跑,就得npm run build,然后將生成的dist目錄下的文件放到web目錄下,但是每次都這樣搞好像很麻煩,然后懶使我決定找個(gè)新路子.
Github + WebHooks自動(dòng)化部署
流程如下,在GitHub創(chuàng)建個(gè)項(xiàng)目(也可以用碼云,帶WebHook功能就行),在自己的服務(wù)器上部署WebHook腳本,配置GitHub的WebHook通知,當(dāng)我們push到倉(cāng)庫(kù)時(shí),Github會(huì)主動(dòng)發(fā)送一個(gè)通知到我們的服務(wù)器,然后服務(wù)器接到通知執(zhí)行我們部署的腳本,開(kāi)始自動(dòng)化構(gòu)建.
需要的資源
-
GitHub賬號(hào)一個(gè) -
Linux服務(wù)器一臺(tái),我個(gè)人使用系統(tǒng)為Centos7.2
詳細(xì)步驟
先配置服務(wù)器
-
ssh連接上服務(wù)器 - 安裝必備環(huán)境
2.1.git:命令為yum install git
2.2. 寶塔面板:詳細(xì)安裝方法
2.3.node:命令為yum install nodejs
2.4.npm:命令為yum install npm
2.5.vue-cli:命令為npm install -g @vue/cli
登錄面板配置WebHook
依次選擇軟件管理-寶塔插件-安裝WebHook
添加Hook,名稱自定義,腳本先留空
添加成功返回點(diǎn)擊查看密鑰
配置GitHub
新建一個(gè)自己的倉(cāng)庫(kù),然后按下圖依次選擇
配置
webhook
Payload URL在上圖的寶塔面板密鑰頁(yè)面能看到
http://服務(wù)器ip:8888/hook?access_key=xxxxxxiHNtaNoccENzeiKGi2GuaiaxYkyhxR0Dx¶m=pull
注意最后有個(gè)param參數(shù)需要和腳本里對(duì)應(yīng)起來(lái),我這里寫(xiě)的是pull
服務(wù)器配置git
首先ssh上服務(wù)器,隨便找個(gè)目錄使用git clone將我們?cè)?code>GitHub上的項(xiàng)目clone到目錄下,這里為了方便我就不添加賬號(hào)專門(mén)用于管理git,正式環(huán)境一般會(huì)為git添加一個(gè)賬號(hào)只用于git目錄,做權(quán)限控制
編寫(xiě)自動(dòng)化腳本
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
腳本解釋:如果我們傳入的參數(shù)為pull就執(zhí)行下面的代碼
- 先cd到我們的項(xiàng)目目錄下,
git clone的目錄 - 執(zhí)行
pull命令拉取最新的代碼 - 將當(dāng)前目錄權(quán)限賦予給用戶
- 設(shè)置讀寫(xiě)權(quán)限
- 使用
npm run build構(gòu)建Vue項(xiàng)目 - 刪除
web目錄下的文件(我使用mv命令會(huì)要求輸入yes,即使使用管道命令也無(wú)法成功,所以直接使用了rm,正常來(lái)說(shuō)需要備份再刪除處理) - 移動(dòng)打包好的
static目錄和index.html文件到web目錄下
測(cè)試
修改一下代碼然后push到github上,然后稍等幾十秒刷新網(wǎng)頁(yè),就可以看到我們修改后的內(nèi)容,如果沒(méi)有顯示,我們可以在腳本里添加echo語(yǔ)句查看webhook日志來(lái)監(jiān)控腳本是否正常運(yùn)行,該功能在webhook面板有設(shè)置按鈕.
懶是程序員的第一生產(chǎn)力
文中錯(cuò)誤希望大家及時(shí)指出,有問(wèn)題可以私信我
