大廠是如何用DevCloud流水線實現自動化部署Web應用的？

阿新 • • 發佈：2020-12-06

DevUI是一支兼具設計視角和工程視角的團隊，服務於華為雲DevCloud平臺和華為內部數箇中後臺系統，服務於設計師和前端工程師。
官方網站：devui.design
Ng元件庫：ng-devui（歡迎Star）
官方交流：新增DevUI小助手（devui-official）
DevUIHelper外掛：DevUIHelper-LSP（歡迎Star）

前言

本文以DevUI元件庫網站為例，介紹如何用DevCloud流水線自動化部署一個前端應用。

本文可以認為是《手把手教你搭建自己的Angular元件庫》的續集，當我們搭建好元件庫之後，如何將其網站部署到伺服器。

1 搭建伺服器環境

本機開發完程式碼，並push到遠端程式碼倉庫，還需要部署到伺服器上，使用者才能訪問到。

因此為了部署你的應用，第一步需要購買一臺伺服器，為了節省成本，一般都會購買按需使用的雲伺服器，如何申請雲伺服器就不介紹了，下面介紹如何在Linux伺服器搭建Nginx服務。

1.1 安裝Nginx

Web應用通常都會使用Nginx作為反向代理。

為了讓使用者可以訪問我們的應用，需要在伺服器安裝Nginx應用。

我們使用原始碼編譯方式安裝最新版本的Nginx，主要分成以下步驟：

下載
解壓
配置
編譯
安裝

1.1.1 下載Nginx原始碼

先在Nginx官網下載頁找到Linux版本的Nginx原始碼包地址，然後使用wget命令下載Nginx原始碼安裝包。

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

1.1.2 解壓

使用tar命令進行解壓。

1 tar -zxvf nginx-1.18.0.tar.gz

1.1.3 配置

先進入nginx原始碼的根目錄，然後執行configure配置指令碼，這裡只配置了nginx的安裝目錄。

1 cd nginx-1.18.0
2 ./configure --prefix=/usr/local/nginx

執行完發現報錯了，原來是缺少依賴庫。

 1 [root@ecs-kagol nginx-1.18.0]# ./configure --prefix=/usr/local/nginx
 2 checking for OS
 3  + Linux 3.10.0-862.14.1.5.h428.eulerosv2r7.x86_64 x86_64
 4 checking for C compiler ... found
 5  + using GNU C compiler
 6  + gcc version: 4.8.5 20150623 (EulerOS 4.8.5-28) (GCC)
 7 checking for gcc -pipe switch ... found
 8 ...
 9 checking for PCRE library in /usr/local/ ... not found
10 checking for PCRE library in /usr/include/pcre/ ... not found
11 checking for PCRE library in /usr/pkg/ ... not found
12 checking for PCRE library in /opt/local/ ... not found
13 
14 ./configure: error: the HTTP rewrite module requires the PCRE library.
15 You can either disable the module by using --without-http_rewrite_module
16 option, or install the PCRE library into the system, or build the PCRE library
17 statically from the source with nginx by using --with-pcre=<path> option.

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

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

安裝完依賴庫之後再次執行configure指令碼，Nginx配置成功，配置結果如下：

 1 ...
 2 checking for getaddrinfo() ... found
 3 checking for PCRE library ... found
 4 checking for PCRE JIT support ... found
 5 checking for zlib library ... found
 6 creating objs/Makefile
 7 
 8 Configuration summary
 9   + using system PCRE library
10   + OpenSSL library is not used
11   + using system zlib library
12 
13   nginx path prefix: "/usr/local/nginx"
14   nginx binary file: "/usr/local/nginx/sbin/nginx"
15   nginx modules path: "/usr/local/nginx/modules"
16   nginx configuration prefix: "/usr/local/nginx/conf"
17   nginx configuration file: "/usr/local/nginx/conf/nginx.conf"
18   nginx pid file: "/usr/local/nginx/logs/nginx.pid"
19   nginx error log file: "/usr/local/nginx/logs/error.log"
20   nginx http access log file: "/usr/local/nginx/logs/access.log"
21   nginx http client request body temporary files: "client_body_temp"
22   nginx http proxy temporary files: "proxy_temp"
23   nginx http fastcgi temporary files: "fastcgi_temp"
24   nginx http uwsgi temporary files: "uwsgi_temp"
25   nginx http scgi temporary files: "scgi_temp"

我們注意到執行完configure配置指令碼之後，生成了一個Makefile檔案，該檔案就是用來編譯Nginx原始碼的。

1.1.4 編譯

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

1 make

1.1.5 安裝

