應(yīng)用數(shù)據(jù)靜態(tài)化架構(gòu)高性能單頁Web應(yīng)用

在電商網(wǎng)站中，單頁Web是非常常見的一種形式雏节，比如首頁胜嗓、頻道頁、廣告頁等都屬于單頁應(yīng)用钩乍。而這種頁面是由模板+數(shù)據(jù)組成辞州。傳統(tǒng)的構(gòu)建方式一般通過靜態(tài)化實(shí)現(xiàn)。而這種方式的靈活性并不是很好寥粹，比如頁面模板部分變更了需要重新全部生成变过。因此最好能有一種實(shí)現(xiàn)方式是可以實(shí)時(shí)動(dòng)態(tài)渲染，以支持模板的多變性涝涤。另外也要考慮好如下幾個(gè)問題：

1媚狰、動(dòng)態(tài)化模板渲染支持；

2阔拳、數(shù)據(jù)和模板的多版本化：生產(chǎn)版本崭孤、灰度版本和預(yù)發(fā)布版本；

3糊肠、版本回滾問題辨宠，假設(shè)當(dāng)前發(fā)布的生產(chǎn)版本出問題了如何快速的回滾到上一個(gè)版本；

4货裹、異常問題嗤形，假設(shè)渲染模板時(shí)遇到了異常情況（比如獲取Redis出問題了），如何處理弧圆；

5赋兵、灰度發(fā)布問題，比如切20%量給灰度版本搔预；

6毡惜、預(yù)發(fā)布問題，目的是在正式環(huán)境測(cè)試數(shù)據(jù)和模板的正確性斯撮。

整體架構(gòu)

靜態(tài)化頁面的方案如下圖所示：

直接將生成的靜態(tài)頁推送到相關(guān)服務(wù)器即可经伙。使用這種方式要考慮文件操作的原子化問題（即從老版本切換到新版本如何做到文件操作原子化）。

而動(dòng)態(tài)化方案的整體架構(gòu)如下圖所示勿锅，分為三大系統(tǒng)：CMS系統(tǒng)帕膜、控制系統(tǒng)和前端展示系統(tǒng)。

CMS系統(tǒng)

1溢十、在CMS系統(tǒng)可以配置頁面的模板和數(shù)據(jù)垮刹；

1.1、模板動(dòng)態(tài)在CMS系統(tǒng)中維護(hù)张弛，即模板不是一個(gè)靜態(tài)文件荒典，而是存儲(chǔ)在CMS中的一條數(shù)據(jù)酪劫，最終發(fā)布到“發(fā)布數(shù)據(jù)存儲(chǔ)Redis”中，前端展示系統(tǒng)從Redis中獲取該模板進(jìn)行渲染寺董，從而前端展示系統(tǒng)更換了模板也不需要重啟覆糟，純動(dòng)態(tài)維護(hù)模板數(shù)據(jù)；

2遮咖、原始數(shù)據(jù)存儲(chǔ)到“元數(shù)據(jù)存儲(chǔ)Mysql”中即可滩字，比如頻道頁一般需要：前端訪問的URL、分類御吞、輪播圖麦箍、商品樓層數(shù)據(jù)等；這些數(shù)據(jù)按照相應(yīng)的維度存儲(chǔ)在CMS系統(tǒng)中陶珠；

3挟裂、提供發(fā)布到“發(fā)布數(shù)據(jù)存儲(chǔ)Redis”的控制，將CMS系統(tǒng)中的原始數(shù)據(jù)和模板數(shù)據(jù)組裝成聚合數(shù)據(jù)（JSON存儲(chǔ)）同步到“發(fā)布數(shù)據(jù)存儲(chǔ)Redis”揍诽，以便前端展示系統(tǒng)獲取進(jìn)行展示话瞧；此處提供三個(gè)發(fā)布按鈕：正式版本、灰度版本和預(yù)發(fā)布版本寝姿。

目前存在如下幾個(gè)問題：

1交排、用戶如訪問http://channel.jd.com/fashion.html怎么定位到對(duì)應(yīng)的聚合數(shù)據(jù)呢？ 我們可以在CMS元數(shù)據(jù)中定義URL作為KEY饵筑，如果沒有URL埃篓，則使用ID作為KEY，或者自動(dòng)生成一個(gè)URL根资。

