點(diǎn)擊下方“JavaEdge”，選擇“設(shè)為星標(biāo)”

第一時間關(guān)注技術(shù)干貨！

本文已收錄在Github，關(guān)注我，緊跟本系列專欄文章，咱們下篇再續(xù)！

• 魔都架構(gòu)師 | 全網(wǎng)30W技術(shù)追隨者

• 大廠分布式系統(tǒng)/數(shù)據(jù)中臺實(shí)戰(zhàn)專家

• 主導(dǎo)交易系統(tǒng)百萬級流量調(diào)優(yōu) & 車聯(lián)網(wǎng)平臺架構(gòu)

• AIGC應(yīng)用開發(fā)先行者 | 區(qū)塊鏈落地實(shí)踐者

• 以技術(shù)驅(qū)動創(chuàng)新，我們的征途是改變世界！

• 實(shí)戰(zhàn)干貨：編程嚴(yán)選網(wǎng)

項(xiàng)目上線前最后一步，把開發(fā)好的代碼部署到線上。

“npm run build不就行”。這只是在本地把代碼打包，想在線上也可訪問這些代碼，還需部署。所以在下面，如今的前端代碼部署時的難點(diǎn)在哪呢？

1 部署難點(diǎn) jQuery時代之前

前端項(xiàng)目中所有內(nèi)容都是一些簡單的靜態(tài)資源。網(wǎng)站還沒部署的概念，網(wǎng)站上線前，直接把開發(fā)完的項(xiàng)目打包發(fā)給運(yùn)維，再由運(yùn)維把代碼直接上傳到服務(wù)器的網(wǎng)站根目錄下解壓縮，完成項(xiàng)目部署。

jQuery時代

項(xiàng)目的入口頁面被后端管理，模板部署到后端，CSS、js和圖片等靜態(tài)資源依然是打包到后端之后，再解壓處理。但現(xiàn)在，對前端的性能和穩(wěn)定性的要求也越來越高，jQuery時代那種簡單部署模式不足以應(yīng)對性能優(yōu)化、持續(xù)部署。

當(dāng)下主要面臨的代碼部署難點(diǎn)

• 咋高效地利用項(xiàng)目中的文件緩存

• 咋能讓整個項(xiàng)目的上線部署過程自動化，盡可能避免人力的介入，提高上線穩(wěn)定性

• 項(xiàng)目上線之后，如果發(fā)現(xiàn)有重大Bug，要考慮咋盡快回滾代碼

當(dāng)我們面對這些代碼部署上的難點(diǎn)，特別是在團(tuán)隊(duì)協(xié)作的項(xiàng)目中遇到時，我們就可以考慮對項(xiàng)目進(jìn)行自動化部署了，這樣代碼部署的速度和穩(wěn)定性會給項(xiàng)目研發(fā)效率帶來很好的提升。

2 上線前的自動化部署

如下是大部分團(tuán)隊(duì)部署項(xiàng)目時的邏輯：

完成打包壓縮，即開發(fā)完項(xiàng)目后，代碼推送到GitHub，就算完成任務(wù)。但打包代碼后，把代碼上傳服務(wù)器也是這步，對于前端開發(fā)者，很少能接觸，但卻很重要。

咋把打包好的代碼上傳服務(wù)器，需好的解決方案。

• 先需一臺獨(dú)立機(jī)器進(jìn)行打包和構(gòu)建，該機(jī)器需獨(dú)立于所有開發(fā)環(huán)境，為保證打包環(huán)境穩(wěn)定

• 部署任務(wù)啟動的時候，需拉取遠(yuǎn)程代碼，并切換到需部署的分支，然后鎖定Node版本進(jìn)行依賴安裝、單元測試、ESLint等代碼檢查工作

• 最后，在這臺機(jī)器，執(zhí)行經(jīng)過編譯產(chǎn)出的打包后的代碼，并打包上傳代碼到CDN和靜態(tài)服務(wù)器

• 完成這些操作后，還要能通過腳本自動通過內(nèi)部溝通軟件通知團(tuán)隊(duì)項(xiàng)目構(gòu)建的結(jié)果

項(xiàng)目部署過程可能遇到如下

問題

• 在什么os環(huán)境中執(zhí)行項(xiàng)目的構(gòu)建？

• 由誰觸發(fā)構(gòu)建？

• 咋管理前面所述的把代碼上傳CDN時，CDN賬戶的權(quán)限？

• 咋自動化執(zhí)行部署的全過程，若每次都由人工執(zhí)行，就得消耗一個人力守著編譯打包，且易引發(fā)問題，如測試的步驟遺漏或部署順序出錯。咋提升構(gòu)建速率，是部署功能中需解決的重要問題。

