前后端分離已成為互聯網項目開發的業界標准使用方式,通過nginx+tomcat的方式(也可以中間加一個nodejs)有效的進行解耦,並且前后端分離會為以后的大型分布式架構、彈性計算架構、微服務架構、多端化服務(多種客戶端,例如:瀏覽器,車載終端,安卓,IOS等等)打下堅實的基礎。這個步驟是系統架構從猿進化成人的必經之路
核心思想:前端html頁面通過ajax調用后端的restuful api接口並使用json數據進行交互
在互聯網架構中服務器的分類如下:
- web服務器:一般指像nginx,apache這類的服務器,他們一般只能解析靜態資源。
- 應用服務器:一般指像tomcat,jetty,resin這類的服務器可以解析動態資源也可以解析靜態資源,但解析靜態資源的能力沒有web服務器好。
注意:一般都是只有web服務器才能被外網訪問,應用服務器只能內網訪問
以前的JavaWeb項目大多數都是Java程序員又當爹又當媽,又搞前端(ajax/jquery/js/html/css等等),又搞后端(java/mysql/oracle等等)
隨着時代的發展,漸漸的許多大中小公司開始把前后端的界限分的越來越明確,前端工程師只管前端的事情,后端工程師只管后端的事情。正所謂術業有專攻
對於后端Java工程師的工作職責(技術路線):
- 把精力放在java基礎,設計模式,jvm原理,spring+springmvc原理及源碼,linux,mysql事務隔離與鎖機制,mongodb,http/tcp,多線程,分布式架構(dubbo,dubbox,spring cloud),彈性計算架構,微服務架構(springboot+zookeeper+docker+jenkins),java性能優化,以及相關的項目管理等等
- 后端追求的是:三高(高並發,高可用,高性能),安全,存儲,業務等等
對於前端工程師的工作職責(技術路線):
- 把精力放在html5,css3,jquery,angularjs,bootstrap,reactjs,vuejs,webpack,less/sass,gulp,nodejs,Google V8引擎,javascript多線程,模塊化,面向切面編程,設計模式,瀏覽器兼容性,性能優化等等。
- 前端追求的是:頁面表現,速度流暢,兼容性,用戶體驗等等
通常我們的JavaWeb項目都是使用了若干后台框架,springmvc/struts + spring + spring jdbc/hibernate/mybatis 等等。大多數項目在java后端都是分了三層,控制層(controller/action),業務層(service/manage),持久層(dao)。控制層負責接收參數,調用相關業務層,封裝數據,以及路由&渲染到jsp頁面。然后jsp頁面上使用各種標簽(jstl/el/struts標簽等)或者手寫java表達式(<%=%>)將后台的數據展現出來,玩的是MVC那套思路。緊接着系統發布,你需要用maven或者eclipse等工具把你的代碼打成一個war包,然后把這個war包發布到你的生產環境下的web容器(tomcat/jboss/weblogic/websphere/jetty/resin)里,對吧?發布完了之后,你要啟動你的web容器,開始提供服務,這時候你通過配置域名,dns等等相關,你的網站就可以訪問了。這樣一來,你的前后端代碼全都在那個war包里了,包括你的js,css,圖片,各種第三方的庫
在瀏覽器中輸入你的網站域名(www.xxx.com),之后發生了什么?瀏覽器通過域名,再通過dns服務器找到你的服務器外網ip,將http請求發送到你的服務器,在tcp3次握手之后(http下面是tcp/ip),通過tcp協議開始傳輸數據,你的服務器得到請求后,開始提供服務,接收參數,之后返回你的應答給瀏覽器,瀏覽器再通過content-type來解析你返回的內容,呈現給用戶
我們先假設你的首頁中有100張圖片,此時,用戶的看似一次http請求,其實並不是一次,用戶在第一次訪問的時候,瀏覽器中不會有緩存,你的100張圖片,瀏覽器要連着請求100次http請求(有人會跟我說http長連短連的問題,不在這里討論),你的服務器接收這些請求,都需要耗費內存去創建socket來玩tcp傳輸(消耗你服務器上的計算資源)。這樣的話,你的服務器的壓力會非常大,因為頁面中的所有請求都是只請求到你這台服務器上,如果1個人還好,如果10000個人並發訪問呢(先不聊服務器集群,這里就說是單實例服務器),那你的服務器能扛住多少個tcp連接?你的帶寬有多大?你的服務器的內存有多大?你的硬盤是高性能的嗎?你能抗住多少IO?你給web服務器分的內存有多大?會不會宕機?
這就是為什么,越是大中型的web應用,他們越是要解耦。理論上你可以把你的數據庫+應用服務+消息隊列+緩存+用戶上傳的文件+日志+等等都扔在一台服務器上,你也不用玩什么服務治理,也不用做什么性能監控,什么報警機制等等。但是這樣把雞蛋都放在一個籃子里,隱患非常大。如果因為一個子應用的內存不穩定導致整個服務器內存溢出而hung住,那你的整個網站就掛掉了
JSP的痛點:
以前的javaWeb項目大多數使用jsp作為頁面層展示數據給用戶,因為流量不高,因此也沒有那么苛刻的性能要求,但現在是大數據時代,對於互聯網項目的性能要求是越來越高
- 動態資源和靜態資源全部耦合在一起,服務器壓力大,因為服務器會收到各種http請求,例如css的http請求,js的,圖片的等等。一旦服務器出現狀況,前后台一起玩完,用戶體驗極差。
- UI出好設計圖后,前端工程師只負責將設計圖切成html,需要由java工程師來將html套成jsp頁面,出錯率較高,修改問題時需要雙方協同開發,效率低下。
- jsp必須要在支持java的web服務器里運行(例如tomcat,jetty,resin等),無法使用nginx等(nginx據說單實例http並發高達5w,這個優勢要用上),性能提不上來。
- 第一次請求jsp,必須要在web服務器中編譯成servlet,第一次運行會較慢。
- 每次請求jsp都是訪問servlet再用輸出流輸出的html頁面,效率沒有直接使用html高。
- jsp內有較多標簽和表達式,前端工程師在修改頁面時會遇到很多痛點。
- 如果jsp中的內容很多,頁面響應會很慢,因為是同步加載。
- 需要前端工程師使用java的ide(例如eclipse),以及需要配置各種后端的開發環境,你們有考慮過前端工程師的感受嗎
基於上述的一些痛點,我們應該把整個項目實現前后端真正的解耦!
前后分離的優勢:
1.可以實現真正的前后端解耦,前端服務器使用nginx。
前端/WEB服務器放的是css,js,圖片等等一系列靜態資源(甚至你還可以css,js,圖片等資源放到特定的文件服務器,例如阿里雲的oss,並使用cdn加速),前端服務器負責控制頁面引用&跳轉&路由,前端頁面異步調用后端的接口,后端/應用服務器使用tomcat(把tomcat想象成一個數據提供者),加快整體響應速度。 (這里需要使用一些前端工程化的框架比如nodejs,react,router,react,redux,webpack)
2.發現bug,可以快速定位是誰的問題,不會出現互相踢皮球的現象。
頁面邏輯,跳轉錯誤,瀏覽器兼容性問題,腳本錯誤,頁面樣式等問題,全部由前端工程師來負責。 接口數據出錯,數據沒有提交成功,應答超時等問題,全部由后端工程師來解決。 雙方互不干擾,前端與后端是相親相愛的一家人。
3.在大並發情況下,可以同時水平擴展前后端服務器,比如淘寶的一個首頁就需要2000+台前端服務器做集群來抗住日均多少億+的日均pv。
4.減少后端服務器的並發/負載壓力 除了接口以外的其他所有http請求全部轉移到前端nginx上,接口的請求調用tomcat,參考nginx反向代理tomcat。 且除了第一次頁面請求外,瀏覽器會大量調用本地緩存。
5.即使后端服務暫時超時或者宕機了,前端頁面也會正常訪問,只不過數據刷不出來而已。
6.也許你也需要有微信相關的輕應用,那樣你的接口完全可以共用,如果也有app相關的服務, 那么只要通過一些代碼重構,也可以大量復用接口,提升效率。(多端應用)
7.頁面顯示的東西再多也不怕,因為是異步加載。
8.nginx支持頁面熱部署,不用重啟服務器,前端升級更無縫。
9.增加代碼的維護性&易讀性(前后端耦在一起的代碼讀起來相當費勁)。
10.提升開發效率,因為可以前后端並行開發,而不是像以前的強依賴。
11.在nginx中部署證書,外網使用https訪問,並且只開放443和80端口,其他端口一律關閉(防止黑客端口掃描),內網使用http,性能和安全都有保障。
12.前端大量的組件代碼得以復用,組件化,提升開發效率,抽出來!
總結一下新的方式的請求步驟: 大量並發瀏覽器請求--->web服務器集群(nginx)--->應用服務器集群(tomcat)--->文件/數據庫/緩存/消息隊列服務器集群 同時又可以玩分模塊,還可以按業務拆成一個個的小集群,為后面的架構升級做准備