轉(zhuǎn)自：?忙碌的豆己

前言

公司之前更新前端代碼需要遠(yuǎn)程到服務(wù)器后，將對(duì)應(yīng)打包好的項(xiàng)目代碼復(fù)制到目錄中去。在更新頻繁的時(shí)候，中間所浪費(fèi)的無用時(shí)間就變的很多，加上回退版本還要涉及到備份的操作，多服務(wù)器的時(shí)候還要記住密碼賬號(hào)等等等操作就會(huì)覺得繁瑣。再加之人員眾多，服務(wù)器的安全性也無法得到保障。遂計(jì)劃開發(fā)出一套前端版本控制的解決方案。

經(jīng)過2020一整年，3個(gè)大版本的迭代，最終完成了正式的1.0版本。包括版本上傳，切換，測(cè)試，上線，刪除，備份等功能，很好的解決的公司內(nèi)部問題。在這里分享出我自己的三個(gè)版本的思路（僅有思路以及部分代碼），有不同想法和各種建議歡迎討論~

版本1-基于git和nodejs

最開始的想法很簡(jiǎn)單，既然git在版本控制的方面做得很好，那么以它為核心去構(gòu)建一套系統(tǒng)就成為了第一種解決方案。

一、思路

1. 創(chuàng)建一個(gè)用于放置打包好文件的git項(xiàng)目
2. 在本地和服務(wù)器端都拉取該git
3. 本地項(xiàng)目更新打包后，提交git，在服務(wù)端的git接收到更新的指令后，進(jìn)行拉取，完成更新。

二、知識(shí)點(diǎn)

1. git hook（git操作會(huì)觸發(fā)的鉤子函數(shù)）
2. nodejs

三、坑

正常情況下，git的鉤子post-receive在接收到更新的時(shí)候會(huì)觸發(fā)，利用這個(gè)鉤子在進(jìn)行g(shù)it pull就可以完成更新，但在windows下無法正確觸發(fā)（這點(diǎn)不知道為何，希望了解的大佬能科普下，球球了）

四、具體實(shí)現(xiàn)

由于坑的原因，不得不換一種思路，好在git鉤子中的pre-push（git提交）能夠正確觸發(fā)，那么在服務(wù)器搭建一個(gè)node服務(wù)用于接收請(qǐng)求后到對(duì)應(yīng)的目錄git pull。

1. 本地git hook（pre-push）

采用curl命令直接模擬請(qǐng)求，但windows的cmd上不支持，所以要安裝curl命令（具體方法：https://www.cnblogs.com/zhuzhenwei918/p/6781314.html）接著進(jìn)入 .git/hooks 文件夾將里面隨便哪個(gè)文件命名成 pre-push 并輸入

#!/bin/sh
exec?curl?192.168.0.83:1911/update?url=d:/wwwroot/dkdWeb/pages/copy

在推送前觸發(fā)鉤子函數(shù)訪問服務(wù)器上的某個(gè)端口，url參數(shù)用于找到項(xiàng)目位置，并更新

2. 服務(wù)器node服務(wù)

搭建最簡(jiǎn)單的node服務(wù)這里用的是express框架，這個(gè)服務(wù)主要是用于在接收到請(qǐng)求的時(shí)候，根據(jù)參數(shù)不同，在不同的項(xiàng)目中執(zhí)行g(shù)it pull更新的動(dòng)作

var?express?=?require('express');
var?app?=?express();
var?cmd?=?require("node-cmd");
//設(shè)置跨域訪問
app.all('*',?function?(req,?res,?next)?{
????res.header("Access-Control-Allow-Origin",?"*");
????res.header("Access-Control-Allow-Headers",?"X-Requested-With");
????res.header("Access-Control-Allow-Methods",?"PUT,POST,GET,DELETE,OPTIONS");
????res.header("X-Powered-By",?'?3.2.1');
????res.header("Content-Type",?"application/json;charset=utf-8");
????next();
});

//寫個(gè)接口
app.get('/update',?function?(req,?res)?{
????res.status(200);
????res.json('執(zhí)行成功');
????if(req.query.url){
???????setTimeout(function(){
??????????cmd.run("cd?/d?"+req.query.url+"?&?git?pull");
???????},5000)??
????}
});
//配置服務(wù)端口
var?server?=?app.listen(1911,?function?()?{
????var?host?=?server.address().address;
????var?port?=?server.address().port;
})

