談談渲染,玩玩nginx——前后端分離,轉發請求到Tomcat的嘗試


一、談談“渲染”

相信好多人都挺聽過“渲染”這個詞,但不清楚它是什么意思?前端開發以為這是后端的活兒,后端開發以為是前端的事兒,推着推着就不了了之。其實渲染很簡單,不說概念,直接舉例:

1、 后端渲染:以JSP為例,可以分成三步
a、編寫標簽或Java代碼(可以稱之為模板)
b、在JSP編譯階段被轉換成Servlet編譯為Servlet Class
c、執行編譯后的代碼,將響應(模板執行結果)返回給頁面

優勢:減少前端工作,前端只需要設計純頁面,其他的都由后端來做;

缺點:依賴於服務器端,增大服務器壓力,前后端職責分工不明確;

應用場景:在頁面不太多、渲染壓力不大、服務器端能夠承受范圍內可以使用后端渲染。

2、 前端渲染:以基於JS的模板引擎為例
a、編寫模板代碼
b、通過模板引擎將模板轉化為腳本語言,拼接在JS中(第一次拼接,以后使用緩存)
c、頁面加載執行JS


優勢:減少服務器壓力,前后端職責可以很好地分開,后端只做Json數據接口,前端進行渲染;

缺點:前端渲染依賴於客戶端,增大的前端壓力,需要代理服務器、末班渲染引擎的支持;

應用場景:在前端頁面較多,前端開發人員能力較強,需要前后端分離的場景可以使用前端渲染(前端渲染是趨勢)。

 

二、談談nginx

1、談談為什么會用到nginx?

首先明確一件事,瀏覽器可以發出請求嗎?可以!那我們為什么要用到服務器呢?因為我們的前端如果不依賴服務器,頁面就只能訪問本地資源而不能訪問服務器上的資源,而我們的后台一定是寫在服務器上的。所以舉個例子,我們在使用Tomcat服務器時,就必須把前端資源架在Tomcat上,才能訪問后台的servlet。如下圖所示:

所以當我們希望前后端分離時,前端的資源就不能放在Tomcat上面,那如何獲得Tomcat的資源的?這就用到了nginx,如下圖所示:

2、談談nginx的反向代理

有反向代理必有正向代理,先談談正向代理:一般默認的代理都是正向代理,用戶訪問不了一個資源,然后通過代理服務器去訪問這個資源,將響應帶回給用戶。關鍵在於用戶知道自己訪問的是其他服務器的資源,代理服務器不會掩飾URL

反向代理是,代理服務器也是在中間層,但是用戶不知道自己訪問的資源是其他服務器的資源,代理服務器會掩飾URL

 

3、談談如何使用nginx反向代理tomcat

(1)首先打開nginx,兩種方式,一種是直接點擊ngnix.exe,一種是使用命令行,cd到nginx目錄下,start nginx,無報錯即啟動成功

 

(2)啟動成功后,如何驗證,因為ngnix.conf核心配置文件默認配置監聽80端口,所以瀏覽器打開localhost,看到如下顯示:

 

(3)下一步就是配置反向代理Tomcat,打開conf目錄下的nginx.conf文件,主要看35行左右開始的代碼,下面是我修改過的代碼:

主要修改lacation屬性,使所有的請求都被轉發到http://localhost:8080的Tomcat服務器下處理:

listen:是監聽的端口,即用戶訪問nginx服務的端口

server_name:服務名,經過測試並不會影響到什么

location:定義資源類型與服務器中資源地址url的映射關系,可在/后面定義資源類型,可設置多個location

其中proxy_pass代表要反向代理的服務器資源url,只要資源類型匹配,在這個url下的子路徑資源都可以訪問到,

其中root代表本地的資源路徑,同樣只要資源類型匹配,這個路徑下的子目錄資源都可以被訪問到,

一個location中只能配置一個root或proxy_pass。

 

(4)修改后ngnix.conf文件后,使用nginx -s reload指令,重啟ngnix,如果沒有報錯即重啟成功


 

(5)發出請求,獲得Json,url顯示依然是80端口的資源,即我們說的反向代理的特點,掩飾url,效果如下圖所示:


事實上,nginx是將請求轉發到Tomcat服務器,是8080端口下的資源,如下圖所示:

(6)如果不光有Tomcat服務器的資源,那么就需要定義多個location,比如,jsp資源請求就轉發到Tomcat服務器下,PHP、html、js、css等資源資源可以轉到Apache服務器目錄下,如下圖配置示例:

 

[html]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. location ~ \.jsp$ {    
  2.         proxy_pass http://localhost:8080;    
  3. }    
  4.             
  5. location ~ \.(html|js|css|png|gif)$ {    
  6.     root D:/software/developerTools/server/apache-tomcat-7.0.8/webapps/ROOT;    
  7. }   

 

 

ngnix的功能遠不止於此,它的高效也同樣被稱道,有興趣可以更深入了解!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM