基于 vue-cli 的前端項(xiàng)目的自動(dòng)發(fā)布預(yù)覽環(huán)境

ctriptech 發(fā)布于2019-08-21 18:43 / 489人閱讀

摘要：就是在提測(cè)前部署一個(gè)預(yù)覽環(huán)境，在提測(cè)前，每個(gè)人本地驗(yàn)證一遍，再放在預(yù)覽環(huán)境驗(yàn)證一遍。于是就準(zhǔn)備啪啪啪擼一個(gè)完成自動(dòng)發(fā)布預(yù)覽環(huán)境的工具。用來(lái)直接把已經(jīng)好的文件發(fā)布到預(yù)覽環(huán)境。這樣以后組里的其他同事也都可以用一行命令自己部署預(yù)覽環(huán)境了。

場(chǎng)景

進(jìn)入公司一段時(shí)間了。流程還是不太讓人省心。就在上個(gè)提測(cè)版本的質(zhì)量還是沒法保證，總是或多或少出現(xiàn)一些問題。于是就想到了上家公司的一個(gè)做法。就是在提測(cè)前部署一個(gè)預(yù)覽環(huán)境，在提測(cè)前，每個(gè)人本地驗(yàn)證一遍，再放在預(yù)覽環(huán)境驗(yàn)證一遍。

實(shí)施

有了想法，就得去付諸行動(dòng)。先是用公司的一個(gè)測(cè)試服務(wù)器多帶帶起了一個(gè)服務(wù)，用nginx來(lái)做反向代理。然后把前端代碼部署上去。
整個(gè)部署流程是：用 xshell 連上服務(wù)器，然后用 xftp 鏈接服務(wù)器，然后本地 build 項(xiàng)目，接著把 build 好的文件通過 xftp 上傳到服務(wù)器上。整個(gè)流程感覺稍有繁瑣。而且，對(duì)于不熟悉 shell 工具的同學(xué)不友好啊。重復(fù)的工作啊有沒有。

改進(jìn)

既然前端是萬(wàn)能的，那么這種重復(fù)的操作在我們前端工作流中是不被允許的。剛好項(xiàng)目進(jìn)度不是那么忙。于是就準(zhǔn)備啪啪啪擼一個(gè) build 完成自動(dòng)發(fā)布預(yù)覽環(huán)境的工具。
要完成這個(gè)工具，我們來(lái)梳理一下需要實(shí)現(xiàn)的功能：

本地文件壓縮功能

鏈接遠(yuǎn)程服務(wù)器

壓縮包上傳遠(yuǎn)程服務(wù)器

遠(yuǎn)程服務(wù)器解壓縮

本地 build 完畢的一個(gè)回調(diào)

可能你會(huì)說，你傻啊，不會(huì)直接上傳，還要壓縮解壓縮。這里用壓縮包傳輸一方面是方便做備份。我考慮的是上傳在一個(gè)backup的文件夾里，然后用的時(shí)候再?gòu)倪@個(gè)文件夾取出來(lái)，然后解壓到置頂目錄。提測(cè)的時(shí)候也可以直接讓測(cè)試來(lái)這個(gè)目錄去壓縮包。
另一方面是不想寫遞歸啊。如果要上傳的目錄結(jié)構(gòu)不確定少不了遞歸啊，遞歸啊，遞歸啊。我怕我頭大。

本地文件壓縮

于是創(chuàng)建一個(gè) ftp.js 的文件，來(lái)實(shí)現(xiàn)上傳本地 build 完的 dist 目錄下的文件到服務(wù)器。

這里主要使用了 archiver 這個(gè)模塊來(lái)實(shí)現(xiàn)壓縮功能。
用 archiver 壓縮本地文件：

let output = fs.createWriteStream(__dirname + "/../dist/" + fileName);
let archive = archiver("zip");
output.on("end", function () {
  console.log("Data has been drained");
});
output.on("error", function (err) {
  console.log("壓縮失敗");
  throw err;
});
output.on("close", function () {
  console.log("壓縮成功");
});
archive.pipe(output);
archive.file(__dirname + "/../dist/index.html", {name: "index.html"});
archive.directory(__dirname + "/../dist/static/", "static");
archive.finalize();

fileName 是一個(gè)加戳的變量：

let fileName = "dist" + new Date().getTime() + ".zip";

說道這里，其實(shí)還可以把 git 的分支或者 tag 信息放在這個(gè)戳里邊。用相關(guān)的 nodejs 模塊來(lái)獲取一下 git 倉(cāng)庫(kù)信息就好啦。有空我要來(lái)優(yōu)化一波。

鏈接遠(yuǎn)程服務(wù)器和上傳文件。

