大廠是如何自動(dòng)化部署Web應(yīng)用的？（收藏?。?/h1>
DevUI是一支兼具設(shè)計(jì)視角和工程視角的團(tuán)隊(duì)，服務(wù)于華為云DevCloud平臺(tái)和華為內(nèi)部數(shù)個(gè)中后臺(tái)系統(tǒng)，服務(wù)于設(shè)計(jì)師和前端工程師。
官方網(wǎng)站：devui.design
Ng組件庫：ng-devui（歡迎Star）
官方交流：添加DevUI小助手（devui-official）
DevUIHelper插件：DevUIHelper-LSP（歡迎Star）
原文：https://segmentfault.com/a/1190000037612735
前言
本文以DevUI組件庫網(wǎng)站為例，介紹如何自動(dòng)化部署一個(gè)前端應(yīng)用。
本文可以認(rèn)為是《手把手教你搭建自己的Angular組件庫》的續(xù)集。
1 搭建服務(wù)器環(huán)境
本機(jī)開發(fā)完代碼，并push到遠(yuǎn)程代碼倉庫，還需要部署到服務(wù)器上，用戶才能訪問到。
因此為了部署你的應(yīng)用，第一步你需要購買一臺(tái)服務(wù)器，為了節(jié)省成本，一般都會(huì)購買按需使用的云服務(wù)器，如何申請?jiān)品?wù)器就不介紹了，下面介紹如何在Linux服務(wù)器搭建Nginx服務(wù)。
1.1 安裝Nginx
Web應(yīng)用通常都會(huì)使用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命令進(jìn)行解壓。
tar -zxvf nginx-1.18.0.tar.gz
1.1.3 配置
先進(jìn)入nginx源碼的根目錄，然后執(zhí)行configure配置腳本，這里只配置了nginx的安裝目錄。
cd nginx-1.18.0
./configure --prefix=/usr/local/nginx
執(zhí)行完發(fā)現(xiàn)報(bào)錯(cuò)了，原來是缺少依賴庫。
[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= option.
主要需要安裝pcre/zlib/openssl三個(gè)依賴庫，我們使用yum包管理工具（類似Node的npm包管理工具）來安裝。
yum -y install pcre-devel zlib-devel openssl-devel
安裝完依賴庫之后再次執(zhí)行configure腳本，Nginx配置成功，配置結(jié)果如下：
...
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"
我們注意到執(zhí)行完configure配置腳本之后，生成了一個(gè)Makefile文件，該文件就是用來編譯Nginx源碼的。
1.1.4 編譯
相比配置，編譯的步驟就簡單多了，只需要執(zhí)行make命令即可。
make
1.1.5 安裝
編譯完之后就是安裝了，這一步才會(huì)真正在/usr/local/nginx目錄下生成相應(yīng)的文件。
make install
安裝完之后，在/usr/local/nginx目錄下已經(jīng)生成了運(yùn)行Nginx應(yīng)用需要的所有文件。
1.1.6 運(yùn)行啟動(dòng)Nginx
執(zhí)行nginx目錄下的sbin/nginx就可以直接啟動(dòng)Nginx啦。
/usr/local/nginx/sbin/nginx
1.1.7 驗(yàn)證是否啟動(dòng)成功
在本機(jī)瀏覽器中輸入服務(wù)器的公網(wǎng)IP地址，即可訪問Nginx應(yīng)用。
這里顯示了Nginx的歡迎頁面，等我們部署好自己的Web應(yīng)用之后，這個(gè)網(wǎng)頁將顯示我們自己的網(wǎng)站首頁。
2 手工部署流程
我們在本機(jī)開發(fā)完DevUI網(wǎng)站的代碼之后，執(zhí)行npn run build，這時(shí)將在dist目錄得到DevUI網(wǎng)站的所有靜態(tài)資源文件，可以先在本地用anywhere看下效果。
為了將其部署到服務(wù)器，并通過Nginx服務(wù)器訪問，我們需要將這些文件上傳到服務(wù)器的nginx目錄，一個(gè)一個(gè)文件傳肯定不現(xiàn)實(shí)，需要將其壓縮打包，然后上傳到服務(wù)器，最后解壓到nginx的html目錄就算部署完成。
Step 1: 壓縮打包 tar
Step 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ā)完都需要手動(dòng)執(zhí)行以上步驟，將會(huì)非常麻煩，并且很容易出錯(cuò)。
為什么不將其自動(dòng)化呢？
3 使用DevCloud流水線實(shí)現(xiàn)自動(dòng)部署
DevCloud是集華為研發(fā)實(shí)踐、前沿研發(fā)理念、先進(jìn)研發(fā)工具為一體的軟件開發(fā)平臺(tái)，為了實(shí)現(xiàn)Web應(yīng)用的自動(dòng)化部署，我們主要需要使用DevCloud的流水線/編譯構(gòu)建/發(fā)布/部署4個(gè)服務(wù)。
主要分成以下4個(gè)步驟：
創(chuàng)建DevCloud項(xiàng)目 創(chuàng)建流水線 創(chuàng)建構(gòu)建任務(wù) 創(chuàng)建部署任務(wù)
3.1 創(chuàng)建DevCloud項(xiàng)目
由于DevCloud所有服務(wù)都是通過項(xiàng)目承載的，因此需要先創(chuàng)建下項(xiàng)目，這里創(chuàng)建一個(gè)看板項(xiàng)目。
先進(jìn)入DevCloud首頁，按以下步驟即可創(chuàng)建一個(gè)看板項(xiàng)目：
點(diǎn)擊右上角的創(chuàng)建項(xiàng)目 選擇看板項(xiàng)目 輸入項(xiàng)目名稱 確定
項(xiàng)目創(chuàng)建成功之后直接進(jìn)入該項(xiàng)目首頁，點(diǎn)擊頭部菜單構(gòu)建&發(fā)布下的流水線按鈕即可進(jìn)行流水線首頁。
3.2 創(chuàng)建流水線
在流水線首頁的右上角有一個(gè)創(chuàng)建流水線的按鈕，點(diǎn)擊即可進(jìn)入流水線的創(chuàng)建流程。
創(chuàng)建一條流水線主要分成以下步驟：
輸入流水線名稱 選擇模板，這里我們選擇空模板 選擇代碼源，直接只用Github代碼倉庫即可 自定義工作流
選擇代碼源
為了選擇Github代碼倉庫的源，我們需要新增一個(gè)服務(wù)擴(kuò)展點(diǎn)，獲得Github的授權(quán)，這樣DevCloud流水線這邊才可以拉取Github的代碼，進(jìn)行構(gòu)建、部署等步驟。
新增擴(kuò)展點(diǎn)的步驟也很簡單：
輸入擴(kuò)展點(diǎn)名稱 進(jìn)行OAuth授權(quán)
有了擴(kuò)展點(diǎn)，就可以選擇你的Github倉庫作為代碼源啦。
選完代碼源就可以創(chuàng)建你的流水線啦。
可以新創(chuàng)建的流水線包含3個(gè)階段，第一個(gè)階段關(guān)聯(lián)了一個(gè)Github的代碼倉，第二個(gè)階段是一個(gè)空的構(gòu)建階段，里面什么任務(wù)也沒有，第三個(gè)階段是一個(gè)不可編輯的發(fā)布倉庫階段。
這個(gè)流水線目前什么都做不了，我們需要往里面添加任務(wù)才能完成網(wǎng)站的自動(dòng)化部署。
3.3 創(chuàng)建構(gòu)建任務(wù)
回顧下之前的手工部署步驟：
構(gòu)建源代碼 壓縮源代碼 上傳軟件包到服務(wù)器 解壓軟件包到Nginx目錄
因此我們首先需要在流水線中添加一個(gè)構(gòu)建任務(wù)：
在構(gòu)建階段添加一個(gè)構(gòu)建類型的任務(wù) 創(chuàng)建一個(gè)構(gòu)建任務(wù) 在流水線選擇上一步創(chuàng)建好的流水線
3.3.1 在構(gòu)建階段添加一個(gè)構(gòu)建類型的任務(wù)
在構(gòu)建階段添加一個(gè)任務(wù)，然后在側(cè)滑中選擇構(gòu)建類型，這是該類型下是沒有構(gòu)建任務(wù)的，因此沒法選擇，需要先創(chuàng)建構(gòu)建任務(wù)。
3.3.2 創(chuàng)建一個(gè)構(gòu)建任務(wù)
在選擇需要調(diào)度的任務(wù)中點(diǎn)擊創(chuàng)建按鈕，進(jìn)入新建構(gòu)建任務(wù)的頁面，按照指引創(chuàng)建一個(gè)構(gòu)建任務(wù)：
輸入構(gòu)建任務(wù)名稱 選擇我們之前創(chuàng)建的Entpoint實(shí)例，以及該示例下的Github倉庫 不使用模板，直接創(chuàng)建 添加Npm構(gòu)建和上傳軟件包道發(fā)布庫這兩個(gè)構(gòu)建步驟（關(guān)鍵） 配置構(gòu)建參數(shù)
Npm構(gòu)建
該步驟直接使用默認(rèn)的構(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)建一個(gè)空的
}
tar.c({ gzip: true }, ['dist']) // 將dist目錄下的文件全部打包
.pipe(fs.createWriteStream('./result/devui.tar.gz')); // 將生成的tar包（devui.tar.gz）放到result目錄下
});
上傳軟件包到發(fā)布庫
上一個(gè)Npm構(gòu)建步驟已經(jīng)將壓縮包創(chuàng)建好了，這個(gè)任務(wù)的目的是將這個(gè)tar包上傳到發(fā)布庫，也就是之前流水線中的第3個(gè)階段，方便部署時(shí)下載tar包到目標(biāo)服務(wù)器。
該步驟主要需要填寫構(gòu)建包路徑：
./result/devui.tar.gz
發(fā)布版本號(hào)和包名不要寫死，從部署參數(shù)里拿，格式如下：
${releaseVersion}
其中releaseVersion就是下一步需要配置的構(gòu)建參數(shù)。
配置構(gòu)建參數(shù)
codeBranch是默認(rèn)的參數(shù)，我們需要增加releaseVersion和serviceName兩個(gè)構(gòu)建參數(shù)，一個(gè)用于每次構(gòu)建時(shí)的版本號(hào)，另一個(gè)就是服務(wù)名。
3.3.3 在流水線選擇上一步創(chuàng)建好的流水線
回到流水線，就可以選擇上一步創(chuàng)建好的流水線，保存即可。
至此構(gòu)建的步驟已經(jīng)搞定了，我們可以跑一下試試。
跑完流水線我們就能在發(fā)布倉庫看到我們的tar構(gòu)建包：
有了構(gòu)建包我們就可以拿它去服務(wù)器部署啦，當(dāng)然我們肯定不會(huì)選擇手工的方式部署，而是在流水線中創(chuàng)建一個(gè)部署任務(wù)，讓所有過程自動(dòng)化進(jìn)行。
3.4 創(chuàng)建部署任務(wù)
在流水線中添加部署任務(wù)和添加構(gòu)建任務(wù)差不多，只需要以下3步即可：
添加一個(gè)新的階段 在該階段中添加一個(gè)部署類型的任務(wù) 創(chuàng)建一個(gè)部署任務(wù)（關(guān)鍵） 在步驟2中選擇步驟3中創(chuàng)建的部署任務(wù)
創(chuàng)建一個(gè)部署任務(wù)
和創(chuàng)建構(gòu)建任務(wù)類似：
輸入部署任務(wù)名稱 選擇空白模板，直接創(chuàng)建 添加選擇部署來源和執(zhí)行shell命令這兩個(gè)構(gòu)建步驟（關(guān)鍵） 配置部署參數(shù)
選擇部署來源
關(guān)鍵是需要選擇主機(jī)組，填寫軟件包和部署目錄。
軟件包就是之前發(fā)布倉庫的軟件包，直接從/devui/${releaseVersion}取即可，其中${releaseVersion}是部署參數(shù)，和之前的構(gòu)建參數(shù)類似。
部署目錄是要將tar壓縮包上傳到目標(biāo)機(jī)器中的目錄，我們傳到/devui目錄中。
主機(jī)組需要新建，選擇主機(jī)組旁邊的新建按鈕，進(jìn)入創(chuàng)建主機(jī)組頁面，只需要以下步驟即可創(chuàng)建一個(gè)主機(jī)組：
填寫主機(jī)組名稱 添加主機(jī)（之前申請的ECS彈性云主機(jī)）
添加主機(jī)需要填寫的信息：
主機(jī)名 主機(jī)IP地址 用戶名（root） 密碼 端口號(hào)（22）
執(zhí)行shell命令
執(zhí)行shell命令是當(dāng)你已經(jīng)把tar軟件包上傳到目標(biāo)服務(wù)器之后，希望執(zhí)行的shell命令，我們當(dāng)然是希望將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 定時(shí)任務(wù)
搭建完流水線，我們可以配置一個(gè)定時(shí)任務(wù)，每天或每周自動(dòng)用制定分支跑流水線，完全不用人工干預(yù)。為了保障版本質(zhì)量，我們也可以在配置灰度部署策略，添加撥測任務(wù)，保障每一次部署現(xiàn)網(wǎng)都不出問題。限于篇幅就不一一介紹了，感興趣的小伙伴可以關(guān)注DevCloud官網(wǎng)，里面詳細(xì)地介紹了從需求規(guī)劃到研發(fā)、測試、運(yùn)維整套DevOps流程的玩法。
4 小結(jié)
本文詳細(xì)地介紹如何將一個(gè)網(wǎng)站的Github倉庫源碼自動(dòng)化部署到服務(wù)器。先介紹申請服務(wù)器和搭建服務(wù)器環(huán)境，重點(diǎn)介紹在Linux服務(wù)器搭建Nginx服務(wù)的步驟；然后簡單介紹了手動(dòng)部署流程；最后詳細(xì)介紹了如何利用DevCloud流水線工具，實(shí)現(xiàn)自動(dòng)化部署。
最后
如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我三個(gè)小忙：
點(diǎn)個(gè)「在看」，讓更多的人也能看到這篇內(nèi)容（喜歡不點(diǎn)在看，都是耍流氓 -_-）
歡迎加我微信「qianyu443033099」拉你進(jìn)技術(shù)群，長期交流學(xué)習(xí)...
關(guān)注公眾號(hào)「前端下午茶」，持續(xù)為你推送精選好文，也可以加我為好友，隨時(shí)聊騷。
點(diǎn)個(gè)在看支持我吧，轉(zhuǎn)發(fā)就更好了
瀏覽
51
DevUI是一支兼具設(shè)計(jì)視角和工程視角的團(tuán)隊(duì)，服務(wù)于華為云DevCloud平臺(tái)和華為內(nèi)部數(shù)個(gè)中后臺(tái)系統(tǒng)，服務(wù)于設(shè)計(jì)師和前端工程師。
官方網(wǎng)站：devui.design
Ng組件庫：ng-devui（歡迎Star）
官方交流：添加DevUI小助手（devui-official）
DevUIHelper插件：DevUIHelper-LSP（歡迎Star）
原文：https://segmentfault.com/a/1190000037612735
前言
本文以DevUI組件庫網(wǎng)站為例，介紹如何自動(dòng)化部署一個(gè)前端應(yīng)用。
本文可以認(rèn)為是《手把手教你搭建自己的Angular組件庫》的續(xù)集。
1 搭建服務(wù)器環(huán)境
本機(jī)開發(fā)完代碼，并push到遠(yuǎn)程代碼倉庫，還需要部署到服務(wù)器上，用戶才能訪問到。
因此為了部署你的應(yīng)用，第一步你需要購買一臺(tái)服務(wù)器，為了節(jié)省成本，一般都會(huì)購買按需使用的云服務(wù)器，如何申請?jiān)品?wù)器就不介紹了，下面介紹如何在Linux服務(wù)器搭建Nginx服務(wù)。
1.1 安裝Nginx
Web應(yīng)用通常都會(huì)使用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命令進(jìn)行解壓。
tar -zxvf nginx-1.18.0.tar.gz
1.1.3 配置
先進(jìn)入nginx源碼的根目錄，然后執(zhí)行configure配置腳本，這里只配置了nginx的安裝目錄。
cd nginx-1.18.0
./configure --prefix=/usr/local/nginx
執(zhí)行完發(fā)現(xiàn)報(bào)錯(cuò)了，原來是缺少依賴庫。
[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= option.
主要需要安裝pcre/zlib/openssl三個(gè)依賴庫，我們使用yum包管理工具（類似Node的npm包管理工具）來安裝。
yum -y install pcre-devel zlib-devel openssl-devel
安裝完依賴庫之后再次執(zhí)行configure腳本，Nginx配置成功，配置結(jié)果如下：
...
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"
我們注意到執(zhí)行完configure配置腳本之后，生成了一個(gè)Makefile文件，該文件就是用來編譯Nginx源碼的。
1.1.4 編譯
相比配置，編譯的步驟就簡單多了，只需要執(zhí)行make命令即可。
make
1.1.5 安裝
編譯完之后就是安裝了，這一步才會(huì)真正在/usr/local/nginx目錄下生成相應(yīng)的文件。
make install
安裝完之后，在/usr/local/nginx目錄下已經(jīng)生成了運(yùn)行Nginx應(yīng)用需要的所有文件。
1.1.6 運(yùn)行啟動(dòng)Nginx
執(zhí)行nginx目錄下的sbin/nginx就可以直接啟動(dòng)Nginx啦。
/usr/local/nginx/sbin/nginx
1.1.7 驗(yàn)證是否啟動(dòng)成功
在本機(jī)瀏覽器中輸入服務(wù)器的公網(wǎng)IP地址，即可訪問Nginx應(yīng)用。
這里顯示了Nginx的歡迎頁面，等我們部署好自己的Web應(yīng)用之后，這個(gè)網(wǎng)頁將顯示我們自己的網(wǎng)站首頁。
2 手工部署流程
我們在本機(jī)開發(fā)完DevUI網(wǎng)站的代碼之后，執(zhí)行npn run build，這時(shí)將在dist目錄得到DevUI網(wǎng)站的所有靜態(tài)資源文件，可以先在本地用anywhere看下效果。
為了將其部署到服務(wù)器，并通過Nginx服務(wù)器訪問，我們需要將這些文件上傳到服務(wù)器的nginx目錄，一個(gè)一個(gè)文件傳肯定不現(xiàn)實(shí)，需要將其壓縮打包，然后上傳到服務(wù)器，最后解壓到nginx的html目錄就算部署完成。
Step 1: 壓縮打包 tar
Step 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ā)完都需要手動(dòng)執(zhí)行以上步驟，將會(huì)非常麻煩，并且很容易出錯(cuò)。
為什么不將其自動(dòng)化呢？
3 使用DevCloud流水線實(shí)現(xiàn)自動(dòng)部署
DevCloud是集華為研發(fā)實(shí)踐、前沿研發(fā)理念、先進(jìn)研發(fā)工具為一體的軟件開發(fā)平臺(tái)，為了實(shí)現(xiàn)Web應(yīng)用的自動(dòng)化部署，我們主要需要使用DevCloud的流水線/編譯構(gòu)建/發(fā)布/部署4個(gè)服務(wù)。
主要分成以下4個(gè)步驟：
創(chuàng)建DevCloud項(xiàng)目 創(chuàng)建流水線 創(chuàng)建構(gòu)建任務(wù) 創(chuàng)建部署任務(wù)
3.1 創(chuàng)建DevCloud項(xiàng)目
由于DevCloud所有服務(wù)都是通過項(xiàng)目承載的，因此需要先創(chuàng)建下項(xiàng)目，這里創(chuàng)建一個(gè)看板項(xiàng)目。
先進(jìn)入DevCloud首頁，按以下步驟即可創(chuàng)建一個(gè)看板項(xiàng)目：
點(diǎn)擊右上角的創(chuàng)建項(xiàng)目 選擇看板項(xiàng)目 輸入項(xiàng)目名稱 確定
項(xiàng)目創(chuàng)建成功之后直接進(jìn)入該項(xiàng)目首頁，點(diǎn)擊頭部菜單構(gòu)建&發(fā)布下的流水線按鈕即可進(jìn)行流水線首頁。
3.2 創(chuàng)建流水線
在流水線首頁的右上角有一個(gè)創(chuàng)建流水線的按鈕，點(diǎn)擊即可進(jìn)入流水線的創(chuàng)建流程。
創(chuàng)建一條流水線主要分成以下步驟：
輸入流水線名稱 選擇模板，這里我們選擇空模板 選擇代碼源，直接只用Github代碼倉庫即可 自定義工作流
選擇代碼源
為了選擇Github代碼倉庫的源，我們需要新增一個(gè)服務(wù)擴(kuò)展點(diǎn)，獲得Github的授權(quán)，這樣DevCloud流水線這邊才可以拉取Github的代碼，進(jìn)行構(gòu)建、部署等步驟。
新增擴(kuò)展點(diǎn)的步驟也很簡單：
輸入擴(kuò)展點(diǎn)名稱 進(jìn)行OAuth授權(quán)
有了擴(kuò)展點(diǎn)，就可以選擇你的Github倉庫作為代碼源啦。
選完代碼源就可以創(chuàng)建你的流水線啦。
可以新創(chuàng)建的流水線包含3個(gè)階段，第一個(gè)階段關(guān)聯(lián)了一個(gè)Github的代碼倉，第二個(gè)階段是一個(gè)空的構(gòu)建階段，里面什么任務(wù)也沒有，第三個(gè)階段是一個(gè)不可編輯的發(fā)布倉庫階段。
這個(gè)流水線目前什么都做不了，我們需要往里面添加任務(wù)才能完成網(wǎng)站的自動(dòng)化部署。
3.3 創(chuàng)建構(gòu)建任務(wù)
回顧下之前的手工部署步驟：
構(gòu)建源代碼 壓縮源代碼 上傳軟件包到服務(wù)器 解壓軟件包到Nginx目錄
因此我們首先需要在流水線中添加一個(gè)構(gòu)建任務(wù)：
在構(gòu)建階段添加一個(gè)構(gòu)建類型的任務(wù) 創(chuàng)建一個(gè)構(gòu)建任務(wù) 在流水線選擇上一步創(chuàng)建好的流水線
3.3.1 在構(gòu)建階段添加一個(gè)構(gòu)建類型的任務(wù)
在構(gòu)建階段添加一個(gè)任務(wù)，然后在側(cè)滑中選擇構(gòu)建類型，這是該類型下是沒有構(gòu)建任務(wù)的，因此沒法選擇，需要先創(chuàng)建構(gòu)建任務(wù)。
3.3.2 創(chuàng)建一個(gè)構(gòu)建任務(wù)
在選擇需要調(diào)度的任務(wù)中點(diǎn)擊創(chuàng)建按鈕，進(jìn)入新建構(gòu)建任務(wù)的頁面，按照指引創(chuàng)建一個(gè)構(gòu)建任務(wù)：
輸入構(gòu)建任務(wù)名稱 選擇我們之前創(chuàng)建的Entpoint實(shí)例，以及該示例下的Github倉庫 不使用模板，直接創(chuàng)建 添加Npm構(gòu)建和上傳軟件包道發(fā)布庫這兩個(gè)構(gòu)建步驟（關(guān)鍵） 配置構(gòu)建參數(shù)
Npm構(gòu)建
該步驟直接使用默認(rèn)的構(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)建一個(gè)空的
}
tar.c({ gzip: true }, ['dist']) // 將dist目錄下的文件全部打包
.pipe(fs.createWriteStream('./result/devui.tar.gz')); // 將生成的tar包（devui.tar.gz）放到result目錄下
});
上傳軟件包到發(fā)布庫
上一個(gè)Npm構(gòu)建步驟已經(jīng)將壓縮包創(chuàng)建好了，這個(gè)任務(wù)的目的是將這個(gè)tar包上傳到發(fā)布庫，也就是之前流水線中的第3個(gè)階段，方便部署時(shí)下載tar包到目標(biāo)服務(wù)器。
該步驟主要需要填寫構(gòu)建包路徑：
./result/devui.tar.gz
發(fā)布版本號(hào)和包名不要寫死，從部署參數(shù)里拿，格式如下：
${releaseVersion}
其中releaseVersion就是下一步需要配置的構(gòu)建參數(shù)。
配置構(gòu)建參數(shù)
codeBranch是默認(rèn)的參數(shù)，我們需要增加releaseVersion和serviceName兩個(gè)構(gòu)建參數(shù)，一個(gè)用于每次構(gòu)建時(shí)的版本號(hào)，另一個(gè)就是服務(wù)名。
3.3.3 在流水線選擇上一步創(chuàng)建好的流水線
回到流水線，就可以選擇上一步創(chuàng)建好的流水線，保存即可。
至此構(gòu)建的步驟已經(jīng)搞定了，我們可以跑一下試試。
跑完流水線我們就能在發(fā)布倉庫看到我們的tar構(gòu)建包：
有了構(gòu)建包我們就可以拿它去服務(wù)器部署啦，當(dāng)然我們肯定不會(huì)選擇手工的方式部署，而是在流水線中創(chuàng)建一個(gè)部署任務(wù)，讓所有過程自動(dòng)化進(jìn)行。
3.4 創(chuàng)建部署任務(wù)
在流水線中添加部署任務(wù)和添加構(gòu)建任務(wù)差不多，只需要以下3步即可：
添加一個(gè)新的階段 在該階段中添加一個(gè)部署類型的任務(wù) 創(chuàng)建一個(gè)部署任務(wù)（關(guān)鍵） 在步驟2中選擇步驟3中創(chuàng)建的部署任務(wù)
創(chuàng)建一個(gè)部署任務(wù)
和創(chuàng)建構(gòu)建任務(wù)類似：
輸入部署任務(wù)名稱 選擇空白模板，直接創(chuàng)建 添加選擇部署來源和執(zhí)行shell命令這兩個(gè)構(gòu)建步驟（關(guān)鍵） 配置部署參數(shù)
選擇部署來源
關(guān)鍵是需要選擇主機(jī)組，填寫軟件包和部署目錄。
軟件包就是之前發(fā)布倉庫的軟件包，直接從/devui/${releaseVersion}取即可，其中${releaseVersion}是部署參數(shù)，和之前的構(gòu)建參數(shù)類似。
部署目錄是要將tar壓縮包上傳到目標(biāo)機(jī)器中的目錄，我們傳到/devui目錄中。
主機(jī)組需要新建，選擇主機(jī)組旁邊的新建按鈕，進(jìn)入創(chuàng)建主機(jī)組頁面，只需要以下步驟即可創(chuàng)建一個(gè)主機(jī)組：
填寫主機(jī)組名稱 添加主機(jī)（之前申請的ECS彈性云主機(jī)）
添加主機(jī)需要填寫的信息：
主機(jī)名 主機(jī)IP地址 用戶名（root） 密碼 端口號(hào)（22）
執(zhí)行shell命令
執(zhí)行shell命令是當(dāng)你已經(jīng)把tar軟件包上傳到目標(biāo)服務(wù)器之后，希望執(zhí)行的shell命令，我們當(dāng)然是希望將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 定時(shí)任務(wù)
搭建完流水線，我們可以配置一個(gè)定時(shí)任務(wù)，每天或每周自動(dòng)用制定分支跑流水線，完全不用人工干預(yù)。為了保障版本質(zhì)量，我們也可以在配置灰度部署策略，添加撥測任務(wù)，保障每一次部署現(xiàn)網(wǎng)都不出問題。限于篇幅就不一一介紹了，感興趣的小伙伴可以關(guān)注DevCloud官網(wǎng)，里面詳細(xì)地介紹了從需求規(guī)劃到研發(fā)、測試、運(yùn)維整套DevOps流程的玩法。
4 小結(jié)
本文詳細(xì)地介紹如何將一個(gè)網(wǎng)站的Github倉庫源碼自動(dòng)化部署到服務(wù)器。先介紹申請服務(wù)器和搭建服務(wù)器環(huán)境，重點(diǎn)介紹在Linux服務(wù)器搭建Nginx服務(wù)的步驟；然后簡單介紹了手動(dòng)部署流程；最后詳細(xì)介紹了如何利用DevCloud流水線工具，實(shí)現(xiàn)自動(dòng)化部署。
最后
如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我三個(gè)小忙：
點(diǎn)個(gè)「在看」，讓更多的人也能看到這篇內(nèi)容（喜歡不點(diǎn)在看，都是耍流氓 -_-）
歡迎加我微信「qianyu443033099」拉你進(jìn)技術(shù)群，長期交流學(xué)習(xí)...
關(guān)注公眾號(hào)「前端下午茶」，持續(xù)為你推送精選好文，也可以加我為好友，隨時(shí)聊騷。