前后端分離開發部署模式

這周着手開始重新構建官網，OTA1.3V繼續推進，目前分為了企業版，與國外版，老官網那套架構的代碼經過幾千人手的改動，於是索性干掉，采用新的架構模式(前后端分離開發部署模式)，找到下面這篇文章我覺得說的挺好，在開始討論這個話題之前我們先來認識一下傳統的開發模式。

一、傳統開發模式

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

1. PHP 開發有 Smarty模板引擎

2. Java web工程有jsp頁面

3. Python 各個Web框架都有各自的模板引擎

4. NodeJS 的express你懂得

都有一個共同的特點，服務器端后台語言生成解析后的HTML/XML格式返回給客戶端，例如瀏覽器端訪問直接返回解析好的HTML，瀏覽器直接就解釋執行。

二、Ajax過渡

Ajax是把前后端分離部署的推進者，當時網頁局部更新就是未來前后端分離的開端。那什么是前后端分離開發呢？

簡單來說就是前端開發不需要部署后台語言那堆垃圾環境，后端開發也不需要前端寫好的任何程序，后台只管暴露各種API接口提供前端進行數據的增刪改查，不負責生成HTML頁面

前端請求到數據后再動態聲稱dom節點。

三、前端構建

相對於后台來說，前端構建是重點，因為前后端分離開發后側重點在於前端，后端就是一個數據提供，權限控制api。

后端項目通常都帶自己的Server，除了PHP以外，所以后端做PHP開發的還需要一個WebServer，Apache就是經典配合，最近被拋棄換做Nginx了，所以后台環境本來就是偽生產環境。

前端項目還是要搭建一個Server，然后把項目丟里邊才能跑起來調試開發，最笨的直接整一個Apache或者Nginx也可以，但這樣開發還是很痛苦。可以利用Node工具集即可，Node工具集非常多，比如我非常喜歡用的BrowserSync。

四、解決請求問題

前后端分離后，我們只需要Server端告訴我們Api URL即可，那么這會產生一個問題：Ajax跨域。這里就不能使用一般的跨域解決方法去解決，比如jsonp,iframe信使等等，因為我們還有POST請求。

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

生產環境有兩種部署，一種是放到后台項目里，這就沒啥說的，另外一種就是前后端分開部署，那就在前端WebServer處理端寫點轉發規則就好，如Nginx，Apache都支持。

五、靜態資源路徑問題

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

資源與后台項目放一起，后台處理完后需要返回前台一個相對路徑，如果資源時一台單獨的服務器，那就需要返回資源的絕對URL即可。

六、會話

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

最后

前后端分離的弱點，無非有兩點

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

2、不利於蜘蛛（其實現在的部分蜘蛛已經很厲害了，能夠支持H5 C3效果）

強點，

1、Web端就像手機端的App一樣，不需要Cookie/Session，與Server完全分離，易於維護、擴展。一個Server API可以隨意服務多個Web App

2、AngularJS用過了以后，你應該會感覺未來的Web開發模式，AngularJS在幾乎是前后端分離的領航者

3、前端靜態資源與后台API分流，互不影響，甚至不會存在IO問題

4、開發上與后台幾乎同步，互相不影響，特別是基於RESTFul API風格，更是減少了溝通的成本

5、方便各自debug，JAVA開發人員不需要跑到前端開發人員機器上看tomcat控制台的報錯，前端開發人員也不需要跑到后端開發人員的機器上看瀏覽器報錯調試

開發階段目前需要考慮到的問題:

1前端負載的問題

2前端跨域調用問題

3安全性考慮(可能遭遇到相關的刷接口，xss攻擊等)

4用token傳遞表示狀態，token的安全性問題

獲取【下載地址】