前言

最近這一段時(shí)間由于Nodejs的逐漸成熟和日趨穩(wěn)定，越來越多的公司中的前端團(tuán)隊(duì)開始嘗試使用Nodejs來練一下手，嘗一嘗鮮。

一般的做法都是將原本屬于后端的一部分相對(duì)于業(yè)務(wù)不是很重要的功能遷移到Nodejs上面來，也有一些公司將NodeJS作為前后端分離的一個(gè)解決方案去施行。而像淘寶網(wǎng)這類的大型網(wǎng)站也很早的完成了前后端的分離，給我們這樣的后來者提供了寶貴的經(jīng)驗(yàn)。

同樣，我們的大網(wǎng)盤團(tuán)隊(duì)也早在去年早早就開始了緊鑼密布的準(zhǔn)備工作，這目前工作也做的差不多了，現(xiàn)在我就來總結(jié)一下在過程中遇到的坑點(diǎn)以及注意事項(xiàng)。

認(rèn)識(shí)前后端分離

在傳統(tǒng)的web應(yīng)用開發(fā)中，大多數(shù)的程序員會(huì)將瀏覽器作為前后端的分界線。將瀏覽器中為用戶進(jìn)行頁面展示的部分稱之為前端，而將運(yùn)行在服務(wù)器，為前端提供業(yè)務(wù)邏輯和數(shù)據(jù)準(zhǔn)備的所有代碼統(tǒng)稱為后端。

由于前后端分離這個(gè)概念相對(duì)來說剛出現(xiàn)不久，很多人都是只聞其聲，不見其形，所以可能會(huì)對(duì)它產(chǎn)生一些誤解，誤以為前后端分離只是一種web應(yīng)用開發(fā)模式，只要在web應(yīng)用的開發(fā)期進(jìn)行了前后端開發(fā)工作的分工就是前后端分離。

其實(shí)前后端分離并不只是開發(fā)模式，而是web應(yīng)用的一種架構(gòu)模式。在開發(fā)階段，前后端工程師約定好數(shù)據(jù)交互接口，實(shí)現(xiàn)并行開發(fā)和測(cè)試；在運(yùn)行階段前后端分離模式需要對(duì)web應(yīng)用進(jìn)行分離部署，前后端之前使用HTTP或者其他協(xié)議進(jìn)行交互請(qǐng)求。然而作為一種架構(gòu)模式，我們?cè)趯?shí)施的過程中主要對(duì)以下四個(gè)方面來進(jìn)行比較和重新認(rèn)識(shí)。

前后端分離大概可以從四個(gè)方面來理解：

交互形式

代碼組織方式

開發(fā)模式

數(shù)據(jù)接口規(guī)范流程

一、交互形式

在前后端分離架構(gòu)中，后端只需要負(fù)責(zé)按照約定的數(shù)據(jù)格式向前端提供可調(diào)用的API服務(wù)即可。前后端之間通過HTTP請(qǐng)求進(jìn)行交互，前端獲取到數(shù)據(jù)后，進(jìn)行頁面的組裝和渲染，最終返回給瀏覽器。

二、代碼組織方式

在傳統(tǒng)架構(gòu)模式中，前后端代碼存放于同一個(gè)代碼庫中，甚至是同一工程目錄下。頁面中還夾雜著后端代碼。前后端工程師進(jìn)行開發(fā)時(shí)，都必須把整個(gè)項(xiàng)目導(dǎo)入到開發(fā)工具中。

而前后端分離模式在代碼組織形式上有以下兩種:

·半分離

前后端共用一個(gè)代碼庫，但是代碼分別存放在兩個(gè)工程中。后端不關(guān)心或很少 關(guān)心前端元素的輸出情況，前端不能獨(dú)立進(jìn)行開發(fā)和測(cè)試，項(xiàng)目中缺乏前后端 交互的測(cè)試用例。

·分離

前后端代碼庫分離，前端代碼中有可以進(jìn)行Mock測(cè)試(通過構(gòu)造虛擬測(cè)試對(duì) 象以簡化測(cè)試環(huán)境的方法)的偽后端，能支持前端的獨(dú)立開發(fā)和測(cè)試。而后端 代碼中除了功能實(shí)現(xiàn)外，還有著詳細(xì)的測(cè)試用例，以保證API的可用性，降低 集成風(fēng)險(xiǎn)。

三、開發(fā)模式

我們之前的架構(gòu)屬于傳統(tǒng)的MVC架構(gòu)，整體沒有進(jìn)行前后端分離，在項(xiàng)目的開發(fā)階段，前端工程師負(fù)責(zé)編寫HTML，完成前端的頁面設(shè)計(jì)并套頁面，然后再使用模板技術(shù)將寫好的前端代碼轉(zhuǎn)換為Smarty腳本，同時(shí)內(nèi)嵌一些后端提供的模板變量和一些邏輯操作。應(yīng)用運(yùn)行期，將全部代碼進(jìn)行打包，和后端代碼部署到同一服務(wù)器上，同時(shí)會(huì)進(jìn)行簡單的動(dòng)靜態(tài)分離部署。

