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

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

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

場景

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

實(shí)施

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

改進(jìn)

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

本地文件壓縮功能

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

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

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

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

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

本地文件壓縮

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

這里主要使用了 archiver 這個模塊來實(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 是一個加戳的變量：

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

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

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

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

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

上傳文件：

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

刪除上個版本解壓縮部署新版本

本來，使用 ssh2 的 shell 命令來實(shí)現(xiàn)這兩個功能應(yīng)該是很簡單的?？墒?，沒逼格啊。麻煩啊。于是我就想到 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)用這個 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ù)來控制功能的啟用與否。process.argv 這個變量存放的就是調(diào)用命令的參數(shù)。具體是什么用的，console.log 一下就都知道啦。
于是就有了下圖：

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

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

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

總結(jié)

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

GPU云服務(wù)器云服務(wù)器基于webrtc的項(xiàng)目基于webrtc的開源項(xiàng)目發(fā)布項(xiàng)目最快的基于比較的排序算法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90756.html

發(fā)表評論

登陸后可評論

0條評論

ctriptech

男|高級講師

我要關(guān)注我要私信

TA的文章

Linux下安裝kettle

閱讀 3863·2021-10-12 10:11
JetBrains 推出專業(yè)數(shù)據(jù)科學(xué)家的 IDE：DataSpell

閱讀 3665·2021-09-13 10:27
深入CSS之外邊距折疊(margin collapse)詳解

閱讀 2575·2019-08-30 15:53
常見的sticky footer布局方式

閱讀 2007·2019-08-29 18:33
css background-size與背景圖片填滿div

閱讀 2219·2019-08-29 14:03
flex布局

閱讀 1019·2019-08-29 13:27
2014年CSS報(bào)告——考察如何使用CSS

閱讀 3346·2019-08-28 18:07
Zepto 源碼分析 3 - qsa 實(shí)現(xiàn)與工具函數(shù)設(shè)計(jì)

閱讀 814·2019-08-26 13:23

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

Vue+Express全棧購物商城

Vue+Express全棧購物商城

**Vue-項(xiàng)目從本地搭建到線上部署（wǒ shì biaō tí dǎng）**

Electron 前端提測小工具

Vue-CLI 3.x 自動部署項(xiàng)目至服務(wù)器

發(fā)表評論

0條評論

ctriptech

男|高級講師

TA的文章

Linux下安裝kettle

JetBrains 推出專業(yè)數(shù)據(jù)科學(xué)家的 IDE：DataSpell

深入CSS之外邊距折疊(margin collapse)詳解

常見的sticky footer布局方式

css background-size與背景圖片填滿div

flex布局

2014年CSS報(bào)告——考察如何使用CSS

Zepto 源碼分析 3 - qsa 實(shí)現(xiàn)與工具函數(shù)設(shè)計(jì)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！