前言
前端項目的工程化循帐，不只是對開發(fā)層面的組件化、模塊化舀武、規(guī)范化等惧浴，更涉及到構(gòu)建、部署的工程化和自動化奕剃。
工程化的一些概念衷旅，編譯捐腿、構(gòu)建、部署柿顶、發(fā)布茄袖、CI/CD 、灰度等概念嘁锯，其實都是軟件工程中很成熟的概念宪祥。
大部分知識在前后端項目中都是通用的，有些則根據(jù)項目有所不同之處家乘。
名詞解釋
- 編譯和構(gòu)建
- 構(gòu)建產(chǎn)物（Artifacts）
- 部署蝗羊、發(fā)布
- 藍(lán)綠部署、滾動部署仁锯、金絲雀發(fā)布（灰度發(fā)布）耀找、A/B測試
1 編譯（compile）和構(gòu)建（build）
編譯是指將源代碼變?yōu)槟繕?biāo)代碼的過程，從源代碼的語言轉(zhuǎn)變?yōu)榱硗庖环N計算機語言（一般比源代碼語言更為底層的語言）业崖。
構(gòu)建是指一系列的處理野芒，包括編譯。不同的語言構(gòu)建會有不同的處理步驟双炕，最終產(chǎn)生可在具體特性環(huán)境運行的構(gòu)建產(chǎn)物（Artifact）狞悲。
前端的編譯 為了更好的編程體驗和更高的可維護(hù)性，會使用一些超集的語言妇斤，然后再轉(zhuǎn)譯為瀏覽器可以運行的語言摇锋。例如es5/6/7等語法的轉(zhuǎn)譯為對應(yīng)環(huán)境支持的代碼；less站超，sass等轉(zhuǎn)譯為css荸恕；typescript等轉(zhuǎn)譯為JavaScript。
前端構(gòu)建過程一般包括以下幾個過程：
- 代碼檢查
- 運行單元測試等
- 語言編譯
- 依賴分析顷编、打包、替換等
- 代碼壓縮剑刑、spirit圖片壓縮等
- 版本生成
構(gòu)建結(jié)果一般生成一個或多個文件媳纬，里面包括直接可以部署在特定環(huán)境中的所有內(nèi)容。
2 Artifacts (構(gòu)建產(chǎn)物)
每一次成功構(gòu)建后產(chǎn)出的記過施掏，被稱為Artifacts钮惠。Artifacts可以直接部署在特定環(huán)境中并正常運行。每個構(gòu)建結(jié)果一般都會版本保存七芭，為后續(xù)部署素挽、回滾、灰度等做備份狸驳。
可能是因為構(gòu)建的速度预明，后端都會有一個Artifacts制品庫缩赛。而早期一般的前端項目對Artifacts的概念比較弱化，一般會從Code直接構(gòu)建部署到指定的環(huán)境∽罚現(xiàn)有的規(guī)范化的項目都會對構(gòu)建產(chǎn)物所有版本進(jìn)行保存酥馍，一般都提供CND來訪問。
3 部署阅酪、發(fā)布
部署（deploy）是指把構(gòu)建后的新版本應(yīng)用或服務(wù) 安裝到目標(biāo)環(huán)境（開發(fā)旨袒、測試或者生產(chǎn)）中。
這時候部署好的應(yīng)用或服務(wù)應(yīng)該在目標(biāo)環(huán)境中正常運行著术辐，但是不會有任何訪問的流量砚尽。
發(fā)布（release）則是把新版本應(yīng)用或者服務(wù)交付給最終用戶使用的過程。相當(dāng)于把流量切到部署好的新版本的過程辉词。
前端項目部署一般是指文件的增量替換或全量替換必孤。根據(jù)項目按需決定，部署和發(fā)布可以同時進(jìn)行较屿，也可以分開進(jìn)行隧魄，在不影響用戶訪問的前提下，把前端的代碼更新到相應(yīng)的版本隘蝎。
4 CI/CD
CI Continuous Integration 持續(xù)集成购啄。指代碼繼承到主干之前，必須通過自動化測試嘱么。只要有一個測試用例失敗狮含，就不能集成。目的就是讓產(chǎn)品可以快速迭代曼振，同時還能保持高質(zhì)量几迄。
CD，Continuous Deployment冰评，持續(xù)部署映胁。持續(xù)部署是持續(xù)交付的更高階段，指的是任何修改后的內(nèi)容都經(jīng)過驗證甲雅，自動化的部署到生產(chǎn)環(huán)境解孙。
兩者的區(qū)別，在于是否自動部署到生產(chǎn)環(huán)境抛人。持續(xù)交付弛姜，需要用戶手動點擊“部署”按鈕才能部署到生產(chǎn)環(huán)境。
前端項目的 CI/CD 妖枚，因為一定的特殊性廷臼，對通用化的庫或框架可以有覆蓋率很高的單元測試/自動化測試，然而對業(yè)務(wù)代碼的單元測試、端對端測試則成本很高荠商，所以 CI 的過程一般就是運行構(gòu)建腳本寂恬，未報錯的生成靜態(tài)文件則為成功。一般不會有 CD（持續(xù)部署） 的過程结啼，合并到 develop 分支觸發(fā) CI 成功后快速發(fā)布部署到測試或預(yù)發(fā)布環(huán)境通過測試人員的測試和一定的自動化測試掠剑。到需要發(fā)布的時間點，再拉取 master 分支來構(gòu)建部署發(fā)布郊愧。
藍(lán)綠部署朴译、滾動部署、金絲雀發(fā)布（灰度發(fā)布）属铁、A/B測試
藍(lán)綠部署
藍(lán)綠部署中眠寿，綠色代表代表正在給用戶提供正常服務(wù)的系統(tǒng)；藍(lán)色代表另外一套準(zhǔn)備發(fā)布的系統(tǒng)焦蘑，還未對外提供盯拱，可以做線上測試。
二套系統(tǒng)必須有相同的基礎(chǔ)設(shè)置和配置環(huán)境例嘱，當(dāng)藍(lán)色系統(tǒng)測試通過狡逢，達(dá)到上線標(biāo)準(zhǔn)，就把綠色系統(tǒng)的流量全部切到藍(lán)色系統(tǒng)中拼卵，一旦藍(lán)色系統(tǒng)出現(xiàn)問題奢浑，把所有流量切回到綠色系統(tǒng)中，待藍(lán)色系統(tǒng)穩(wěn)定后就成為新的綠色系統(tǒng)腋腮，之前的綠色系統(tǒng)資源就可以釋放用于下一個藍(lán)色系統(tǒng)雀彼。
藍(lán)綠部署能夠簡單快捷實施的前提假設(shè)是目標(biāo)系統(tǒng)是非常內(nèi)聚的，如果目標(biāo)系統(tǒng)相當(dāng)復(fù)雜即寡，那么如何切換徊哑、兩套系統(tǒng)的數(shù)據(jù)是否需要以及如何同步等，都需要仔細(xì)考慮聪富。
滾動部署
有多個集群實例的服務(wù)中莺丑，在不影響服務(wù)的情況下，停止一個或多個實例墩蔓，進(jìn)行版本更新梢莽，再啟動加入到集群中提供正常服務(wù)，直到所有實例都更新到最新版本钢拧。
比起藍(lán)綠部署不需要準(zhǔn)備二套一樣的集群蟹漓，通過現(xiàn)有的機器或增加少量的機器就可以做到版本升級炕横。但也引入了復(fù)雜度源内，需要控制好更新過程中服務(wù)會有新老版本用戶共存的兼容情況、防止部署過程中自動伸縮的觸發(fā)導(dǎo)致實例中版本的不確定、部署過程中出錯的回滾策略等膜钓。
金絲雀發(fā)布（灰度發(fā)布）
一種比滾動部署更有控制力度的發(fā)布策略嗽交。
準(zhǔn)備一個或多個服務(wù)實例（使用新機器或已有的機器都可），并確保該實例服務(wù)沒有服務(wù)于線上的用戶颂斜，在上面部署新版本的服務(wù)夫壁，并經(jīng)過測試的驗證。
通過定制好的策略沃疮，只更新部分服務(wù)實例到最新盒让，使一部分用戶使用到最新版本，如果服務(wù)正常司蔬，逐漸更新所有服務(wù)實例到最新邑茄。
發(fā)布過程中，需要有一些流量控制的策略跟隨部署的過程俊啼，一般可以在負(fù)載均衡肺缕、路由、應(yīng)用程序中做處理授帕。
針對用戶級別分流同木。比如先部署給內(nèi)部用戶，在逐漸根據(jù)外部用戶的分類等級擴(kuò)散跛十。
地域彤路、IP 級別分流。只部署新版本到某地理地域偶器，慢慢擴(kuò)大到全量發(fā)布斩萌。
應(yīng)用程序中判斷特性分流。比如通過什么渠道使用服務(wù)的屏轰、瀏覽器特征分析颊郎、某個使用觸發(fā)才使用新版本。
A/B測試
A/B測試指的是效果測試霎苗，同一時間有多個版本的服務(wù)在線上運行姆吭，并通過一定的策略控制多個版本的流量分配，最終通過信息的收集唁盏，分析各個版本服務(wù)的實際效果内狸，選出效果最好的版本。
A/B測試強調(diào)的是通過不同版本對比效果來選擇出最好的版本厘擂，而然金絲雀發(fā)布（灰度發(fā)布）的方式正好可以滿足A/B測試的需求
構(gòu)建和部署
現(xiàn)有的CI/CD方案都很成熟昆淡，Jenkins、Gitlab-CI等刽严。docker昂灵、k8s讓這些工具簡直帶上了無限手套，因為構(gòu)建部署是需要機器資源的，相比之前固定的資源搶占和空置眨补，k8s讓資源動態(tài)創(chuàng)建管削、銷毀，提升資源利用率撑螺。
