華為是如何自動化部署Web應(yīng)用的？

DevUI是一支兼具設(shè)計視角和工程視角的團隊，服務(wù)于華為云DevCloud平臺和華為內(nèi)部數(shù)個中后臺系統(tǒng)，服務(wù)于設(shè)計師和前端工程師。

官方網(wǎng)站：devui.design

Ng組件庫：ng-devui（歡迎Star）

官方交流：添加DevUI小助手（devui-official）

DevUIHelper插件：DevUIHelper-LSP（歡迎Star）

原文：https://segmentfault.com/a/1190000037612735

前言

本文以DevUI組件庫網(wǎng)站為例，介紹如何自動化部署一個前端應(yīng)用。本文可以認為是《手把手教你搭建自己的Angular組件庫》的續(xù)集。

1 搭建服務(wù)器環(huán)境

本機開發(fā)完代碼，并push到遠程代碼倉庫，還需要部署到服務(wù)器上，用戶才能訪問到。因此為了部署你的應(yīng)用，第一步你需要購買一臺服務(wù)器，為了節(jié)省成本，一般都會購買按需使用的云服務(wù)器，如何申請云服務(wù)器就不介紹了，下面介紹如何在Linux服務(wù)器搭建Nginx服務(wù)。

1.1 安裝Nginx

Web應(yīng)用通常都會使用Nginx作為反向代理。為了讓用戶可以訪問我們的應(yīng)用，需要在服務(wù)器安裝Nginx應(yīng)用。我們使用源碼編譯方式安裝最新版本的Nginx，主要分成以下步驟：

• 下載
• 解壓
• 配置
• 編譯
• 安裝

1.1.1 下載Nginx源碼

先在Nginx官網(wǎng)下載頁找到Linux版本的Nginx源碼包地址，然后使用wget命令下載Nginx源碼安裝包。

wget?http://nginx.org/download/nginx-1.18.0.tar.gz

1.1.2 解壓

使用tar命令進行解壓。

tar?-zxvf?nginx-1.18.0.tar.gz

1.1.3 配置

先進入nginx源碼的根目錄，然后執(zhí)行configure配置腳本，這里只配置了nginx的安裝目錄。

cd?nginx-1.18.0./configure?--prefix=/usr/local/nginx

執(zhí)行完發(fā)現(xiàn)報錯了，原來是缺少依賴庫。

[root@ecs-kagol?nginx-1.18.0]#?./configure?--prefix=/usr/local/nginxchecking?for?OS?+?Linux?3.10.0-862.14.1.5.h428.eulerosv2r7.x86_64?x86_64checking?for?C?compiler?...?found?+?using?GNU?C?compiler?+?gcc?version:?4.8.5?20150623?(EulerOS?4.8.5-28)?(GCC)checking?for?gcc?-pipe?switch?...?found...checking?for?PCRE?library?in?/usr/local/?...?not?foundchecking?for?PCRE?library?in?/usr/include/pcre/?...?not?foundchecking?for?PCRE?library?in?/usr/pkg/?...?not?foundchecking?for?PCRE?library?in?/opt/local/?...?not?found./configure:?error:?the?HTTP?rewrite?module?requires?the?PCRE?library.You?can?either?disable?the?module?by?using?--without-http_rewrite_moduleoption,?or?install?the?PCRE?library?into?the?system,?or?build?the?PCRE?librarystatically?from?the?source?with?nginx?by?using?--with-pcre=?option.

主要需要安裝pcre/zlib/openssl三個依賴庫，我們使用yum包管理工具（類似Node的npm包管理工具）來安裝。

yum?-y?install?pcre-devel?zlib-devel?openssl-devel

安裝完依賴庫之后再次執(zhí)行configure腳本，Nginx配置成功，配置結(jié)果如下：

...checking?for?getaddrinfo()?...?foundchecking?for?PCRE?library?...?foundchecking?for?PCRE?JIT?support?...?foundchecking?for?zlib?library?...?foundcreating?objs/MakefileConfiguration?summary??+?using?system?PCRE?library??+?OpenSSL?library?is?not?used??+?using?system?zlib?library??nginx?path?prefix:?"/usr/local/nginx"??nginx?binary?file:?"/usr/local/nginx/sbin/nginx"??nginx?modules?path:?"/usr/local/nginx/modules"??nginx?configuration?prefix:?"/usr/local/nginx/conf"??nginx?configuration?file:?"/usr/local/nginx/conf/nginx.conf"??nginx?pid?file:?"/usr/local/nginx/logs/nginx.pid"??nginx?error?log?file:?"/usr/local/nginx/logs/error.log"??nginx?http?access?log?file:?"/usr/local/nginx/logs/access.log"??nginx?http?client?request?body?temporary?files:?"client_body_temp"??nginx?http?proxy?temporary?files:?"proxy_temp"??nginx?http?fastcgi?temporary?files:?"fastcgi_temp"??nginx?http?uwsgi?temporary?files:?"uwsgi_temp"??nginx?http?scgi?temporary?files:?"scgi_temp"

