当前位置:网站首页>大廠是如何用DevCloud流水線實現自動化部署Web應用的?

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

2020-12-06 17:41:46 itread01

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 [[email protected] 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個步驟:

  1. 建立DevCloud專案
  2. 建立流水線
  3. 建立構建任務
  4. 建立部署任務

3.1 建立DevCloud專案

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

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

  1. 點選右上角的建立專案
  2. 選擇看板專案
  3. 輸入專案名稱
  4. 確定

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

3.2 建立流水線

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

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

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

選擇程式碼源

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

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

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

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

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

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

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

3.3 建立構建任務

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

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

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

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

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

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

3.3.2 建立一個構建任務

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

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

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步即可:

  1. 新增一個新的階段
  2. 在該階段中新增一個部署型別的任務
  3. 建立一個部署任務(關鍵)
  4. 在步驟2中選擇步驟3中建立的部署任務

建立一個部署任務

和建立構建任務類似:

  1. 輸入部署任務名稱
  2. 選擇空白模板,直接建立
  3. 新增選擇部署來源和執行shell命令這兩個構建步驟(關鍵)
  4. 配置部署引數

選擇部署來源

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

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

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

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

  1. 填寫主機組名稱
  2. 新增主機(之前申請的ECS彈性雲主機)

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

  1. 主機名
  2. 主機IP地址
  3. 使用者名稱(root)
  4. 密碼
  5. 埠號(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件你可能需要“反悔”的事》

&n

版权声明
本文为[itread01]所创,转载请带上原文链接,感谢
https://www.itread01.com/content/1607243523.html