五、缺點(diǎn)

1. 需要新建git項(xiàng)目，改git配置，還要再雙端拉取，前期準(zhǔn)備過多。
2. 沒有版本控制功能，要回退只能代碼回退后重新打包上傳。
3. 一但服務(wù)器端的項(xiàng)目文件夾發(fā)生改動(dòng)，那么在拉取的時(shí)候就會(huì)被識(shí)別沖突（發(fā)生率高）

六、優(yōu)點(diǎn)

1. 擁有g(shù)it的版本管理
2. 只需要正常的git提交就完成自動(dòng)的更新

版本2-基于nodejs

雖然說基于git，可以不用做一些版本的事情，但同樣局限性很大，并且所需的版本控制也沒有到那么細(xì)致的地步，所以版本2放棄了git，完全使用nodejs讀文件，寫文件，解壓文件的能力進(jìn)行開發(fā)，并且在此基礎(chǔ)上，實(shí)現(xiàn)可視化的管理。

一、思路

1. 在服務(wù)端新建一個(gè)網(wǎng)頁用于可視化
2. 在服務(wù)端創(chuàng)建一個(gè)專門用于版本管理的文件夾
3. 在服務(wù)端創(chuàng)建node服務(wù)，讀取該文件夾中的各種版本信息并展示
4. 本地訪問服務(wù)器的網(wǎng)頁的時(shí)候上傳壓縮后的文件并且表明版本信息，服務(wù)器接收后，儲(chǔ)存在版本管理的文件夾中
5. 在網(wǎng)頁上點(diǎn)擊上線后，解壓對(duì)應(yīng)的壓縮包至項(xiàng)目目錄，并且修改版本信息

最終效果如下：

二、知識(shí)點(diǎn)

1. nodejs

三、坑

由于上傳的是整個(gè)壓縮包，這會(huì)導(dǎo)致服務(wù)器上的壓縮包越來越多，儲(chǔ)存占用的越來越大，所以需要前端先上傳到oss，再把得到的oss地址上傳上去

四、具體實(shí)現(xiàn)

1.項(xiàng)目列表

每個(gè)項(xiàng)目即為一個(gè)文件夾，通過讀取版本管理文件夾下的文件夾以獲取項(xiàng)目列表

2.項(xiàng)目信息

每個(gè)項(xiàng)目文件夾中擁有兩個(gè)文件。一個(gè)用于存放項(xiàng)目解壓地址，第二個(gè)用于存放版本信息

3.項(xiàng)目操作

所有對(duì)于項(xiàng)目的操作，包括上線，編輯，刪除，新增項(xiàng)目，新增版本等，都是對(duì)文件或文件夾的修改與新增。

4.上線

上線其實(shí)就是找到對(duì)應(yīng)版本指到的oss地址，進(jìn)行下載后，解壓到對(duì)應(yīng)目錄中，并且把版本信息變動(dòng)的操作。

const?express?=?require('express'),
????app?=?express(),
????bodyParser?=?require('body-parser'),
????checkToken?=?require('./checkToken'),
????fs?=?require('fs'),
????compressing?=?require("compressing"),
????tools?=?require('./tools/tools.js');;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({?extended:?false?}));

//設(shè)置跨域訪問
app.all('*',?function?(req,?res,?next)?{
????res.header("Access-Control-Allow-Origin",?"*");
????res.header("Access-Control-Allow-Headers",?"*");
????res.header("Access-Control-Allow-Methods",?"PUT,POST,GET,DELETE,OPTIONS");
????res.header("Content-Type",?"application/json;charset=utf-8");
????next();
});

app.use(checkToken);

app.post('/toLine',async?(req,?res)?=>?{
????let?fdata?=?req.body.pAddr;
????let?download?=?await?tools.downloadFileAsync(req.body.ossAddr.replace('https',?'http'),?__dirname?+?'\\download.zip');
????fs.exists(fdata,?function?(exists)?{
????????if?(exists)?{
????????????tools.delDir(fdata,?false)
????????????compressing.zip.uncompress(__dirname?+?'\\download.zip',?fdata,?{?zipFileNameEncoding:?'gbk'?})
????????????????.then(()?=>?{
????????????????????fs.unlink(__dirname?+?'\\download.zip',?()?=>?{?});
????????????????????tools.handleRes(res,?true,?'上線成功');
????????????????})
????????????????.catch(err?=>?{
????????????????????console.log(err)
????????????????????tools.handleRes(res,?false,?'解壓失敗')
????????????????});

????????}
????????else?{
????????????tools.handleRes(res,?false,?'項(xiàng)目地址不存在')
????????}
????})


});