我們注意到執(zhí)行完configure配置腳本之后，生成了一個Makefile文件，該文件就是用來編譯Nginx源碼的。

1.1.4 編譯

相比配置，編譯的步驟就簡單多了，只需要執(zhí)行make命令即可。

make

1.1.5 安裝

編譯完之后就是安裝了，這一步才會真正在/usr/local/nginx目錄下生成相應(yīng)的文件。

make?install

安裝完之后，在/usr/local/nginx目錄下已經(jīng)生成了運行Nginx應(yīng)用需要的所有文件。

1.1.6 運行啟動Nginx

執(zhí)行nginx目錄下的sbin/nginx就可以直接啟動Nginx啦。

/usr/local/nginx/sbin/nginx

1.1.7 驗證是否啟動成功

在本機瀏覽器中輸入服務(wù)器的公網(wǎng)IP地址，即可訪問Nginx應(yīng)用。

這里顯示了Nginx的歡迎頁面，等我們部署好自己的Web應(yīng)用之后，這個網(wǎng)頁將顯示我們自己的網(wǎng)站首頁。

2 手工部署流程

我們在本機開發(fā)完DevUI網(wǎng)站的代碼之后，執(zhí)行npn run build，這時將在dist目錄得到DevUI網(wǎng)站的所有靜態(tài)資源文件，可以先在本地用anywhere看下效果。為了將其部署到服務(wù)器，并通過Nginx服務(wù)器訪問，我們需要將這些文件上傳到服務(wù)器的nginx目錄，一個一個文件傳肯定不現(xiàn)實，需要將其壓縮打包，然后上傳到服務(wù)器，最后解壓到nginx的html目錄就算部署完成。Step 1: 壓縮打包 tarStep 2: 解壓部署 deploy

2.1 壓縮打包

npm run build構(gòu)建出來的靜態(tài)資源都存放在dist目錄下，只需要執(zhí)行以下命令即可生成tar壓縮包：

tar?czvf?devui.tar.gz?./dist

2.2 解壓部署

登錄服務(wù)器，使用rz命令將上一步生成的tar包上傳到Linux服務(wù)器，然后使用tar命令解壓到nginx的html目錄即可完成部署。

tar?zxvf?devui.tar.gz

如果每次開發(fā)完都需要手動執(zhí)行以上步驟，將會非常麻煩，并且很容易出錯。為什么不將其自動化呢？

3 使用DevCloud流水線實現(xiàn)自動部署

DevCloud是集華為研發(fā)實踐、前沿研發(fā)理念、先進研發(fā)工具為一體的軟件開發(fā)平臺，為了實現(xiàn)Web應(yīng)用的自動化部署，我們主要需要使用DevCloud的流水線/編譯構(gòu)建/發(fā)布/部署4個服務(wù)。

主要分成以下4個步驟：

1. 創(chuàng)建DevCloud項目
2. 創(chuàng)建流水線
3. 創(chuàng)建構(gòu)建任務(wù)
4. 創(chuàng)建部署任務(wù)

3.1 創(chuàng)建DevCloud項目

由于DevCloud所有服務(wù)都是通過項目承載的，因此需要先創(chuàng)建下項目，這里創(chuàng)建一個看板項目。先進入DevCloud首頁，按以下步驟即可創(chuàng)建一個看板項目：

1. 點擊右上角的創(chuàng)建項目
2. 選擇看板項目
3. 輸入項目名稱
4. 確定

項目創(chuàng)建成功之后直接進入該項目首頁，點擊頭部菜單構(gòu)建&發(fā)布下的流水線按鈕即可進行流水線首頁。

3.2 創(chuàng)建流水線

在流水線首頁的右上角有一個創(chuàng)建流水線的按鈕，點擊即可進入流水線的創(chuàng)建流程。