主要使用了 ssh2 這個(gè)模塊來(lái)實(shí)現(xiàn)和遠(yuǎn)程服務(wù)器的交互。
鏈接遠(yuǎn)程服務(wù)器：

conn.on("ready", function () {
  console.log("連接上了！")  
}).on("end", function () {
  console.log("完成")
}).connect({
  host: "ip",
  port: 端口號(hào),
  username: "用戶名",
  password: "密碼"
});

上傳文件：

conn.sftp(function (err, sftp) {
  if (err) throw err;
  // 上傳文件測(cè)試
  sftp.fastPut(__dirname + "/../dist/" + fileName, "/usr/share/nginx/htmlBackup/" + fileName, {}, (err, result) => {
    if (err) {
      console.log(err);
    }
    if (result) console.log(result);
  });
});

刪除上個(gè)版本解壓縮部署新版本

本來(lái)，使用 ssh2 的 shell 命令來(lái)實(shí)現(xiàn)這兩個(gè)功能應(yīng)該是很簡(jiǎn)單的。可是，沒逼格啊。麻煩啊。于是我就想到 shell 腳本。說實(shí)話，在此之前，我也不知道 shell 腳本咋玩滴。但是我可以學(xué)嘛。于是，學(xué)習(xí)一波后就有了如下 html.sh 文件：

#!/bin/bash
# arg1:dir name  
# arg2:zip name
# delete old file 
deleteFile=$1
sudo chmod -R 777 /usr/share/nginx/$deleteFile
sudo rm -rf /usr/share/nginx/$deleteFile/*
# unzip file 
unzipFile=$2
sudo unzip -o /usr/share/nginx/htmlBackup/$unzipFile -d /usr/share/nginx/$deleteFile
# exit

其實(shí) shell 腳本也不算復(fù)雜，大概一上午吧，寫了這么幾行。服務(wù)器權(quán)限設(shè)置有點(diǎn)嚴(yán)格，所以先用 chmod 給老文件設(shè)置權(quán)限，我懶于是就用 777 。然后，rm 刪除老文件，然后解壓縮 zip 包。其中 $1 和 $2 是調(diào)用這個(gè) shell 傳入的參數(shù)。
好了，說了這么多，shell 怎么用。當(dāng)然還是要回到 ssh2 上。代碼如下：

// 調(diào)用遠(yuǎn)程構(gòu)建shell
conn.exec("/usr/share/nginx/html.sh html " + fileName, function(err, stream) {
  if (err) throw err;
  stream.on("close", function(code, signal) {
    console.log("Stream :: close :: code: " + code + ", signal: " + signal);
    conn.end();
  }).on("data", function(data) {
    let dataStr = ("" + data).trim();
    // 列出已經(jīng)上傳過的 zip 包
    if (dataStr.length > 5) {
      console.log("STDOUT: " + ("" + data).trim());
    }
  }).stderr.on("data", function(data) {
    console.log("STDERR: " + ("" + data).trim());
  });
  stream.on("end", function() {
    console.log("預(yù)覽環(huán)境構(gòu)建完成");
  });
});

新增功能基本上大功告成了。

build 回調(diào)

首先找到 vue-cli build 完成后的位置，也就是 build/build.js 配置中大概40行的位置。然后把上邊我們寫的功能導(dǎo)出模塊，然后再 build.js 中引入 ftp.js。

let ftp = require("./ftp")

注意，這里我并不想破壞原有的命令的功能，于是就通過判斷執(zhí)行命令時(shí)的參數(shù)來(lái)控制功能的啟用與否。process.argv 這個(gè)變量存放的就是調(diào)用命令的參數(shù)。具體是什么用的，console.log 一下就都知道啦。
于是就有了下圖：

那么命令輸入長(zhǎng)了，敲字手疼啊。于是就修改 package.json 的 scripts。
添加如下兩行：

"bap": "node build/build.js buildWithPublish",
"p": "node build/ftp.js publish"

這樣，我們使用的時(shí)候就可以直接 npm run bap 來(lái) build 和發(fā)布預(yù)覽環(huán)境。用 npm run p 來(lái)直接把已經(jīng) build 好的文件發(fā)布到預(yù)覽環(huán)境。

總結(jié)

好吧，作為一個(gè)能用即可的懶人，代碼寫的有點(diǎn)亂，整個(gè)功能的代碼就不貼啦。基本上核心功能的代碼就是上述說的那些。
避免重復(fù)就是節(jié)約時(shí)間啊。用了大概一天時(shí)間來(lái)實(shí)現(xiàn)這個(gè)功能我覺得很值。這樣以后組里的其他同事也都可以用一行命令自己部署預(yù)覽環(huán)境了。不用打開 xshell 打開 xftp。
基于上述功能，還做了一個(gè)提測(cè)小工具：https://segmentfault.com/a/11...