編譯完之後就是安裝了，這一步才會真正在/usr/local/nginx目錄下生成相應的檔案。

1 make install

安裝完之後，在/usr/local/nginx目錄下已經生成了執行Nginx應用需要的所有檔案。

1.1.6 執行啟動Nginx

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

1 /usr/local/nginx/sbin/nginx

1.1.7 驗證是否啟動成功

在本機瀏覽器中輸入伺服器的公網IP地址，即可訪問Nginx應用。

這裡顯示了Nginx的歡迎頁面，等我們部署好自己的Web應用之後，這個網頁將顯示我們自己的網站首頁。

2 手工部署流程

我們在本機開發完DevUI網站的程式碼之後，執行npn run build，這時將在dist目錄得到DevUI網站的所有靜態資原始檔，可以先在本地用anywhere看下效果。

為了將其部署到伺服器，並通過Nginx伺服器訪問，我們需要將這些檔案上傳到伺服器的nginx目錄，一個一個檔案傳肯定不現實，需要將其壓縮打包，然後上傳到伺服器，最後解壓到nginx的html目錄就算部署完成。

Step 1: 壓縮打包 tar

Step 2: 解壓部署 deploy

2.1 壓縮打包

npm run build構建出來的靜態資源都存放在dist目錄下，只需要執行以下命令即可生成tar壓縮包：

1 tar czvf devui.tar.gz ./dist

2.2 解壓部署

登入伺服器，使用rz命令將上一步生成的tar包上傳到Linux伺服器，然後使用tar命令解壓到nginx的html目錄即可完成部署。

1 tar zxvf devui.tar.gz

如果每次開發完都需要手動執行以上步驟，將會非常麻煩，並且很容易出錯。

為什麼不將其自動化呢？

3 使用DevCloud流水線實現自動部署

DevCloud是集華為研發實踐、前沿研發理念、先進研發工具為一體的軟體開發平臺，為了實現Web應用的自動化部署，我們主要需要使用DevCloud的流水線/編譯構建/釋出/部署4個服務。

主要分成以下4個步驟：

建立DevCloud專案
建立流水線
建立構建任務
建立部署任務

3.1 建立DevCloud專案

由於DevCloud所有服務都是通過專案承載的，因此需要先建立下專案，這裡建立一個看板專案。

先進入DevCloud首頁，按以下步驟即可建立一個看板專案：

點選右上角的建立專案
選擇看板專案
輸入專案名稱
確定

專案建立成功之後直接進入該專案首頁，點選頭部選單構建&釋出下的流水線按鈕即可進行流水線首頁。

3.2 建立流水線

在流水線首頁的右上角有一個建立流水線的按鈕，點選即可進入流水線的建立流程。

建立一條流水線主要分成以下步驟：

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

選擇程式碼源

為了選擇Github程式碼倉庫的源，我們需要新增一個服務擴充套件點，獲得Github的授權，這樣DevCloud流水線這邊才可以拉取Github的程式碼，進行構建、部署等步驟。

新增擴充套件點的步驟也很簡單：

輸入擴充套件點名稱
進行OAuth授權

有了擴充套件點，就可以選擇你的Github倉庫作為程式碼源啦。

選完程式碼源就可以建立你的流水線啦。

可以新建立的流水線包含3個階段，第一個階段關聯了一個Github的程式碼倉，第二個階段是一個空的構建階段，裡面什麼任務也沒有，第三個階段是一個不可編輯的釋出倉庫階段。

這個流水線目前什麼都做不了，我們需要往裡面新增任務才能完成網站的自動化部署。

3.3 建立構建任務

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

構建原始碼
壓縮原始碼
上傳軟體包到伺服器
解壓軟體包到Nginx目錄

因此我們首先需要在流水線中新增一個構建任務：

在構建階段新增一個構建型別的任務
建立一個構建任務
在流水線選擇上一步建立好的流水線

3.3.1 在構建階段新增一個構建型別的任務

在構建階段新增一個任務，然後在側滑中選擇構建型別，這時該型別下是沒有構建任務的，因此沒法選擇，需要先建立構建任務。

3.3.2 建立一個構建任務

在選擇需要排程的任務中點選建立按鈕，進入新建構建任務的頁面，按照指引建立一個構建任務：

輸入構建任務名稱
選擇我們之前建立的Entpoint例項，以及該示例下的Github倉庫
不使用模板，直接建立
新增Npm構建和上傳軟體包道釋出庫這兩個構建步驟（關鍵）
配置構建引數

Npm構建

該步驟直接使用預設的構建指令碼命令，只需要增加打tar包的命令即可：