創(chuàng)建一條流水線主要分成以下步驟：

• 輸入流水線名稱
• 選擇模板，這里我們選擇空模板
• 選擇代碼源，直接只用Github代碼倉庫即可
• 自定義工作流

選擇代碼源

為了選擇Github代碼倉庫的源，我們需要新增一個服務(wù)擴展點，獲得Github的授權(quán)，這樣DevCloud流水線這邊才可以拉取Github的代碼，進行構(gòu)建、部署等步驟。

新增擴展點的步驟也很簡單：

• 輸入擴展點名稱
• 進行OAuth授權(quán)

有了擴展點，就可以選擇你的Github倉庫作為代碼源啦。

選完代碼源就可以創(chuàng)建你的流水線啦。

可以新創(chuàng)建的流水線包含3個階段，第一個階段關(guān)聯(lián)了一個Github的代碼倉，第二個階段是一個空的構(gòu)建階段，里面什么任務(wù)也沒有，第三個階段是一個不可編輯的發(fā)布倉庫階段。這個流水線目前什么都做不了，我們需要往里面添加任務(wù)才能完成網(wǎng)站的自動化部署。

3.3 創(chuàng)建構(gòu)建任務(wù)

回顧下之前的手工部署步驟：

1. 構(gòu)建源代碼
2. 壓縮源代碼
3. 上傳軟件包到服務(wù)器
4. 解壓軟件包到Nginx目錄

因此我們首先需要在流水線中添加一個構(gòu)建任務(wù)：

1. 在構(gòu)建階段添加一個構(gòu)建類型的任務(wù)
2. 創(chuàng)建一個構(gòu)建任務(wù)
3. 在流水線選擇上一步創(chuàng)建好的流水線

3.3.1 在構(gòu)建階段添加一個構(gòu)建類型的任務(wù)

在構(gòu)建階段添加一個任務(wù)，然后在側(cè)滑中選擇構(gòu)建類型，這是該類型下是沒有構(gòu)建任務(wù)的，因此沒法選擇，需要先創(chuàng)建構(gòu)建任務(wù)。

3.3.2 創(chuàng)建一個構(gòu)建任務(wù)

在選擇需要調(diào)度的任務(wù)中點擊創(chuàng)建按鈕，進入新建構(gòu)建任務(wù)的頁面，按照指引創(chuàng)建一個構(gòu)建任務(wù)：

1. 輸入構(gòu)建任務(wù)名稱
2. 選擇我們之前創(chuàng)建的Entpoint實例，以及該示例下的Github倉庫
3. 不使用模板，直接創(chuàng)建
4. 添加Npm構(gòu)建和上傳軟件包道發(fā)布庫這兩個構(gòu)建步驟（關(guān)鍵）
5. 配置構(gòu)建參數(shù)

Npm構(gòu)建

該步驟直接使用默認的構(gòu)建腳本命令，只需要增加打tar包的命令即可：

...npm?install?#?安裝依賴庫npm?run?build?#?普通的NG?CLI生產(chǎn)包構(gòu)建命令npm?run?tar?#?新增

tar命令：

"tar":?"node?scripts/tar.js",

tar.js