如采用能保證環(huán)境一致性的Docker；自動化構(gòu)建觸發(fā)可通過GitHub Actions；GitHub的actions功能相當(dāng)于給我們提供了一個免費(fèi)的服務(wù)器，可以很方便地監(jiān)控代碼的推送、安裝依賴、代碼編譯自動上傳到服務(wù)器。

這是用GitHub Actions部署項(xiàng)目后的項(xiàng)目開發(fā)流程。現(xiàn)在靜態(tài)資源管理已完成，也實(shí)現(xiàn)自動化部署。提交代碼后，項(xiàng)目就可自動推送到服務(wù)器，網(wǎng)站第一次上線成功。

3 上線后的自動化部署

后續(xù)的持續(xù)上線咋辦？直接發(fā)到生產(chǎn)環(huán)境，面臨極大風(fēng)險。但不直接發(fā)布到生產(chǎn)環(huán)境，我們就不能在本地和測試的前端環(huán)境去連接生產(chǎn)環(huán)境的數(shù)據(jù)庫。

需預(yù)發(fā)布的（Pre）環(huán)境，只能讓測試和開發(fā)訪問，除了訪問地址的環(huán)節(jié)不同，其他所有環(huán)節(jié)都和生產(chǎn)環(huán)境一致，提供最真實(shí)的回歸測試環(huán)境。

又面臨

3.1 問題

若確定下周一零點(diǎn)發(fā)布，就只能晚上12點(diǎn)準(zhǔn)時守在電腦前等結(jié)果？若npm安裝依賴失敗或上線后發(fā)現(xiàn)重大Bug，就只能迎投訴？

隨node_modules體積越來越大，構(gòu)建時間越來越長。若每次構(gòu)建都需30min甚至更長，即使Bug在項(xiàng)目剛上線時就發(fā)現(xiàn)，且秒級響應(yīng)修復(fù)，但重新部署項(xiàng)目時，也要等服務(wù)器慢慢編譯。時間就是金錢，若你在修復(fù)Bug和重新部署項(xiàng)目上耗時長，就導(dǎo)致項(xiàng)目故障時間過長。

解決方案

需一種機(jī)制，讓我們發(fā)現(xiàn)問題后，盡快回滾版本，且在回滾過程，盡可能無需人力介入。所以，需靜態(tài)資源的版本管理，即讓每個歷史版本的資源都保留，且有唯一版本號，如故障，能瞬間切換版本。這個過程由具體代碼實(shí)現(xiàn)后，只需點(diǎn)擊回滾的版本號，系統(tǒng)就自動恢復(fù)到上線前版本。

該機(jī)制下，如業(yè)務(wù)流量特大，那直接全量上線的操作就會被禁止。為減少上線時，部署操作對用戶的影響，需先選擇一部分用戶做灰度測試，即上線后的項(xiàng)目的訪問權(quán)限，暫時只對這些用戶開放?；蜃鯝B測試，如給北京的同學(xué)推送Vue課，給上海推薦React課等。我們要做的，是把不同版本代碼分開打包，互不干涉。之后，再設(shè)計(jì)部署的機(jī)器和機(jī)房去適配不同用戶。

Gtihub中可用actions配置打包功能，下面的代碼是actions的配置文件。Ubuntu作服務(wù)器的打包環(huán)境，拉取GitHub最新master代碼，并把Node版本固定14.7.6，執(zhí)行npm install后，再執(zhí)行npm run build代碼打包壓縮。

通過GitHub Actions自動化打包一份準(zhǔn)備上線的代碼：

name: 打包應(yīng)用的actions
on:
push:# 監(jiān)聽代碼時間
    branches:
      -master# master分支代碼推送的時候激活當(dāng)前action
jobs:
build:
    # runs-on 操作系統(tǒng)
    runs-on:ubuntu-latest
    steps:
      -name:遷出代碼
        uses:actions/checkout@master
      # 安裝Node
      -name:安裝Node
        uses:actions/setup-node@v1
        with:
          node-version:14.7.6
      # 安裝依賴
      -name:安裝依賴
        run:npminstall
      # 打包
      -name:打包
        run:npmrunbuild

然后配置上線服務(wù)器和GitHub Actions服務(wù)器的信任關(guān)系，通過SSH密鑰可實(shí)現(xiàn)免登錄直接部署。直接把build后的代碼打包壓縮，通過SSH直接上傳到服務(wù)器，并且要進(jìn)行代碼文件版本的管理，就完成代碼部署。

部署成功后的結(jié)果通知。釘釘、飛書都提供推送結(jié)果，可隨時通過群機(jī)器人接口把消息推送到群內(nèi)，把版本號、部署日期、發(fā)起人等信息推送到對應(yīng)接口，就完成自動化部署。

編程嚴(yán)選網(wǎng)：http://www.javaedge.cn/ 專注分享AI時代下軟件開發(fā)全場景最新最佳實(shí)踐~