前言

????????“如果你有開(kāi)發(fā)環(huán)境、測(cè)試環(huán)境、預(yù)發(fā)布環(huán)境、正式環(huán)境， 那么如何去部署你的項(xiàng)目將會(huì)是一件很頭大的事情?！?/p>

????????市面上已經(jīng)有很多成熟的自動(dòng)化構(gòu)建部署方案，區(qū)別就是設(shè)置門(mén)檻和便捷性問(wèn)題。在這里拋磚引入，介紹一個(gè)即使新手，也能在半天完成的自動(dòng)化方案。

核心

——“使用華為devcloud流水線，搭建一套前端項(xiàng)目自動(dòng)化構(gòu)建部署工具”

配置流程

1、注冊(cè)華為devcloud賬號(hào)

2、登錄后，找到：產(chǎn)品--開(kāi)發(fā)者--流水線(華為提供免費(fèi)使用的基礎(chǔ)版和升級(jí)版(12元))

3、創(chuàng)建管理項(xiàng)目， 這里主要是配置管理你的項(xiàng)目，相當(dāng)于全家桶般項(xiàng)目管理工具

4、點(diǎn)擊項(xiàng)目進(jìn)入項(xiàng)目管理界面

頂部“構(gòu)建&發(fā)布--流水線”

這里就是正式進(jìn)入自動(dòng)化構(gòu)建部署配置

流水線顧名思義就是把多個(gè)相對(duì)獨(dú)立的環(huán)節(jié)組合在一起，然后順序完成，最后交付給我們完整的結(jié)果。

5、點(diǎn)擊右上角“新建流水線”

——輸入自定義名稱和描述

6、點(diǎn)擊“下一步”，選擇項(xiàng)目代碼源

我使用的是碼云：

“新增服務(wù)擴(kuò)展點(diǎn)”：相當(dāng)于創(chuàng)建一個(gè)賬號(hào)，授權(quán)登錄一樣?

accessToken就是碼云里面的私人令牌

選擇擴(kuò)展點(diǎn)后，會(huì)自動(dòng)讀取你倉(cāng)庫(kù)項(xiàng)目，對(duì)應(yīng)你需要的項(xiàng)目和分支即可，

如果需要推送代碼后自動(dòng)觸發(fā)流水線工作，?可以選擇觸發(fā)事件

7、“下一步”——選擇模板：選擇不適用模板，點(diǎn)擊確定就創(chuàng)建好了基于某個(gè)項(xiàng)目某個(gè)分支的流水線

8、流水線已經(jīng)創(chuàng)建好，完成整個(gè)流水線任務(wù)的步驟還需要?jiǎng)?chuàng)建相對(duì)獨(dú)立的構(gòu)建任務(wù)和部署任務(wù)

這里開(kāi)始創(chuàng)建構(gòu)建任務(wù)：點(diǎn)擊“構(gòu)建&發(fā)布”選擇“編譯構(gòu)建”

進(jìn)入構(gòu)建任務(wù)界面

點(diǎn)擊“新建任務(wù)”，進(jìn)入構(gòu)建任務(wù)配置
a.自定義名字

b.默認(rèn)關(guān)聯(lián)已創(chuàng)建好的項(xiàng)目

"下一步"：選擇代碼源

“下一步”：選擇構(gòu)建模板

前端項(xiàng)目主要使用npm或者yarn

但是這里選擇yarn后，node版本最高只支持10+版本，不適用

所以選擇npm，node最高支持12+

點(diǎn)擊確定后,?進(jìn)入配置構(gòu)建步驟:

已經(jīng)幫你寫(xiě)好了構(gòu)建腳本,可以刪除不需要的

其實(shí)這里的代碼只是正常的本地打包步驟，并不能滿足自動(dòng)化部署使用

我們需要在項(xiàng)目中安裝tar包，同時(shí)在項(xiàng)目根目錄下新建tar配置文件

作用是將我們打包好的文件(dist)，將dist文件夾下所有文件壓縮成

xxx.tar.gz包

前端項(xiàng)目tar配置文件:

可以根據(jù)你自己的項(xiàng)目修改

在package.json中增加tar構(gòu)建命令

然后修改npm構(gòu)建命令

構(gòu)建完成后, 我們需要添加一個(gè)步驟，將打包好的文件上傳到發(fā)布庫(kù)