2架专、多版本如何存儲(chǔ)呢？ 使用Redis的Hash結(jié)構(gòu)存儲(chǔ)即可玄帕，KEY為URL（比如http://channel.jd.com/fashion.html）部脚，字段按照維度存儲(chǔ)：正式版本使用當(dāng)前時(shí)間戳存儲(chǔ)（這樣前端系統(tǒng)可以根據(jù)時(shí)間戳排序然后獲取最新的版本）、預(yù)發(fā)布版本使用“predeploy”作為字段裤纹，灰度版本使用“abVersion”作為字段即可委刘，這樣就區(qū)分開了多版本。

3鹰椒、灰度版本如何控制呢锡移？這個(gè)通過控制系統(tǒng)的開關(guān)來控制如何灰度；

4漆际、如何訪問預(yù)發(fā)布版本呢淆珊？比如在URL參數(shù)總帶上predeploy=true，另外可以限定只有內(nèi)網(wǎng)可以訪問或者訪問時(shí)帶上訪問密碼奸汇，比如pwd=absdfedwqdqw施符。

5往声、模板變更的歷史數(shù)據(jù)校驗(yàn)問題？比如模板變更了戳吝，但是使用歷史數(shù)據(jù)渲染該模板會(huì)出現(xiàn)問題浩销，即模板要兼容歷史數(shù)據(jù)的；此處的方案不存在這個(gè)問題骨坑，因?yàn)槊看未鎯?chǔ)時(shí)是當(dāng)時(shí)的模板快照撼嗓，即數(shù)據(jù)快照和模板快照推送到“發(fā)布數(shù)據(jù)存儲(chǔ)Redis”中柬采。

前端展示系統(tǒng)

1欢唾、獲取當(dāng)前URL，使用URL作為KEY首先從本機(jī)“發(fā)布數(shù)據(jù)存儲(chǔ)Redis”獲取數(shù)據(jù)粉捻；

2礁遣、如果沒有數(shù)據(jù)或者異常則從主“發(fā)布數(shù)據(jù)存儲(chǔ)Redis”獲取肩刃；

3祟霍、如果主“發(fā)布數(shù)據(jù)存儲(chǔ)Redis”也發(fā)生了異常，那么會(huì)直接調(diào)用CMS系統(tǒng)暴露的API直接從元數(shù)據(jù)存儲(chǔ)Mysql中獲取數(shù)據(jù)進(jìn)行處理盈包。

展示系統(tǒng)的偽代碼

Java代碼

--1沸呐、加載Lua模塊庫

local?template?=?require("resty.template")

template.load?=?function(s)returns?end

--2、動(dòng)態(tài)獲取模板

local?myTemplate?="{*?title?*}"

--3呢燥、動(dòng)態(tài)獲取數(shù)據(jù)

local?data?=?{title?="iphone6s"}

--4崭添、渲染模板

local?func?=?template.compile(myTemplate)

local?content?=?func(data)

--5、通過ngx?API輸出內(nèi)容

ngx.say(content)

即模板和數(shù)據(jù)都是動(dòng)態(tài)獲取的叛氨，然后使用動(dòng)態(tài)獲取的模板和數(shù)據(jù)進(jìn)行渲染呼渣。

此處假設(shè)最新版本的模板或數(shù)據(jù)有問題怎么辦？這個(gè)可以從流程上避免：1寞埠、首先進(jìn)行預(yù)發(fā)布版本發(fā)布屁置，測(cè)試人員驗(yàn)證沒問題后；2仁连、接著發(fā)布灰度版本蓝角，在灰度時(shí)自動(dòng)去掉CDN功能（即不設(shè)置頁面的緩存時(shí)間），發(fā)布驗(yàn)證OK饭冬；3帅容、發(fā)布正式版本即可；正式版本發(fā)布的5分鐘內(nèi)是不設(shè)置頁面緩存的伍伤，這樣就可以防止發(fā)版時(shí)遇到問題并徘，但是問題版本已經(jīng)在CDN上給全部用戶造成問題。當(dāng)然這個(gè)流程很麻煩扰魂，可以按照自己的場(chǎng)景進(jìn)行簡(jiǎn)化麦乞。

控制系統(tǒng)

控制系統(tǒng)用于版本降級(jí)和灰度發(fā)布的蕴茴，當(dāng)然可以把這個(gè)功能放在CMS系統(tǒng)中實(shí)現(xiàn)。

