•  單個(gè)項(xiàng)目的前后端分離好做，那如果n多個(gè)項(xiàng)目一起呢?
• 如何基于常規(guī)的前后端分離模式，做更高效的提升
• 前端分離模式的PAAS能力如何提供?

[[284532]]

背景

隨著部門內(nèi)前端的業(yè)務(wù)線和平臺(tái)越來越多，前端的職責(zé)也逐漸加重，隨之而來的就是各種問題和挑戰(zhàn)。目前前端團(tuán)隊(duì)共有31個(gè)人，共負(fù)責(zé)15+業(yè)務(wù)/項(xiàng)目和平臺(tái)，前端項(xiàng)目的總PV最低也在2000萬以上，由于是工具類型的應(yīng)用，MAU(月活用戶)也有1億以上。面對這么大的用戶體量和業(yè)務(wù)壓力，團(tuán)隊(duì)在開發(fā)和維護(hù)的過程中也逐漸遇到了各種問題。

首先是基礎(chǔ)設(shè)施的問題，沒有完善且統(tǒng)一的標(biāo)準(zhǔn)規(guī)范和設(shè)施，導(dǎo)致每個(gè)項(xiàng)目的技術(shù)棧和實(shí)現(xiàn)思路各不相同，功能復(fù)用率不高。在成員提升方面，這么多的成員如何讓他們在技術(shù)和解決問題的能力上都有所提升。另外還有其他角色更加關(guān)注的效能提升的問題，包括前端開發(fā)效率的整體提升，以及上下游協(xié)作效率的提升。最后是整體穩(wěn)定性方面的保證，需要在第一時(shí)間發(fā)現(xiàn)錯(cuò)誤和體驗(yàn)相關(guān)的問題，這又是一個(gè)很重要的問題。

解決思路

面臨以上的問題，我們從不同的角度和維度出發(fā)嘗試解決。第一個(gè)維度是從外部到內(nèi)部，主要是從流量的出發(fā)，依次是前端、視圖層、后端等，以及整體的穩(wěn)定性保證等。第二個(gè)維度就是從上游到下游，從項(xiàng)目迭代的流程入手，從開始的UE/UI同學(xué)的交互和視覺設(shè)計(jì)，到FE同學(xué)的開發(fā)，再到下游QA同學(xué)的測試。優(yōu)化協(xié)作流程和細(xì)節(jié)，提升整體的協(xié)作效率。

解決方法

經(jīng)過兩個(gè)維度的拆解，我們大致提出了四個(gè)解決方法。其中屬于第一維度的有兩個(gè)，分別是統(tǒng)一視圖服務(wù)和自動(dòng)化監(jiān)控，屬于第二維度的有前端組件庫和物料中臺(tái)。

本文章的重點(diǎn)就是講解統(tǒng)一視圖服務(wù)，如何基于基礎(chǔ)的前后端分離模式，更好地解決問題和提升效能。

統(tǒng)一視圖服務(wù)

背景

前端除了自己的本質(zhì)工作外，還會(huì)負(fù)責(zé)前后端之間的膠水層，也叫視圖層，主要包括路由控制、視圖渲染、數(shù)據(jù)處理/聚合、資源管理、CDN優(yōu)化等。在維護(hù)視圖層的過程中，發(fā)現(xiàn)大部分的業(yè)務(wù)之間的視圖層使用的框架和實(shí)現(xiàn)方式都不相同，而且每一個(gè)大的業(yè)務(wù)方向都有自己獨(dú)立的視圖服務(wù)。這樣導(dǎo)致了前端對渲染服務(wù)的開發(fā)維護(hù)，學(xué)習(xí)和接入成本都很高。然后是職責(zé)優(yōu)化，徹底梳理清除前后端之間的模糊地帶，讓前后端的職責(zé)更加清晰，專注于提高各方的生產(chǎn)力。最后在職責(zé)上完成優(yōu)化后，在整體架構(gòu)上可以徹底與后端一起完成微服務(wù)化。

解決方法

面臨以上問題，首先是統(tǒng)一部門內(nèi)不同的渲染服務(wù)(視圖層)，進(jìn)行歸一化管理，第二是彈性擴(kuò)展的能力，實(shí)現(xiàn)最小成本接入不同的項(xiàng)目和能力擴(kuò)展。第三是同構(gòu)支持，統(tǒng)一解決不同場景下SEO、整體性能提升和用戶體驗(yàn)的問題。最后是微服務(wù)架構(gòu)，接入后端的微服務(wù)架構(gòu)，讓服務(wù)更加的獨(dú)立。

難點(diǎn)

首先就是性能要求，對多業(yè)務(wù)/服務(wù)的支持能力，數(shù)據(jù)源聚合能力，千萬級(jí)PV的請求壓力應(yīng)對問題。當(dāng)然最主要的是多產(chǎn)品線接入的成本以及接入之后的性能和維護(hù)問題。

第二是靈活/穩(wěn)定的要求，提供平臺(tái)化支持，保證服務(wù)間正交關(guān)系，整體平臺(tái)化的監(jiān)控、運(yùn)維。

性能要求

對于性能要求的保障，如下圖：