1 ...
2 
3 npm install # 安裝依賴庫
4 
5 npm run build # 普通的NG CLI生產包構建命令
6 
7 npm run tar # 新增

tar命令：

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

tar.js

 1 const fs = require('fs');
 2 const tar = require('tar');
 3 
 4 fs.stat('./result', (error, stats) => {
 5   if (error) {
 6     fs.mkdirSync('./result'); // 不存在result目錄則建立一個空的
 7   }
 8 
 9   tar.c({ gzip: true }, ['dist']) // 將dist目錄下的檔案全部打包
10   .pipe(fs.createWriteStream('./result/devui.tar.gz')); // 將生成的tar包（devui.tar.gz）放到result目錄下
11 });

上傳軟體包到釋出庫

上一個Npm構建步驟已經將壓縮包建立好了，這個任務的目的是將這個tar包上傳到釋出庫，也就是之前流水線中的第3個階段，方便部署時下載tar包到目標伺服器。

該步驟主要需要填寫構建包路徑：

1 ./result/devui.tar.gz

釋出版本號和包名不要寫死，從部署引數裡拿，格式如下：

1 ${releaseVersion}

其中releaseVersion就是下一步需要配置的構建引數。

配置構建引數

codeBranch是預設的引數，我們需要增加releaseVersion和serviceName兩個構建引數，一個用於每次構建時的版本號，另一個就是服務名。

3.3.3 在流水線選擇上一步建立好的流水線

回到流水線，就可以選擇上一步建立好的流水線，儲存即可。

至此構建的步驟已經搞定了，我們可以跑一下試試。

跑完流水線我們就能在釋出倉庫看到我們的tar構建包：

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

3.4 建立部署任務

在流水線中新增部署任務和新增構建任務差不多，只需要以下3步即可：

新增一個新的階段
在該階段中新增一個部署型別的任務
建立一個部署任務（關鍵）
在步驟2中選擇步驟3中建立的部署任務

建立一個部署任務

和建立構建任務類似：

輸入部署任務名稱
選擇空白模板，直接建立
新增選擇部署來源和執行shell命令這兩個構建步驟（關鍵）
配置部署引數

選擇部署來源

關鍵是需要選擇主機組，填寫軟體包和部署目錄。

軟體包就是之前釋出倉庫的軟體包，直接從/devui/${releaseVersion}取即可，其中${releaseVersion}是部署引數，和之前的構建引數類似。

部署目錄是要將tar壓縮包上傳到目標機器中的目錄，我們傳到/devui目錄中。

主機組需要新建，選擇主機組旁邊的新建按鈕，進入建立主機組頁面，只需要以下步驟即可建立一個主機組：

填寫主機組名稱
新增主機（之前申請的ECS彈性雲主機）

新增主機需要填寫的資訊：

主機名
主機IP地址
使用者名稱（root）
密碼
埠號（22）

執行shell命令

執行shell命令是當你已經把tar軟體包上傳到目標伺服器之後，希望執行的shell命令，我們當然是希望將tar包解壓出來嘍。

執行以下shell即可：

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

配置部署引數

這裡的部署引數和構建引數的配置方式是一樣的，不再贅述。

新增好部署任務我們就可以跑下流水線，看下效果。

流水線跑完之後，四個階段都會顯示綠色：

部署完之後訪問咱們的主機IP地址即可看到網站效果，和DevUI官網是一樣的。

3.5 定時任務

搭建完流水線，我們可以配置一個定時任務，每天或每週自動用指定分支跑流水線，完全不用人工干預。

為了保障版本質量，我們也可以在配置灰度部署策略，新增撥測任務，保障每一次部署現網都不出問題。

限於篇幅就不一一介紹了，感興趣的小夥伴可以關注DevCloud官網，裡面詳細地介紹了從需求規劃到研發、測試、運維整套DevOps流程的玩法。

4 小結

本文詳細地介紹如何將一個網站的Github倉庫原始碼自動化部署到伺服器。

先介紹申請伺服器和搭建伺服器環境，重點介紹在Linux伺服器搭建Nginx服務的步驟；

然後簡單介紹了手動部署流程；

最後詳細介紹瞭如何利用DevCloud流水線工具，實現自動化部署。

加入我們

我們是DevUI團隊，歡迎來這裡和我們一起打造優雅高效的人機設計/研發體系。招聘郵箱：[email protected]。

文/DevUI Kagol

往期文章推薦

《手把手教你使用Rollup打包併發布自己的工具庫》

《前端有了這兩樣神器，再也不用追著後臺要介面啦》

《使用Git，10件你可能需要“反悔”的事》