談談渲染，玩玩nginx——先後端分離，轉發請求到Tomcat的嘗試

1、談談「渲染」

相信好多人都挺聽過「渲染」這個詞，但不清楚它是什麼意思？前端開發覺得這是後端的活兒，後端開發覺得是前端的事兒，推着推着就不了了之。其實渲染很簡單，不說概念，直接舉例：

一、 後端渲染：以JSP爲例，能夠分紅三步
a、編寫標籤或Java代碼（能夠稱之爲模板）
b、在JSP編譯階段被轉換成Servlet編譯爲Servlet Class
c、執行編譯後的代碼，將響應（模板執行結果）返回給頁面

優點：減小前端工做，前端只須要設計純頁面，其餘的都由後端來作；

缺點：依賴於服務器端，增大服務器壓力，先後端職責分工不明確；

應用場景：在頁面不太多、渲染壓力不大、服務器端可以承受範圍內可使用後端渲染。

二、 前端渲染：以基於JS的模板引擎爲例
a、編寫模板代碼
b、經過模板引擎將模板轉化爲腳本語言，拼接在JS中（第一次拼接，之後使用緩存）
c、頁面加載執行JS

優點：減小服務器壓力，先後端職責能夠很好地分開，後端只作Json數據接口，前端進行渲染；

缺點：前端渲染依賴於客戶端，增大的前端壓力，須要代理服務器、末班渲染引擎的支持；

應用場景：在前端頁面較多，前端開發人員能力較強，須要先後端分離的場景可使用前端渲染（前端渲染是趨勢）。

 

2、談談nginx

一、談談爲何會用到nginx？

首先明確一件事，瀏覽器能夠發出請求嗎？能夠！那咱們爲何要用到服務器呢？由於咱們的前端若是不依賴服務器，頁面就只能訪問本地資源而不能訪問服務器上的資源，而咱們的後臺必定是寫在服務器上的。因此舉個例子，咱們在使用Tomcat服務器時，就必須把前端資源架在Tomcat上，才能訪問後臺的servlet。以下圖所示：

因此當咱們但願先後端分離時，前端的資源就不能放在Tomcat上面，那如何得到Tomcat的資源的？這就用到了nginx，以下圖所示：

二、談談nginx的反向代理

有反向代理必有正向代理，先談談正向代理：通常默認的代理都是正向代理，用戶訪問不了一個資源，而後經過代理服務器去訪問這個資源，將響應帶回給用戶。關鍵在於用戶知道本身訪問的是其餘服務器的資源，代理服務器不會掩飾URL。

而反向代理是，代理服務器也是在中間層，可是用戶不知道本身訪問的資源是其餘服務器的資源，代理服務器會掩飾URL。

 

三、談談如何使用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服務器目錄下，以下圖配置示例：

 

location ~ \.jsp$ {
        proxy_pass http://localhost:8080;
}

location ~ \.(html|js|css|png|gif)$ {
    root D:/software/developerTools/server/apache-tomcat-7.0.8/webapps/ROOT;
}

 

 

ngnix的功能遠不止於此，它的高效也一樣被稱道，有興趣能夠更深刻了解！