大廠是如何自動化部署Web應用的？

DevUI是一支兼具設計視角和工程視角的團隊，服務於華爲雲 DevCloud平臺和華爲內部數箇中後臺系統，服務於設計師和前端工程師。

官方網站： devui.design

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

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

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

前言

本文以DevUI組件庫網站爲例，介紹如何自動化部署一個前端應用。

本文能夠認爲是《手把手教你搭建本身的Angular組件庫》的續集。

1 搭建服務器環境

本機開發完代碼，並push到遠程代碼倉庫，還須要部署到服務器上，用戶才能訪問到。

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

1.1 安裝Nginx

Web應用一般都會使用Nginx做爲反向代理。

爲了讓用戶能夠訪問咱們的應用，須要在服務器安裝Nginx應用。

咱們使用源碼編譯方式安裝最新版本的Nginx，主要分紅如下步驟：

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

1.1.1 下載Nginx源碼

先在Nginx官網下載頁找到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源碼的根目錄，而後執行configure配置腳本，這裏只配置了nginx的安裝目錄。

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

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

[root@ecs-kagol nginx-1.18.0]# ./configure --prefix=/usr/local/nginx
checking for OS
 + Linux 3.10.0-862.14.1.5.h428.eulerosv2r7.x86_64 x86_64
checking 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 found
checking for PCRE library in /usr/include/pcre/ ... not found
checking for PCRE library in /usr/pkg/ ... not found
checking 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_module
option, or install the PCRE library into the system, or build the PCRE library
statically from the source with nginx by using --with-pcre=<path> option.

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

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

安裝完依賴庫以後再次執行configure腳本，Nginx配置成功，配置結果以下：

...
checking for getaddrinfo() ... found
checking for PCRE library ... found
checking for PCRE JIT support ... found
checking for zlib library ... found
creating objs/Makefile

Configuration 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"

咱們注意到執行完configure配置腳本以後，生成了一個Makefile文件，該文件就是用來編譯Nginx源碼的。

1.1.4 編譯

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

make

1.1.5 安裝

編譯完以後就是安裝了，這一步纔會真正在/usr/local/nginx目錄下生成相應的文件。

make install

安裝完以後，在/usr/local/nginx目錄下已經生成了運行Nginx應用須要的全部文件。

1.1.6 運行啓動Nginx

執行nginx目錄下的sbin/nginx就能夠直接啓動Nginx啦。

/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壓縮包：

tar czvf devui.tar.gz ./dist

2.2 解壓部署

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

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包的命令便可：

...

npm install # 安裝依賴庫

npm run build # 普通的NG CLI生產包構建命令

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目錄則建立一個空的
  }

  tar.c({ gzip: true }, ['dist']) // 將dist目錄下的文件所有打包
  .pipe(fs.createWriteStream('./result/devui.tar.gz')); // 將生成的tar包（devui.tar.gz）放到result目錄下
});

上傳軟件包到發佈庫

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

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

./result/devui.tar.gz

發佈版本號和包名不要寫死，從部署參數裏拿，格式以下：

${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便可：

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

配置部署參數

這裏的部署參數和構建參數的配置方式是同樣的，再也不贅述。

3.5 定時任務

搭建完流水線，咱們能夠配置一個定時任務，天天或每週自動用制定分支跑流水線，徹底不用人工干預。
爲了保障版本質量，咱們也能夠在配置灰度部署策略，添加撥測任務，保障每一次部署現網都不出問題。
限於篇幅就不一一介紹了，感興趣的小夥伴能夠關注DevCloud官網，裏面詳細地介紹了從需求規劃到研發、測試、運維整套DevOps流程的玩法。

4 小結

本文詳細地介紹如何將一個網站的Github倉庫源碼自動化部署到服務器。
先介紹申請服務器和搭建服務器環境，重點介紹在Linux服務器搭建Nginx服務的步驟；
而後簡單介紹了手動部署流程；
最後詳細介紹瞭如何利用DevCloud流水線工具，實現自動化部署。

加入咱們

咱們是DevUI團隊，歡迎來這裏和咱們一塊兒打造優雅高效的人機設計/研發體系。招聘郵箱：muyang2@huawei.com。

文/DevUI Kagol

往期文章推薦

《如今開始爲你的Angular應用編寫測試 》

《Web界面深色模式和主題化開發》

《手把手教你搭建一個灰度發佈環境》