流量通過BGW和BFE之后，會(huì)到達(dá)網(wǎng)盤微服務(wù)的網(wǎng)關(guān)，負(fù)責(zé)分發(fā)請求，用戶鑒權(quán)，流量分級(jí)和其他功能。gateway主要會(huì)將請求轉(zhuǎn)發(fā)到統(tǒng)一視圖服務(wù)或后端服務(wù)。統(tǒng)一視圖服務(wù)集群中的容器內(nèi)部都會(huì)有inner router和渲染服務(wù)。Gateway將請求轉(zhuǎn)發(fā)到視圖服務(wù)后，先被inner router接收，它負(fù)責(zé)下游渲染服務(wù)的拓?fù)浜土髁刻幚?，再反向代理到渲染服?wù)如果渲染服務(wù)的壓力過大，會(huì)通知inner router，讓它再去請求其他的渲染服務(wù)實(shí)例，保證可用性。渲染服務(wù)和后端服務(wù)的交互使用BNS和UFC實(shí)現(xiàn)，內(nèi)部對協(xié)議做了統(tǒng)一的處理，也包括IDC機(jī)房優(yōu)化。借助網(wǎng)盤微服務(wù)的能力，保證了在性能上的要求。

以上是視圖層所提供的最基礎(chǔ)的能力，但是為了體現(xiàn)統(tǒng)一管理不同產(chǎn)品線的能力，我們還提供了部分PAAS的能力，如接入層配置，負(fù)責(zé)在網(wǎng)關(guān)和inner router上自行處理流量和拓?fù)?。一鍵工具包，提供快速初始基礎(chǔ)框架和運(yùn)行時(shí)，及守護(hù)進(jìn)程、監(jiān)控、日志處理等功能。然后接入的業(yè)務(wù)方就可以只需對業(yè)務(wù)代碼進(jìn)行增量上線即可。

另外，還對渲染服務(wù)進(jìn)行部署級(jí)別分級(jí)，提供公共部署和私有化部署，公共部署為內(nèi)部平臺(tái)服務(wù)，私有部署為線上產(chǎn)品服務(wù)。

穩(wěn)定性和靈活性保障

對于靈活和穩(wěn)定保證。借鑒微內(nèi)核架構(gòu)的思路，抽離出通用的功能和機(jī)制，封裝成系統(tǒng)核心。它是一個(gè)服務(wù)實(shí)現(xiàn)的最小功能集。

在core的外面的增加了對應(yīng)的企業(yè)內(nèi)通用服務(wù)，IDC優(yōu)化及跟蹤機(jī)制，鑒權(quán)和數(shù)據(jù)聚合能力，封裝成通用企業(yè)級(jí)框架。

在企業(yè)框架的外面，又增加了網(wǎng)盤內(nèi)通用的功能，包括渲染機(jī)制，APP隔離，AB測試灰度發(fā)布，封裝成部門級(jí)通用框架。

最后在部門框架上運(yùn)行業(yè)務(wù)和服務(wù)，包括商業(yè)化，內(nèi)容商城，開放平臺(tái)，和網(wǎng)盤的業(yè)務(wù)。

通過這四層，讓應(yīng)用可以在橫向和縱向兩個(gè)維度上任意伸縮。提供非常強(qiáng)的靈活擴(kuò)展能力。

整體架構(gòu)

整體架構(gòu)從上到下依次是應(yīng)用框架，部門框架，企業(yè)框架，基礎(chǔ)服務(wù)和底層支持。通過在每一層增加不同的能力然后使用類似compose的操作擴(kuò)展在基礎(chǔ)服務(wù)上。

最后，通過這樣一系列的設(shè)計(jì)和操作，保證了整個(gè)視圖服務(wù)的性能、對靈活、穩(wěn)定和擴(kuò)展性的要求。

收益

1. 部門內(nèi)的前端項(xiàng)目/平臺(tái)統(tǒng)一在統(tǒng)一視圖服務(wù)PAAS上管理
2. 更前的場景實(shí)驗(yàn)和落地的能力
3. 產(chǎn)品性能大幅度提升
4. 大幅度節(jié)省硬件資源，現(xiàn)在的產(chǎn)品線機(jī)器在幾百臺(tái)(全量業(yè)務(wù))以上，而統(tǒng)一管理之后僅需20個(gè)1核CPU容器(視圖渲染服務(wù))即可滿足。

關(guān)于壓測數(shù)據(jù)

20個(gè)容器支持2000萬PV(926QPS)，正常性能要求下可支持1000QPS，意味著每秒發(fā)送的1000個(gè)事務(wù)處理中，95%的請求都會(huì)在1s內(nèi)處理完畢并返回。

而且，是線上整體上下游的測試數(shù)據(jù)，不是單純的測試nodejs，因?yàn)閱渭兊臏y試nodejs沒有意義，畢竟沒有任何一個(gè)線上服務(wù)會(huì)只用一個(gè)nodejs實(shí)現(xiàn)。

服務(wù)的吞吐量提升在427%，并發(fā)下的平響提升74.7%，非并發(fā)下的提升是47.7%。

關(guān)于不能很好量化的收益

1. 統(tǒng)一視圖服務(wù)提供PAAS能力，使視圖層統(tǒng)一管理，節(jié)省資源，提升開發(fā)和接入效率。
2. 職責(zé)分離，專注核心業(yè)務(wù)
3. 給前端提供更多的可能性，使用各種花活兒提升效率。