背景
? ? 估計(jì)多數(shù)架構(gòu)師對于后端灰度部署的技術(shù)比較熟悉而對于前端灰度部署不慎了解，首先我要說這是一個新名詞，在傳統(tǒng)的思路里對于部署只是相對于服務(wù)器的，而對于前端部署向來都是直接更新，因?yàn)閷τ趥鹘y(tǒng)架構(gòu)而言不會對用戶的設(shè)備做判斷，在安卓 、蘋果等終端出現(xiàn)之前，pc上不會版本而言只有針對不同的瀏覽器做適配兼容，而在安卓 蘋果等終端出現(xiàn)之后有了web應(yīng)用這個新概念，對于更新起的小程序而言，這根本是一個純的web應(yīng)用。而且以目前市場上的趨勢而言已經(jīng)由手機(jī)廠商的應(yīng)用分發(fā)，而趨向與平臺分發(fā)，比較出名的包括微信小程序·、支付寶小程序。由于web輕量，易更新的特點(diǎn)逐漸會取代傳統(tǒng)app的開發(fā)模式，而是web掛載小程序，通過掛載app提供原生性能的解決方案。此時(shí)對于web 有原生app一樣可控版本的功能必將成為硬性要求。簡而言之web小程序掛載必須在保持輕量的前提下還能保持針對不同終端能同一頁面顯示不同版本甚至不同角色同時(shí)還有保證高性能的web應(yīng)用。針對這個問題做出架構(gòu)設(shè)計(jì)。
目標(biāo)
實(shí)現(xiàn)定向投放，甚至針對單個用戶級別的投放配置
預(yù)熱階段
? ?動手之前首先要解釋下一下非常關(guān)鍵的知識點(diǎn)，什么是http請求，瀏覽器發(fā)起的http請求和app發(fā)起的http請求有什么不同?
? ?http請求是網(wǎng)絡(luò)通信協(xié)議的一種，基于TCP/IP協(xié)議，TCP/IP又基于socket協(xié)議，對于這種基礎(chǔ)的東西你如果不知道那么請不要再看下去了。http請求協(xié)議有約定的格式主要有一下：請求行（request line）、請求頭部（header）、請求數(shù)據(jù)三部分組成。瀏覽器請求時(shí)在head部分有個必傳字段user-agent，這個是所有瀏覽器發(fā)起請求的時(shí)都會帶的字段，與app不同，app的http請求不會主動帶設(shè)備信息，如果要加則需要在代碼里里手動在請求頭部加上參數(shù)。而我們要做到前端的灰度部署首先就是要攔截user-agent這個字段來獲取設(shè)備信息，而在用戶登陸之后通過獲取請求頭內(nèi)的cookie值獲取用戶的身份。
? ?第二個知識點(diǎn)就是前端的打包技術(shù)，首先我們要我們要講為什么我們一定要使用打包技術(shù)以及前后端分離的意義。在webpack出現(xiàn)之前 我們通過gulp 或者grunt 使用bable的es6轉(zhuǎn)編譯功能通過這個實(shí)現(xiàn)前端的工程話管理。最終我們要達(dá)到的目的是一個頁面要只需要獲取一個js文件就能完成界面的渲染，這樣的優(yōu)點(diǎn)首先我們必須有一個概念那就是服務(wù)器的連接池概念，一個服務(wù)器每和一個客戶端發(fā)生鏈接都會占用服務(wù)器內(nèi)存，這個不管是無狀態(tài)還是有狀態(tài)鏈接都一樣，將多個js文件和cs文件打包為一個可以釋放大量的連接池，也許你會問那我直接把所有文件都寫在一個js里不就行嗎，白癡你寫個30行代碼你還看的懂1萬行你行嗎這就是打包技術(shù)的優(yōu)點(diǎn)，同時(shí)也是前后端分離的優(yōu)點(diǎn)。同樣我們還能使用cdn將靜態(tài)文件部署到多個文件部署到多個服務(wù)器上，這個只會占用磁盤空間，而不會占用內(nèi)存空間。也許有的java或者php會問我也可以直接寫web應(yīng)用來讓他發(fā)起訪問請求啊。你可以寫但是這樣勢必會浪費(fèi)更多的資源，而且在于web應(yīng)用越來越復(fù)雜的環(huán)境下，我們需要更加專業(yè)的人來維護(hù)。
設(shè)計(jì)階段
我們主要要做的就是通過中間件攔截http請求獲取cookie 獲取設(shè)備信息，這方面需要native的技術(shù)支持因?yàn)槲覀円@取cookie需要webview的封裝，當(dāng)然如果app的場景我們直接轉(zhuǎn)化為普通的web應(yīng)用場景
我們需要在web開發(fā)階段 需要對與不同的role 配置不同的entry 這個根據(jù)打包工具的不同，唯一要滿足的必須是在服務(wù)端打包。同時(shí)必須在服務(wù)端搭建私有倉庫，因?yàn)閚pm官方也不是很靠譜，本地私有庫最安全。
結(jié)束? ?
實(shí)施階段就不提供來源碼支持了，只能告訴各位是用node開發(fā)的，但其實(shí)用java php 也可以主要是思路，感興趣的同學(xué)可以動手嘗試。主要有兩個比較關(guān)鍵的點(diǎn) 一個是中間件 一個是服務(wù)器分發(fā)。