app.listen(8899,?function?()?{
????console.log('自動(dòng)更新啟動(dòng)~');
})

五、缺點(diǎn)

1. 使用文件，和文件夾來管理版本過程比較復(fù)雜（驗(yàn)證存在，打開文件讀取，修改值，儲(chǔ)存）
2. 擴(kuò)展性十分差
3. 涉及到文件名的無法重名
4. 多站點(diǎn)無法兼容，必須一個(gè)站點(diǎn)部署一整套服務(wù)

六、優(yōu)點(diǎn)

1. 脫離git所帶來的的束縛以及問題
2. 有可視化的界面
3. 版本切換操作方便簡(jiǎn)單
4. 開發(fā)者本地?zé)o需進(jìn)行配置，只負(fù)責(zé)上傳

版本3-基于nodejs以及數(shù)據(jù)庫

有了可視化界面讓上版本變得十分方便，但一方面由于單純使用文件，來進(jìn)行管理，擴(kuò)展性十分差，比如鑒權(quán)，多站點(diǎn)，多平臺(tái)，測(cè)試站正式站分離等，所以引入數(shù)據(jù)庫來儲(chǔ)存版本信息。

一、思路

版本除了將版本數(shù)據(jù)搬進(jìn)數(shù)據(jù)庫外，主要解決多站點(diǎn)的問題，即使用一個(gè)平臺(tái)可以更新各服務(wù)器的前端。主要來講講這里的思路

1.主服務(wù)

主服務(wù)用于調(diào)用數(shù)據(jù)庫來進(jìn)行版本管理

2.分服務(wù)

其他服務(wù)器上只要部署分服務(wù)，該服務(wù)接收到來自主服務(wù)的請(qǐng)求后，進(jìn)行更新操作，最后返回是否成功

功能部分截圖：

二、知識(shí)點(diǎn)

1. nodejs
2. 數(shù)據(jù)庫

三、坑

暫無

四、具體實(shí)現(xiàn)

1.數(shù)據(jù)庫

數(shù)據(jù)庫的設(shè)計(jì)因人而異，只要做到能夠版本控制就好。（僅供參考）

1. 部門表：id，部門名稱
2. 平臺(tái)表：id，平臺(tái)名稱，所屬部門id
3. 項(xiàng)目表：id，所屬平臺(tái)id，項(xiàng)目名稱，正式站項(xiàng)目地址，正式站請(qǐng)求地址，測(cè)試站項(xiàng)目地址，測(cè)試站請(qǐng)求地址，變動(dòng)時(shí)間
4. 版本表：id，版本名稱，所屬項(xiàng)目id，oss地址，上線狀態(tài)，測(cè)試狀態(tài)

2.主服務(wù)

1. 部門的獲取
2. 平臺(tái)的獲取
3. 項(xiàng)目的增刪改查
4. 版本的增刪，上線以及測(cè)試

3.分服務(wù)

分服務(wù)只有上線功能，其原理與版本2中的上線一致，忘記的倒回去看看~

五、缺點(diǎn)

1. 目前還是使用壓縮包的形式，即打包項(xiàng)目后在壓縮成zip包，再上傳，若有更好的想法，歡迎交流
2. 系統(tǒng)中還缺乏鑒權(quán)功能
3. 上傳版本還是比較復(fù)雜

六、優(yōu)點(diǎn)

就除了以上缺點(diǎn)就全是優(yōu)點(diǎn)！

后記

該系統(tǒng)已經(jīng)在線上運(yùn)行了一段時(shí)間了，也改變了我們前端的更新方式，也算是今年做的比較出色的東西吧。當(dāng)然系統(tǒng)中差的東西還有很多，相信隨著使用的人慢慢變多，以及吸收各個(gè)方面的意見，它會(huì)完善成一個(gè)很好用的工具~