前言

????????“如果你有開發環境、測試環境、預發布環境、正式環境， 那么如何去部署你的項目將會是一件很頭大的事情。”

????????市面上已經有很多成熟的自動化構建部署方案，區別就是設置門檻和便捷性問題。在這里拋磚引入，介紹一個即使新手，也能在半天完成的自動化方案。

核心

——“使用華為devcloud流水線，搭建一套前端項目自動化構建部署工具”

配置流程

1、注冊華為devcloud賬號

2、登錄后，找到：產品--開發者--流水線(華為提供免費使用的基礎版和升級版(12元))

3、創建管理項目， 這里主要是配置管理你的項目，相當于全家桶般項目管理工具

4、點擊項目進入項目管理界面

頂部“構建&發布--流水線”

這里就是正式進入自動化構建部署配置

流水線顧名思義就是把多個相對獨立的環節組合在一起，然后順序完成，最后交付給我們完整的結果。

5、點擊右上角“新建流水線”

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

6、點擊“下一步”，選擇項目代碼源

我使用的是碼云：

“新增服務擴展點”：相當于創建一個賬號，授權登錄一樣?

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

選擇擴展點后，會自動讀取你倉庫項目，對應你需要的項目和分支即可，

如果需要推送代碼后自動觸發流水線工作，?可以選擇觸發事件

7、“下一步”——選擇模板：選擇不適用模板，點擊確定就創建好了基于某個項目某個分支的流水線

8、流水線已經創建好，完成整個流水線任務的步驟還需要創建相對獨立的構建任務和部署任務

這里開始創建構建任務：點擊“構建&發布”選擇“編譯構建”

進入構建任務界面

點擊“新建任務”，進入構建任務配置
a.自定義名字

b.默認關聯已創建好的項目

"下一步"：選擇代碼源

“下一步”：選擇構建模板

前端項目主要使用npm或者yarn

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

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

點擊確定后,?進入配置構建步驟:

已經幫你寫好了構建腳本,可以刪除不需要的

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

我們需要在項目中安裝tar包，同時在項目根目錄下新建tar配置文件

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

xxx.tar.gz包

前端項目tar配置文件:

可以根據你自己的項目修改

在package.json中增加tar構建命令

然后修改npm構建命令

構建完成后, 我們需要添加一個步驟，將打包好的文件上傳到發布庫

點擊“npm構建”下面的“+”，增加步驟

主要配置3個地方：

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

版本號：可以在參數設置中配置，最終以"${}"方式讀取

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

配置好后，點擊“新建”，就創建好了一個構建任務

可以執行一次，看看是否正常構建

構架成功后， 會在發布倉生成我們打包好的文件：

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

構建任務完成, 就離成功不遠了

9、新建“部署任務”：

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

“新建任務”：

a自定義名稱 b默認關聯項目 c自定義描述

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

"下一步"：進入部署配置頁面

a.?添加"選擇部署來源":?就是我們要上傳的項目包

這里的主機組：就是一個建一個能登陸服務器的賬號，并且有權限操作

如果版本號是動態改變的，可以在“參數設置”中配置，同樣以“${}”讀取

軟件包路徑，可以在發布倉中看到

b. 添加“執行shell命令”：就是把項目包上傳到服務器后，要執行什么操作。

這里的命令作用就是：

進入服務器項目目錄--刪除項目文件--解壓項目包--刪除項目包

shell命令：

cd?/home/web?——服務器執行進入指定文件目錄

rm -rf?likeabc?——刪除之前項目文件夾

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

rm -rf?likeabc-test.tar.gz?——刪除壓縮包

“保存執行”,驗證是否成功

10、我們已經建立好了構建任務和部署任務，并獨立運行成功，現在可以將這些任務合并到流水線上，完成我們最終需要的一鍵自動化構建和部署

a.?在流水線上添加一個構建任務

b.?點擊發布倉庫右邊的“+”，新增一個部署流程

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

至此，我們就已經建好了一個完整的可運行的一鍵自動化構建部署前端項目的工具了。

整體難點：

?構建任務配置中的npm配置和項目文件使用tar壓縮的配置。

上傳到發布庫的包路徑設置，構建失敗主要問題就是出在這里，一定要確保包路徑跟你tar壓縮包存放路徑一致。

部署中的執行shell命令， 很多人不會寫，畢竟我們不是后臺開發或者運維，能對服務器命令得心應手。

按以上步驟配置， 細心點，你也能配置出屬于你的自動化工具

我是mofle，我在微信公眾號：無JS不前端

等你

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。