部署前后端分離式nginx配置的完整步驟

2022-10-7 08:29| 查看: 1544 |來源: 互聯網

老生常談了，這里談談我的理解的前后端分離，簡單的分離無非是將原來mvc的view層剝離出來，獨立一個成為Servlet服務，Servlet之間依靠http連通。這里的view Serv ...

老生常談了，這里談談我的理解的前后端分離，簡單的分離無非是將原來mvc的view層剝離出來，獨立一個成為Servlet服務，Servlet之間依靠http連通。這里的view Servlet容器可以是任意一種服務端服務，Tomcat、Apache、Nginx、IIS，都可以。這里以常用的Nginx為例子做簡單的介紹。

需求分析

先來一波需求分析。

單項目

單項目指的是一臺服務器部署一個前端服務，使www.xxx.com => index.html的單一指向。

多項目

多項目指的是一臺服務器部署多個前端服務，使www.xxx.com/a => a.html,www.xxx.com/b => b.html等多指向。

請求代理。
cookie domain重寫。
cookie path 重寫。

提示：這里做好寫conf.d/*.conf，這樣配置可以分離處理。

公共配置

server{
 listen 80; # 配置端口
 server_name _; # 配置域名
 charset utf-8; # 編碼
 access_log /xxx/log/nginx_access.log main; # 成功日志
 error_log /xxx/log/nginx_error.log error; # 錯誤日志
 index index.html; # 查找文件順序
 set $root /xxx/nginx/; # 變量設置，設置公共路徑
 
 # 其余location
}

請手動去/xxx/log/nginx_access.log和/xxx/log/nginx_error.log下新建對應文件。可能會執行nginx reload第一次執行時會報錯。

set的$root路徑為絕對路徑，access_log和error_log同樣都是絕對路徑。

單項目配置

目錄結構

nginx
|----- index.html
|----- user.html

location配置

location / {
root $root;
}

好了最簡單的基于根路徑配置就這樣好了，這里無非是通過location配置一條路徑，然后指向到$root文件夾下的index.html這個文件下。

多項目配置

目錄結構

nginx
|----- a
    |----- index.html
|----- b
    |----- index.html

多條location配置

location ^~ /a {
  alias $root/a;
}

location ^~ /b {
  alias $root/b;
}

location / {
  root $root;
}

跟單項目唯一的不同點在于，root和alias的區別，root指的是文件的絕對匹配路徑，而alias則是相對匹配。root可以再http、server、location中配置，而alias只能在location中配置。這我還加入的正則^~，當匹配/a或者/b時，不管location的路徑是什么，資源的真實路徑一定是都是 alias 指定的路徑。這樣的我就能讓/a、/b擁有匹配的到路徑之后，擁有跳轉固定路徑，這在spa式的前端項目非常有用的，因為其實核心文件只有一個index.html文件（資源文件另說）。這樣我永遠跳轉index.html就能保證瀏覽器手動刷新的時候，不會根據root路徑去查找服務器其他路徑的資源。然后設置spa的根路徑和 /b必須是匹配的。

為什么會有這種需求？前端是輕便的，我們為了達到節約服務器與聚合同類型業務的時候，就會使用到這種機制。就像希望admin.xxxx.com/a => 運營管理臺、admin.xxxx.com/b => erp管理臺一樣。所有admin這個域名下我們只要切出子路徑即可。簡單輕便。

請求轉發

location ^~ /api {
  proxy_pass http://api.xxx.com/;
}

這里就特別簡單了，我通過正則匹配/api這個請求，通過proxy_pass屬性，將請求定向到http://api.xxx.com。即可

修改cookie domain

有時候處于安全考慮，我們會設置一定的cookie的domain屬性這是對于nginx轉發來說就很不友好了。當然也是有解決手段的，也很簡單。

location {
  proxy_cookie_domain <本域的domain> <想修改的domain>;
}

修改cookie path

當我們轉發回api接口時，有時候api域名拿不到cookie，除了domain還有cookie path的可能性。當然解決方案也很簡單

location {
  proxy_cookie_path <本域的路徑> <想修改的路徑>;
}

后續優化

這只是nginx配置最簡單的一個例子，還有，開啟gzip、緩存設置、合并資源請求的插件、設置50x，40x頁面、判斷移動端，pc端跳轉等配置，nginx還是很強大的。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對17站長網的支持。

本文最后更新于 2022-10-7 08:29，某些文章具有時效性，若有錯誤或已失效，請在網站留言或聯系站長：17tui@17tui.com

·END·

站長網微信號：w17tui，關注站長、創業、關注互聯網人 - 互聯網創業者營銷服務中心

免責聲明：本站部分文章和圖片均來自用戶投稿和網絡收集，旨在傳播知識，文章和圖片版權歸原作者及原出處所有，僅供學習與參考，請勿用于商業用途，如果損害了您的權利，請聯系我們及時修正或刪除。謝謝！

下一篇：Docker 數據卷操作的實現上一篇：Linux服務器下Nginx與Apache共存的實現方法分析

17站長網微信二維碼

始終以前瞻性的眼光聚焦站長、創業、互聯網等領域，為您提供最新最全的互聯網資訊，幫助站長轉型升級，為互聯網創業者提供更加優質的創業信息和品牌營銷服務，與站長一起進步！讓互聯網創業者不再孤獨！

掃一掃，關注站長網微信

青草久久影院-青草久久伊人-青草久久久-青草久久精品亚洲综合专区-SM双性精跪趴灌憋尿调教H-SM脚奴调教丨踩踏贱奴

部署前后端分離式nginx配置的完整步驟

大家都在看

相關分類

熱門排行

最近更新