const?fs?=?require('fs');const?tar?=?require('tar');fs.stat('./result',?(error,?stats)?=>?{??if?(error)?{????fs.mkdirSync('./result');?//?不存在result目錄則創(chuàng)建一個空的??}??tar.c({?gzip:?true?},?['dist'])?//?將dist目錄下的文件全部打包??.pipe(fs.createWriteStream('./result/devui.tar.gz'));?//?將生成的tar包（devui.tar.gz）放到result目錄下});

上傳軟件包到發(fā)布庫

上一個Npm構(gòu)建步驟已經(jīng)將壓縮包創(chuàng)建好了，這個任務(wù)的目的是將這個tar包上傳到發(fā)布庫，也就是之前流水線中的第3個階段，方便部署時下載tar包到目標服務(wù)器。該步驟主要需要填寫構(gòu)建包路徑：

./result/devui.tar.gz

發(fā)布版本號和包名不要寫死，從部署參數(shù)里拿，格式如下：

${releaseVersion}

其中releaseVersion就是下一步需要配置的構(gòu)建參數(shù)。

配置構(gòu)建參數(shù)

codeBranch是默認的參數(shù)，我們需要增加releaseVersion和serviceName兩個構(gòu)建參數(shù)，一個用于每次構(gòu)建時的版本號，另一個就是服務(wù)名。

3.3.3 在流水線選擇上一步創(chuàng)建好的流水線

回到流水線，就可以選擇上一步創(chuàng)建好的流水線，保存即可。

至此構(gòu)建的步驟已經(jīng)搞定了，我們可以跑一下試試。跑完流水線我們就能在發(fā)布倉庫看到我們的tar構(gòu)建包：

有了構(gòu)建包我們就可以拿它去服務(wù)器部署啦，當然我們肯定不會選擇手工的方式部署，而是在流水線中創(chuàng)建一個部署任務(wù)，讓所有過程自動化進行。

3.4 創(chuàng)建部署任務(wù)

在流水線中添加部署任務(wù)和添加構(gòu)建任務(wù)差不多，只需要以下3步即可：

1. 添加一個新的階段
2. 在該階段中添加一個部署類型的任務(wù)
3. 創(chuàng)建一個部署任務(wù)（關(guān)鍵）
4. 在步驟2中選擇步驟3中創(chuàng)建的部署任務(wù)

創(chuàng)建一個部署任務(wù)

和創(chuàng)建構(gòu)建任務(wù)類似：

1. 輸入部署任務(wù)名稱
2. 選擇空白模板，直接創(chuàng)建
3. 添加選擇部署來源和執(zhí)行shell命令這兩個構(gòu)建步驟（關(guān)鍵）
4. 配置部署參數(shù)

選擇部署來源

關(guān)鍵是需要選擇主機組，填寫軟件包和部署目錄。軟件包就是之前發(fā)布倉庫的軟件包，直接從/devui/${releaseVersion}取即可，其中${releaseVersion}是部署參數(shù)，和之前的構(gòu)建參數(shù)類似。部署目錄是要將tar壓縮包上傳到目標機器中的目錄，我們傳到/devui目錄中。主機組需要新建，選擇主機組旁邊的新建按鈕，進入創(chuàng)建主機組頁面，只需要以下步驟即可創(chuàng)建一個主機組：

1. 填寫主機組名稱
2. 添加主機（之前申請的ECS彈性云主機）

添加主機需要填寫的信息：

1. 主機名
2. 主機IP地址
3. 用戶名（root）
4. 密碼
5. 端口號（22）

執(zhí)行shell命令

執(zhí)行shell命令是當你已經(jīng)把tar軟件包上傳到目標服務(wù)器之后，希望執(zhí)行的shell命令，我們當然是希望將tar包解壓出來嘍。執(zhí)行以下shell即可：

rm?-rf?/usr/local/nginx/html/*?#?刪除之前部署過的靜態(tài)資源tar?zxvf?/devui/${serviceName}.tar.gz?-C?/usr/local/nginx/html?#?解壓tar包到nginx的html目錄mv?/usr/local/nginx/html/dist/*?/usr/local/nginx/html/

配置部署參數(shù)

這里的部署參數(shù)和構(gòu)建參數(shù)的配置方式是一樣的，不再贅述。

3.5 定時任務(wù)

搭建完流水線，我們可以配置一個定時任務(wù)，每天或每周自動用制定分支跑流水線，完全不用人工干預(yù)。為了保障版本質(zhì)量，我們也可以在配置灰度部署策略，添加撥測任務(wù)，保障每一次部署現(xiàn)網(wǎng)都不出問題。限于篇幅就不一一介紹了，感興趣的小伙伴可以關(guān)注DevCloud官網(wǎng)，里面詳細地介紹了從需求規(guī)劃到研發(fā)、測試、運維整套DevOps流程的玩法。

4 小結(jié)

本文詳細地介紹如何將一個網(wǎng)站的Github倉庫源碼自動化部署到服務(wù)器。先介紹申請服務(wù)器和搭建服務(wù)器環(huán)境，重點介紹在Linux服務(wù)器搭建Nginx服務(wù)的步驟；然后簡單介紹了手動部署流程；最后詳細介紹了如何利用DevCloud流水線工具，實現(xiàn)自動化部署。

??愛心三連擊
1.看到這里了就點個在看支持下吧，你的「點贊，在看」是我創(chuàng)作的動力。
2.關(guān)注公眾號程序員成長指北，回復(fù)「1」加入Node進階交流群！「在這里有好多 Node 開發(fā)者，會討論 Node 知識，互相學(xué)習」！
3.也可添加微信【ikoala520】，一起成長。

“在看轉(zhuǎn)發(fā)”是最大的支持