2.5　案例講解

下面以一個(gè)電商平臺購物網(wǎng)站從傳統(tǒng)交互模式演變成前后端分離交互模式的具體優(yōu)化細(xì)節(jié)為例進(jìn)行講解。

簡單介紹下背景。傳統(tǒng)電商購物網(wǎng)站頁面采用JSP、服務(wù)器采用SpringMVC模式。剛開始網(wǎng)站人數(shù)不多，活躍用戶大概在每天200人，未出現(xiàn)頁面卡死、服務(wù)端宕機(jī)等狀況，但由于發(fā)展擴(kuò)張，吸引顧客后網(wǎng)站活躍用戶持續(xù)增加，大概一個(gè)月后，活躍用戶在每天6000人，此時(shí)網(wǎng)站頻繁出現(xiàn)卡頓，服務(wù)器也會出現(xiàn)宕機(jī)等現(xiàn)象?？紤]后續(xù)的發(fā)展，為了滿足公司戰(zhàn)略，針對之前的系統(tǒng)結(jié)構(gòu)進(jìn)行大規(guī)模更改重構(gòu)。首先考慮把頁面拆出來，單獨(dú)部署?？蛻舳撕头?wù)端解耦，不會產(chǎn)生較大依賴。

頁面框架選型上，主要考慮如下兩點(diǎn)：

1）基于市面上較成熟的框架體系，有問題可以較好修復(fù)處理；

2）針對產(chǎn)品的特性，構(gòu)建符合公司產(chǎn)品特性的框架技術(shù)。

1. CDN加速

考慮后使用了目前較流行的Vue技術(shù)體系，電商平臺有很多靜態(tài)資源，如圖片、文件，頁面中很多產(chǎn)品信息的大圖、小圖等需要展示，圖片、文件是非常占用資源，如何能快速展示并下載呢？公司搭建了內(nèi)部靜態(tài)資源服務(wù)器（CDN），主要用于存放各種資源文件。頁面技術(shù)選型，靜態(tài)資源加速都已經(jīng)確定后，客戶端的大體方向也已確認(rèn)：Vue+static靜態(tài)資源服務(wù)器。

2. 緩存方面

客戶端同服務(wù)器端采用HTTP請求方式交互，由于電商系統(tǒng)中有很多靜態(tài)文本信息以及很多變更很少的數(shù)據(jù)，如省市區(qū)、產(chǎn)品基本信息、介紹等，大量重復(fù)、多余的請求會頻繁消耗資源，那是否這些信息每次都需要請求服務(wù)器去獲取呢？對于上述信息變動非常少，完全不用經(jīng)常去請求服務(wù)器獲取，可以使用緩存技術(shù)，緩存兩部分?jǐn)?shù)據(jù)，即永不變資源和一定期間變動較少資源。對于前者，毫無疑問，可以完全緩存本地，但對于后者，需要考慮緩存多久、信息變動后如何自動更新等。基于以上兩點(diǎn)引入Varnish，基于HTTP加速緩存技術(shù)。客戶端無須直接請求服務(wù)器獲取數(shù)據(jù)，客戶端的請求會進(jìn)入Varnish，當(dāng)需要獲取新的數(shù)據(jù)時(shí)，Varnish會根據(jù)請求類型和狀態(tài)判斷服務(wù)器數(shù)據(jù)是否有變更，如有變更，則主動請求服務(wù)器獲取數(shù)據(jù)，然后緩存至本地，后續(xù)請求直接從本地緩存獲取數(shù)據(jù)返回，有效減少請求服務(wù)器次數(shù)。結(jié)構(gòu)如圖2-6所示。

3. 授權(quán)安全方面

前端請求后端接口存在安全等問題，外界可以直接訪問頁面及接口，需要服務(wù)器端的接口授權(quán)給發(fā)起請求的客戶端，引入JWT技術(shù)，通過JWT令牌讓服務(wù)端接口授權(quán)于客戶端，結(jié)構(gòu)如圖2-7所示。

請求過程如下：

1）客戶端發(fā)起POST請求username+password到達(dá)服務(wù)端；

2）服務(wù)端驗(yàn)證通過生成JWT令牌，同時(shí)設(shè)定時(shí)效；

3）返回JWT到客戶端；

4）客戶端以后每次請求時(shí)將接口信息加上令牌信息發(fā)送到HTTP的Header；

5）服務(wù)端檢查JWT令牌；

6）通過后返回給客戶端。

4. 高可用部署/分流方面

客戶端頁面和服務(wù)器分離后，由于客戶端是HTML靜態(tài)頁面，打開即可訪問?？蛻舳丝梢圆渴鸲嗯_，將客戶端部署在2臺Nginx上，外界訪問頁面的流量負(fù)載均衡到2臺Nginx上，即單個(gè)Nginx的頁面占50%流量。服務(wù)端也部署了2臺，那頁面請求服務(wù)端的流量如何分?jǐn)偟絻膳_服務(wù)器上呢？通過Nginx負(fù)載均衡。由于服務(wù)器端保密性，未開通外網(wǎng)權(quán)限，那頁面如何請求到服務(wù)器內(nèi)網(wǎng)去呢？通過Nginx的反向代理可以達(dá)到預(yù)期效果。結(jié)構(gòu)圖如2-8所示。

這里客戶端頁面、服務(wù)器端都做了負(fù)載均衡和高可用HA，分流了壓力同時(shí)也避免了單體宕機(jī)導(dǎo)致不可用的狀況。后續(xù)用戶流量持續(xù)增加，當(dāng)以上結(jié)構(gòu)體系存在壓力時(shí)，可以針對不同場景特定優(yōu)化，如Nginx客戶端可以橫向擴(kuò)展分?jǐn)偭髁?，Varnish可以部署多臺，分?jǐn)侶TTP加速緩存流量，同樣后端的服務(wù)及Nginx代理都可以橫向擴(kuò)展來滿足業(yè)務(wù)需求。