版本降級(jí)：假設(shè)當(dāng)前線上的版本遇到問題了姐直，想要快速切換回上一個(gè)版本倦淀，可以使用控制系統(tǒng)實(shí)現(xiàn)，選中其中一個(gè)歷史版本然后通知給前端展示系統(tǒng)即可声畏，使用URL和當(dāng)前版本的字段即可撞叽，這樣前端展示系統(tǒng)就可以自動(dòng)切換到選中的那個(gè)版本；當(dāng)問題修復(fù)后插龄，再刪除該降級(jí)配置即切換回最新版本愿棋。

灰度發(fā)布：在控制系統(tǒng)控制哪些URL需要灰度發(fā)布和灰度發(fā)布的比例，同版本降級(jí)類似將相關(guān)的數(shù)據(jù)推送到前端展示系統(tǒng)即可均牢，當(dāng)不想灰度發(fā)布時(shí)刪除相關(guān)數(shù)據(jù)即可糠雨。

數(shù)據(jù)和模板動(dòng)態(tài)化

我們將數(shù)據(jù)和模板都進(jìn)行動(dòng)態(tài)化存儲(chǔ)，這樣可以在CMS進(jìn)行數(shù)據(jù)和模板的變更徘跪；實(shí)現(xiàn)了前端和后端開發(fā)人員的分離甘邀；前端開發(fā)人員進(jìn)行CMS數(shù)據(jù)配置和模板開發(fā)，而后端開發(fā)人員只進(jìn)行系統(tǒng)的維護(hù)垮庐。另外因?yàn)槟０宓膭?dòng)態(tài)化存儲(chǔ)松邪，每次發(fā)布新的模板不需要老重啟前端展示系統(tǒng)，后端開發(fā)人員更好地得到了解放哨查。

模板和數(shù)據(jù)可以是一對(duì)多的關(guān)系逗抑，即一個(gè)模板可以被多個(gè)數(shù)據(jù)使用。假設(shè)模板發(fā)生變更后解恰，我們可以批量推送模板關(guān)聯(lián)的數(shù)據(jù)锋八，首先進(jìn)行預(yù)發(fā)布版本的發(fā)布，測(cè)試人員進(jìn)行驗(yàn)證护盈，驗(yàn)證沒問題即可發(fā)布正式版本挟纱。

多版本機(jī)制

我們將數(shù)據(jù)和模板分為多版本后，可以實(shí)現(xiàn)：

預(yù)發(fā)布版本：更容易讓測(cè)試人員在實(shí)際環(huán)境進(jìn)行驗(yàn)證腐宋；

灰度版本：只需要簡(jiǎn)單的開關(guān)控制紊服，就可以進(jìn)行A/B測(cè)試；

正式版本：存儲(chǔ)多個(gè)歷史正式版本胸竞，假設(shè)最新的正式版本出現(xiàn)問題欺嗤，可以非常快速的切換回之前的版本卫枝。

異常問題

其中一個(gè)擔(dān)心就是本機(jī)從“發(fā)布數(shù)據(jù)存儲(chǔ)Redis”和主“發(fā)布數(shù)據(jù)存儲(chǔ)Redis”都掛了煎饼，那么我們直接調(diào)用CMS系統(tǒng)暴露的HTTP服務(wù)直接從元數(shù)據(jù)存儲(chǔ)Mysql獲取數(shù)據(jù)。

另外一個(gè)擔(dān)心是數(shù)據(jù)和模板獲取到了校赤，但是渲染模板出錯(cuò)了吆玖，比如遇到500筒溃、503；解決方案是：使用上一個(gè)版本的數(shù)據(jù)進(jìn)行渲染沾乘。

另外還一種問題是數(shù)據(jù)和模板都沒問題怜奖，但是因?yàn)橐恍┦韬觯秩境鰜淼捻撁驽e(cuò)亂了或者有些區(qū)域出現(xiàn)了空白翅阵；對(duì)于這種問題沒有很好的解決方案歪玲；可以根據(jù)自己的場(chǎng)景定義異常掃描庫，掃描當(dāng)前版本有異常就發(fā)警告給相關(guān)人員掷匠，并自動(dòng)降級(jí)到上一個(gè)版本滥崩。