網站的動靜分離實踐(動靜分離)

1. 動靜分離的實作思路

動靜分離是将網站靜态資源（HTML，JavaScript，CSS，img等檔案）與背景應用分開部署，提高使用者通路靜态代碼的速度，降低對背景應用通路。

動靜分離的一種做法是将靜态資源部署在nginx上，背景項目部署到應用伺服器上，根據一定規則靜态資源的請求全部請求nginx伺服器，達到動靜分離的目标。

1.1 靜态資源部署至CDN上

我們的方案是直接将靜态資源全部存放在CDN伺服器上。因為之前項目中的JavaScript,CSS以及img檔案都是存放在CDN伺服器上，将HTML檔案一起存放到CDN上之後，可以将靜态資源統一放置在一種伺服器上，便于前端進行維護；而且使用者在通路靜态資源時，可以很好利用CDN的優點——CDN系統能夠實時地根據網絡流量和各節點的連接配接、負載狀況以及到使用者的距離和響應時間等綜合資訊将使用者的請求重新導向離使用者最近的服務節點上。

1.2 後端API提供資料

後端應用提供API，根據前端的請求進行處理，并将處理結果通過JSON格式傳回至前端。目前應用主要采用Java平台開發，是以應用伺服器主要是Tomcat伺服器，現在也開始有部分應用采用 node進行開發，應用伺服器也開始使用node伺服器。

1.3 前後端域名

動靜分離因為靜态資源和應用服務分别部署在不同的伺服器上，是以會面臨域名政策的選擇。

• 相同域名

  采用相同域名下，使用者請求api時可以避免跨域所帶來的問題，相對開發更為快速，工作量也相對小一些。

• 不同域名

  前後端采用不同域名時，需要前後端開發時相容跨域請求的情況，開發量相對上一種會稍多一些。解決跨域方式最常用的方式就是采用JSONP，還有一種解決方式使用CORS（HTTP通路控制）允許某些域名下的跨域請求。

目前在我們的項目中JSONP方式更多，CORS因為需要浏覽器支援，是以隻會在APP内嵌HTML5，且需要POST方式時中使用。

采用不同域名的方式優點也是非常明顯的，不同域名采用兩個域名伺服器，不同的域名伺服器根據請求的不同采用不同的負載均衡政策；而且不同域名也可以郵箱方式前端攜帶過多的Cookie。

2. 動靜分離的實作優缺點

2.1 優點

• api接口服務化：動靜分離之後，後端應用更為服務化，隻需要通過提供api接口即可，可以為多個功能子產品甚至是多個平台的功能使用，可以有效的節省後端人力，更便于功能維護。
• 前後端開發并行：前後端隻需要關心接口協定即可，各自的開發互相不幹擾，并行開發，并行自測，可以有效的提高開發時間，也可以有些的減少聯調時間
• 減輕後端伺服器壓力，提高靜态資源通路速度：後端不用再将模闆渲染為html傳回給使用者端，且靜态伺服器可以采用更為專業的技術提高靜态資源的通路速度。

2.2 缺點

• 不利于網站 SEO（搜尋引擎優化） :搜尋引擎的網絡爬蟲一般是根據url通路頁面，擷取頁面的内容後去掉沒用的資訊例如：CSS，JavaScript，然後分析剩下的文本内容；動靜分離架構模式前端資料即在是由JavaScript來完成，這就會導緻網絡爬蟲得到的資訊部分丢失。在開發中可以采用前端緩存不經常變化資料的方式來解決，隻有哪些經常發生變化的資料才每次向後端請求。
• 開發量變大，前後端交流成本升高：後端api傳回的資料，往往是有自身邏輯在内的，比如傳回資料中的包含status（1-進行中，2-處理成功，3-處理失敗），前端需要了解status的不同含義，對應的前端操作需要了解（如，status =1 or status = 2，不可送出）。
• 在業務高速發展時需要慎重考慮：因為開發量變大，如果在業務開始階段，缺乏前端又要求開發速度很快，就需要慎重考慮這種方式的實作成本對業務發展的影響。

3. 實作案例

這個是在公司做的内嵌到app裡的HTML5頁面