web前后端分離開發(fā)部署模式

轉(zhuǎn)自:http://www.qttc.net/201506464.html(點(diǎn)擊閱讀全文跳轉(zhuǎn)自原頁)

在開始討論這個(gè)話題之前我們先來認(rèn)識一下傳統(tǒng)的開發(fā)模式。

一、傳統(tǒng)開發(fā)模式

相信很多做過Web開發(fā)童鞋應(yīng)該都會經(jīng)歷這樣一種開發(fā)模式，利用后端語言提供的模版引擎編寫HTML／XML頁面，比如：

PHP 開發(fā)有 Smarty模板引擎；Java web工程有jsp頁面；Python 各個(gè)Web框架都有各自的模板引擎；NodeJS 的express你懂得

1. 
   

都有一個(gè)共同的特點(diǎn)，服務(wù)器端后臺語言生成解析后的HTML/XML格式返回給客戶端，例如瀏覽器端訪問直接返回解析好的HTML，瀏覽器直接就解釋執(zhí)行。

二、Ajax過渡

Ajax是把前后端分離部署的推進(jìn)者，當(dāng)時(shí)網(wǎng)頁局部更新就是未來前后端分離的開端。那什么是前后端分離開發(fā)呢？

簡單來說就是前端開發(fā)不需要部署后臺語言那堆垃圾環(huán)境，后端開發(fā)也不需要前端寫好的任何程序，后臺只管暴露各種API接口提供前端進(jìn)行數(shù)據(jù)的增刪改查，不負(fù)責(zé)生成HTML頁面

前端請求到數(shù)據(jù)后再動(dòng)態(tài)聲稱dom節(jié)點(diǎn)。

三、前端構(gòu)建

相對于后臺來說，前端構(gòu)建是重點(diǎn)，因?yàn)榍昂蠖朔蛛x開發(fā)后側(cè)重點(diǎn)在于前端，后端就是一個(gè)數(shù)據(jù)提供，權(quán)限控制api。

后端項(xiàng)目通常都帶自己的Server，除了PHP以外，所以后端做PHP開發(fā)的還需要一個(gè)WebServer，Apache就是經(jīng)典配合，最近被拋棄換做Nginx了，所以后臺環(huán)境本來就是偽生產(chǎn)環(huán)境。

前端項(xiàng)目還是要搭建一個(gè)Server，然后把項(xiàng)目丟里邊才能跑起來調(diào)試開發(fā)，最笨的直接整一個(gè)Apache或者Nginx也可以，但這樣開發(fā)還是很痛苦?？梢岳肗ode工具集即可，Node工具集非常多，比如我非常喜歡用的BrowserSync。

四、解決請求問題

前后端分離后，我們只需要Server端告訴我們Api URL即可，那么這會產(chǎn)生一個(gè)問題：Ajax跨域。這里就不能使用一般的跨域解決方法去解決，比如jsonp,iframe信使等等，因?yàn)槲覀冞€有POST請求。

于是Http Proxy類工具就有用了，比如我就會在BrowserSync加入中間件判斷每一個(gè)請求，如果是/api前綴就會代理到API Server端，API Server端收到數(shù)據(jù)后再返回給BrowserSync，BrowserSync再返回給瀏覽器端。這樣就解決跨域請求的問題。

生產(chǎn)環(huán)境有兩種部署，一種是放到后臺項(xiàng)目里，這就沒啥說的，另外一種就是前后端分開部署，那就在前端WebServer處理端寫點(diǎn)轉(zhuǎn)發(fā)規(guī)則就好，如Nginx，Apache都支持。

五、靜態(tài)資源路徑問題

如果你的項(xiàng)目有上傳資源功能，那自然就會產(chǎn)生用戶資源，那前后端分離后，如何來處理這個(gè)問題呢？得先看模式。

資源與后臺項(xiàng)目放一起，后臺處理完后需要返回前臺一個(gè)相對路徑，如果資源時(shí)一臺單獨(dú)的服務(wù)器，那就需要返回資源的絕對URL即可。

六、會話

Web項(xiàng)目最頭疼的就是無狀態(tài)導(dǎo)致會話問題，傳統(tǒng)的Web項(xiàng)目都使用Session/Cookie，但在前后端分離，集群部署模式下這Session明顯缺陷太多。token方式已經(jīng)是當(dāng)前Web端解決會話的主流，并且有henduo開源好用的token生成管理程序，基本上拿來就能用。

最后

前后端分離的弱點(diǎn)，無非有兩點(diǎn)：

1、前端負(fù)載增多，如請求到列表后，前端需要自己遍歷數(shù)據(jù)集聲稱DOM節(jié)點(diǎn) （目前絕大多數(shù)用戶的電腦配置都不差，而且瀏覽器內(nèi)核已經(jīng)不在是滿身缺陷的IE瀏覽器了）

2、不利于蜘蛛（其實(shí)現(xiàn)在的部分蜘蛛已經(jīng)很厲害了，能夠支持H5 C3效果）。

強(qiáng)點(diǎn)：

1、Web端就像手機(jī)端的App一樣，不需要Cookie/Session，與Server完全分離，易于維護(hù)、擴(kuò)展。一個(gè)Server API可以隨意服務(wù)多個(gè)Web App

2、AngularJS用過了以后，你應(yīng)該會感覺未來的Web開發(fā)模式，AngularJS在幾乎是前后端分離的領(lǐng)航者

3、前端靜態(tài)資源與后臺API分流，互不影響，甚至不會存在IO問題

4、開發(fā)上與后臺幾乎同步，互相不影響，特別是基于RESTFul API風(fēng)格，更是減少了溝通的成本

5、方便各自debug，JAVA開發(fā)人員不需要跑到前端開發(fā)人員機(jī)器上看tomcat控制臺的報(bào)錯(cuò)，前端開發(fā)人員也不需要跑到后端開發(fā)人員的機(jī)器上看瀏覽器報(bào)錯(cuò)調(diào)試