經過nginx部署前端代碼實現先後端分離

實現先後端分離，可讓先後端獨立開發、獨立部署、獨立單測，雙方經過JSON進行數據交互。

對於前端開發人員來講，不用每次調試都須要啓動或配置Java/Tomcat運行環境；對於後端開發人員來講 ，也不用在須要往JSP頁面注入數據。

 

經過nginx來部署前端代碼，能夠幫助前端實現如下基本需求：

一、請求轉發，解決請求跨域的問題

 

server {

        listen       7777;

         location /{

            root   /Users/xiaoyun/git/someproject/dist;

        }

        location /api/v1{

               proxy_set_header Host api.yourhost.com;

                proxy_pass http://api.yourhost.com/api/v1/;

        }

        location /api/v2{

                proxy_pass  http://api.yourhost.com/new;

        } 

    }

以上是一段nginx配置參考：

listen    nginx服務端口號

location  /    設置默認根目錄所訪問的本地代碼路徑，這裏還能夠設置默認主頁index

proxy_pass   請求轉發，能夠配置多個，從上至下進行匹配

以第一個配置爲例，即全部本地以/api/v1開頭的請求都會轉發至對應線上服務器，

例如  http://localhost:7777/api/v1/getConfig 則會自動轉發自 http://api.yourhost.com/api/v1/getConfig

另外，還須要注意的是，proxy_pass配置的路徑若是是以/結尾，如上面的配置v1，那麼此時路徑爲相對路徑，不然爲絕對路徑

例如 v2的轉發配置：

若是請求 http://localhost:7777/api/v1/user/list   則會轉發自 http://api.yourhost.com/new/user/list ，不會帶有原路徑的 /api/v2

 

 

二、gzip請求壓縮

網站開啓gzip壓縮，不只可以節省帶寬，也可以快速響應用戶的訪問

 

 

---

 

http{

gzip  on;

gzip_proxied any;

gzip_min_length  1024;

gzip_buffers     4 8k;

gzip_comp_level 3;

gzip_types       text/plain text/css application/x-javascript application/javascript application/xml application/json;

} 

---

如下爲各項配置做用：

gzip on;      （啓用 gzip 壓縮功能）

    gzip_proxied any;  （nginx 作前端代理時啓用該選項，表示不管後端服務器的headers頭返回什麼信息，都無條件啓用壓縮）

    gzip_min_length  1024; （最小壓縮的頁面，若是頁面過於小，可能會越壓越大，這裏規定大於1K的頁面才啓用壓縮）

    gzip_buffers     4 8k; （設置系統獲取幾個單位的緩存用於存儲gzip的壓縮結果數據流）

    gzip_comp_level 3; （壓縮級別，1壓縮比最小處理速度最快，9壓縮比最大但處理最慢，同時也最消耗CPU,通常設置爲3就能夠了）

    gzip_types       text/plain text/css application/x-javascript application/javascript application/xml application/json; （什麼類型的頁面或文檔啓用壓縮）