此時(shí)，應(yīng)用的開發(fā)流程如下圖所示。

而在實(shí)現(xiàn)前后端分離架構(gòu)之后，前端工程師只需要編寫HTML、js、CSS等前端資源，然后通 過HTTP請(qǐng)求調(diào)用后端提供的服務(wù)即可。除了開發(fā)期的分離，在運(yùn)行期前后端資源也 會(huì)進(jìn)行分離部署。????????

前后端分離之后，開發(fā)流程將如下圖所示。

通過上面的兩幅流程圖，不難發(fā)現(xiàn)，在開發(fā)模式上，前后段分離不僅僅只是工程師的分工開發(fā)，更重要的意義在于實(shí)現(xiàn)了前后端的并行開發(fā)，簡化了開發(fā)流程。

四、數(shù)據(jù)接口規(guī)范流程

在開發(fā)期間前后端共同商定好數(shù)據(jù)接口的交互形式和數(shù)據(jù)格式。然后實(shí)現(xiàn)前后端的并行開發(fā)，其中前端工程師再開發(fā)完成之后可以獨(dú)自進(jìn)行mock測(cè)試，而后端也可以使用接口測(cè)試平臺(tái)進(jìn)行接口自測(cè)，然后前后端一起進(jìn)行功能聯(lián)調(diào)并校驗(yàn)格式，最終進(jìn)行自動(dòng)化測(cè)試。

分離的四個(gè)好處

前后端分離模式和傳統(tǒng)的web應(yīng)用架構(gòu)相比有很大的不同，到底分還是不分，這還真是個(gè)問題。

從目前應(yīng)用軟件開發(fā)的發(fā)展趨勢(shì)來看，主要有兩方面需要注意：

? ? ? ? 1、越來越注重用戶體驗(yàn)，隨著互聯(lián)網(wǎng)的發(fā)展，開始多終端化。

????????2、大型應(yīng)用架構(gòu)模式正在向云化、微服務(wù)化發(fā)展。

我們主要通過前后端分離架構(gòu)，為我們帶來以下四個(gè)方面的提升：

·為優(yōu)質(zhì)產(chǎn)品打造精益團(tuán)隊(duì)

????????通過將開發(fā)團(tuán)隊(duì)前后端分離化，讓前后端工程師只需要專注于前端或后端的開發(fā)工作，是的前后端工程師實(shí)現(xiàn)自治，培養(yǎng)其獨(dú)特的技術(shù)特性，然后構(gòu)建出一個(gè)全棧式的精益開發(fā)團(tuán)隊(duì)。

·提升開發(fā)效率

????????前后端分離以后，可以實(shí)現(xiàn)前后端代碼的解耦，只要前后端溝通約定好應(yīng)用所需接口以及接口參數(shù)，便可以開始并行開發(fā)，無需等待對(duì)方的開發(fā)工作結(jié)束。與此同時(shí)，即使需求發(fā)生變更，只要接口與數(shù)據(jù)格式不變，后端開發(fā)人員就不需要修改代碼，只要前端進(jìn)行變動(dòng)即可。如此一來整個(gè)應(yīng)用的開發(fā)效率必然會(huì)有質(zhì)的提升。

·完美應(yīng)對(duì)復(fù)雜多變的前端需求

????????如果開發(fā)團(tuán)隊(duì)能完成前后端分離的轉(zhuǎn)型，打造優(yōu)秀的前后端團(tuán)隊(duì)，開發(fā)獨(dú)立化，讓開發(fā)人員做到專注專精，開發(fā)能力必然會(huì)有所提升，能夠完美應(yīng)對(duì)各種復(fù)雜多變的前端需求。

·增強(qiáng)代碼可維護(hù)性

????前后端分離后，應(yīng)用的代碼不再是前后端混合，只有在運(yùn)行期才會(huì)有調(diào)用依賴關(guān)系。

應(yīng)用代碼將會(huì)變得整潔清晰，不論是代碼閱讀還是代碼維護(hù)都會(huì)比以前輕松。

需要進(jìn)行前后端分離的場(chǎng)景

任何一項(xiàng)技術(shù)以及架構(gòu)都不是適用于任何場(chǎng)景，前后端分離同樣也是如此。雖然前后端分離架構(gòu)能帶來許多的好處，但前提是建立在開發(fā)團(tuán)隊(duì)合適的基礎(chǔ)上的。

而我們百度網(wǎng)盤就屬于那種：

????1、頁面布局復(fù)雜，使用了主題和樣式。

????2、需要有較高的頁面渲染效果

????3、前端頁面中包含復(fù)雜業(yè)務(wù)邏輯

????4、頁面需要渲染的數(shù)據(jù)量較大

像這種"重前端"的應(yīng)用我們綜合考慮了各種情況，最終決定采用前后端分離架構(gòu)。

部署方案

前后端分離之后，應(yīng)用在部署時(shí)也需要進(jìn)行前后端分離。在進(jìn)行前后端分離方案選擇時(shí)，需要結(jié)合項(xiàng)目的實(shí)際情況和用戶來考慮。

