Nginx部署前端代碼實現前后端分離


  實現前后端分離,可以讓前后端獨立開發、獨立部署、獨立單測,雙方通過JSON進行數據交互。

  對於前端開發人員來說,不用每次調試都需要啟動或配置Java/Tomcat運行環境;對於后端開發人員來說 ,也不用在需要往JSP頁面注入數據。

  通過nginx來部署前端代碼,可以幫助前端實現以下基本需求:

1、請求轉發,解決請求跨域的問題

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/v2/user/list  則會轉發自 http://api.yourhost.com/new/user/list ,不會帶有原路徑的 /api/v2

2、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; (什么類型的頁面或文檔啟用壓縮)

 


免責聲明!

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



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