點(diǎn)擊“npm構(gòu)建”下面的“+”，增加步驟

主要配置3個(gè)地方：

構(gòu)建包路徑：就是剛才tar配置文件中， 壓縮包的存放路徑

版本號(hào)：可以在參數(shù)設(shè)置中配置，最終以"${}"方式讀取

包名:?可以在參數(shù)設(shè)置分鐘配配置，最終以“${}”方式讀取

配置好后，點(diǎn)擊“新建”，就創(chuàng)建好了一個(gè)構(gòu)建任務(wù)

可以執(zhí)行一次，看看是否正常構(gòu)建

構(gòu)架成功后， 會(huì)在發(fā)布倉(cāng)生成我們打包好的文件：

這里的路徑就是剛才配置的：包名/版本號(hào)/壓縮包名

構(gòu)建任務(wù)完成, 就離成功不遠(yuǎn)了

9、新建“部署任務(wù)”：

就是將我們打包好的文件上傳到我們服務(wù)器

“新建任務(wù)”：

a自定義名稱 b默認(rèn)關(guān)聯(lián)項(xiàng)目 c自定義描述

"下一步": 選擇空包模板即可

"下一步"：進(jìn)入部署配置頁(yè)面

a.?添加"選擇部署來(lái)源":?就是我們要上傳的項(xiàng)目包

這里的主機(jī)組：就是一個(gè)建一個(gè)能登陸服務(wù)器的賬號(hào)，并且有權(quán)限操作

如果版本號(hào)是動(dòng)態(tài)改變的，可以在“參數(shù)設(shè)置”中配置，同樣以“${}”讀取

軟件包路徑，可以在發(fā)布倉(cāng)中看到

b. 添加“執(zhí)行shell命令”：就是把項(xiàng)目包上傳到服務(wù)器后，要執(zhí)行什么操作。

這里的命令作用就是：

進(jìn)入服務(wù)器項(xiàng)目目錄--刪除項(xiàng)目文件--解壓項(xiàng)目包--刪除項(xiàng)目包

shell命令：

cd?/home/web?——服務(wù)器執(zhí)行進(jìn)入指定文件目錄

rm -rf?likeabc?——?jiǎng)h除之前項(xiàng)目文件夾

tar xvf likeanc-test.tar.gz ——解壓項(xiàng)目包，具體使用zxvf還是xvf，需要根據(jù)你的服務(wù)器配置決定，一個(gè)不能用，就換另一個(gè)。

rm -rf?likeabc-test.tar.gz?——?jiǎng)h除壓縮包

“保存執(zhí)行”,驗(yàn)證是否成功

10、我們已經(jīng)建立好了構(gòu)建任務(wù)和部署任務(wù)，并獨(dú)立運(yùn)行成功，現(xiàn)在可以將這些任務(wù)合并到流水線上，完成我們最終需要的一鍵自動(dòng)化構(gòu)建和部署

a.?在流水線上添加一個(gè)構(gòu)建任務(wù)

b.?點(diǎn)擊發(fā)布倉(cāng)庫(kù)右邊的“+”，新增一個(gè)部署流程

c. 最后就形成了一個(gè)完整的流水線

至此，我們就已經(jīng)建好了一個(gè)完整的可運(yùn)行的一鍵自動(dòng)化構(gòu)建部署前端項(xiàng)目的工具了。

整體難點(diǎn)：

?構(gòu)建任務(wù)配置中的npm配置和項(xiàng)目文件使用tar壓縮的配置。

上傳到發(fā)布庫(kù)的包路徑設(shè)置，構(gòu)建失敗主要問(wèn)題就是出在這里，一定要確保包路徑跟你tar壓縮包存放路徑一致。

部署中的執(zhí)行shell命令， 很多人不會(huì)寫(xiě)，畢竟我們不是后臺(tái)開(kāi)發(fā)或者運(yùn)維，能對(duì)服務(wù)器命令得心應(yīng)手。

按以上步驟配置， 細(xì)心點(diǎn)，你也能配置出屬于你的自動(dòng)化工具

我是mofle，我在微信公眾號(hào)：無(wú)JS不前端

等你

總結(jié)

以上是生活随笔為你收集整理的前端能读取压缩包内容吗?_解决前端多环境部署的痛点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。