分離之前的架構(gòu)

前后端分離之前，網(wǎng)盤的后端架構(gòu)是Nginx服務(wù)和后端的PHP服務(wù)以及前端的靜態(tài)資源都是部署在同一臺(tái)服務(wù)器上。當(dāng)瀏覽器發(fā)起訪問請(qǐng)求時(shí)，如何請(qǐng)求的是靜態(tài)資源，Nginx直接把靜態(tài)資源返回給服務(wù)器；如果請(qǐng)求的是頁面或后端服務(wù)，則經(jīng)Nginx將請(qǐng)求轉(zhuǎn)發(fā)到后端的PHP服務(wù)器，完成響應(yīng)后經(jīng)Nginx返回到瀏覽器。

注：此圖中的Nginx屬于后端機(jī)，主要針對(duì)前端機(jī)Nginx轉(zhuǎn)發(fā)過來的請(qǐng)求進(jìn)行識(shí)別弄轉(zhuǎn)發(fā)給本機(jī)的PHP服務(wù)；前端機(jī)和后端機(jī)各有一個(gè)Nginx服務(wù)。

這個(gè)方案比較簡單，易于實(shí)現(xiàn)，而且能到達(dá)前后端解耦的目的。而且很多公司目前都是基于這種架構(gòu)或者一定的變形來實(shí)現(xiàn)的web應(yīng)用。

但是對(duì)于頁面量比較大，需要有良好SEO的應(yīng)用來說，此方案缺點(diǎn)也較為明顯。因?yàn)?Nginx只是向?yàn)g覽器返回頁面靜態(tài)資源，而國內(nèi)的搜索引擎爬蟲只會(huì)抓取靜態(tài)數(shù)據(jù)， 不會(huì)解析頁面中的js，這使得應(yīng)用得不到良好的搜索引擎支持。同時(shí)因?yàn)镹ginx不會(huì)進(jìn)行頁面的組裝渲染，需要把靜態(tài)頁面返回到瀏覽器，然后完成渲染工作，這加重了瀏覽器的渲染負(fù)擔(dān)。

另外，由于這種架構(gòu)使得前端工程師的工作范圍只局限在了瀏覽器一側(cè)，導(dǎo)致在進(jìn)行一些特殊的性能優(yōu)化時(shí)，前端工程師無法獨(dú)立完成，還需要后端開發(fā)人員的配合，這也一定程度上影響了雙方的進(jìn)度。

分離之后的架構(gòu)

前后端分離之后，我們?cè)谠鹊募軜?gòu)只上再單獨(dú)增加了一個(gè)Node Server作為中間層，將前端資源部署到Node Server中。Node Server還實(shí)現(xiàn)了一層數(shù)據(jù)代理服務(wù)，負(fù)責(zé)與提供數(shù)據(jù)的后端服務(wù)進(jìn)行通信。

并且還在這個(gè)基礎(chǔ)上增加并使用了前端機(jī)（前端機(jī)是對(duì)所有的請(qǐng)求進(jìn)行預(yù)處理和負(fù)載均衡，然后再轉(zhuǎn)發(fā)給后端機(jī)。）的Nginx服務(wù)，瀏覽器發(fā)起的請(qǐng)求經(jīng)過前端機(jī)的Nginx進(jìn)行分發(fā)，URL請(qǐng)求統(tǒng)一分發(fā)到Node Server，在Node Server中根據(jù)請(qǐng)求類型從后端服務(wù)器上通過RPC服務(wù)請(qǐng)求頁面的模板數(shù)據(jù)，然后進(jìn)行頁面的組裝和渲染；API請(qǐng)求則直接轉(zhuǎn)發(fā)到后端服務(wù)器，完成響應(yīng)。

注：此圖中的Nginx屬于前端機(jī)。

前后端分離方案對(duì)比

實(shí)現(xiàn)和部署

下一篇將為大家分享百度網(wǎng)盤前后端分離中的Node Server基礎(chǔ)架構(gòu)、前端路由管理、模板數(shù)據(jù)交互以及運(yùn)維和環(huán)境部署相關(guān)內(nèi)容。

結(jié)語

前后端分離并非僅僅只是前后端開發(fā)的分工，而是在開發(fā)期進(jìn)行代碼存放分離、前后 端開發(fā)職責(zé)分離，前后端能夠獨(dú)立進(jìn)行開發(fā)測(cè)試;在運(yùn)行期進(jìn)行應(yīng)用部署分離，前后 端之間通過HTTP請(qǐng)求進(jìn)行通訊。前后端分離的開發(fā)模式與傳統(tǒng)模式相比，能為我們 提升開發(fā)效率、增強(qiáng)代碼可維護(hù)性，讓我們有規(guī)劃地打造一個(gè)前后端并重的精益開發(fā) 團(tuán)隊(duì)，更好地應(yīng)對(duì)越來越復(fù)雜多變的Web應(yīng)用開發(fā)需求。