部署前后端分離式nginx配置的完整步驟
前言
老生常談了,這里談?wù)勎业睦斫獾那昂蠖朔蛛x,簡(jiǎn)單的分離無非是將原來mvc的view層剝離出來,獨(dú)立一個(gè)成為Servlet服務(wù),Servlet之間依靠http連通。這里的view Servlet容器可以是任意一種服務(wù)端服務(wù),Tomcat、Apache、Nginx、IIS,都可以。這里以常用的Nginx為例子做簡(jiǎn)單的介紹。
需求分析
先來一波需求分析。
- 單項(xiàng)目
- 單項(xiàng)目指的是一臺(tái)服務(wù)器部署一個(gè)前端服務(wù),使www.xxx.com => index.html的單一指向。
- 多項(xiàng)目
- 多項(xiàng)目指的是一臺(tái)服務(wù)器部署多個(gè)前端服務(wù),使www.xxx.com/a => a.html,www.xxx.com/b => b.html等多指向。
- 請(qǐng)求代理。
- 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; # 錯(cuò)誤日志 index index.html; # 查找文件順序 set $root /xxx/nginx/; # 變量設(shè)置,設(shè)置公共路徑 # 其余l(xiāng)ocation }
請(qǐng)手動(dòng)去/xxx/log/nginx_access.log和/xxx/log/nginx_error.log下新建對(duì)應(yīng)文件??赡軙?huì)執(zhí)行nginx reload第一次執(zhí)行時(shí)會(huì)報(bào)錯(cuò)。
set的$root路徑為絕對(duì)路徑,access_log和error_log同樣都是絕對(duì)路徑。
單項(xiàng)目配置
目錄結(jié)構(gòu)
nginx |----- index.html |----- user.html
location配置
location / { root $root; }
好了最簡(jiǎn)單的基于根路徑配置就這樣好了,這里無非是通過location配置一條路徑,然后指向到$root文件夾下的index.html這個(gè)文件下。
多項(xiàng)目配置
目錄結(jié)構(gòu)
nginx |----- a |----- index.html |----- b |----- index.html
多條location配置
location ^~ /a { alias $root/a; } location ^~ /b { alias $root/b; } location / { root $root; }
跟單項(xiàng)目唯一的不同點(diǎn)在于,root和alias的區(qū)別,root指的是文件的絕對(duì)匹配路徑,而alias則是相對(duì)匹配。root可以再http、server、location中配置,而alias只能在location中配置。這我還加入的正則^~,當(dāng)匹配/a或者/b時(shí),不管location的路徑是什么,資源的真實(shí)路徑一定是都是 alias 指定的路徑。這樣的我就能讓/a、/b擁有匹配的到路徑之后,擁有跳轉(zhuǎn)固定路徑,這在spa式的前端項(xiàng)目非常有用的,因?yàn)槠鋵?shí)核心文件只有一個(gè)index.html文件(資源文件另說)。這樣我永遠(yuǎn)跳轉(zhuǎn)index.html就能保證瀏覽器手動(dòng)刷新的時(shí)候,不會(huì)根據(jù)root路徑去查找服務(wù)器其他路徑的資源。然后設(shè)置spa的根路徑和 /b必須是匹配的。
為什么會(huì)有這種需求?前端是輕便的,我們?yōu)榱诉_(dá)到節(jié)約服務(wù)器與聚合同類型業(yè)務(wù)的時(shí)候,就會(huì)使用到這種機(jī)制。就像希望admin.xxxx.com/a => 運(yùn)營(yíng)管理臺(tái)、admin.xxxx.com/b => erp管理臺(tái)一樣。所有admin這個(gè)域名下我們只要切出子路徑即可。簡(jiǎn)單輕便。
請(qǐng)求轉(zhuǎn)發(fā)
location ^~ /api { proxy_pass http://api.xxx.com/; }
這里就特別簡(jiǎn)單了,我通過正則匹配/api這個(gè)請(qǐng)求,通過proxy_pass屬性,將請(qǐng)求定向到http://api.xxx.com。即可
修改cookie domain
有時(shí)候處于安全考慮,我們會(huì)設(shè)置一定的cookie的domain屬性這是對(duì)于nginx轉(zhuǎn)發(fā)來說就很不友好了。當(dāng)然也是有解決手段的,也很簡(jiǎn)單。
location { proxy_cookie_domain <本域的domain> <想修改的domain>; }
修改cookie path
當(dāng)我們轉(zhuǎn)發(fā)回api接口時(shí),有時(shí)候api域名拿不到cookie,除了domain還有cookie path的可能性。當(dāng)然解決方案也很簡(jiǎn)單
location { proxy_cookie_path <本域的路徑> <想修改的路徑>; }
后續(xù)優(yōu)化
這只是nginx配置最簡(jiǎn)單的一個(gè)例子,還有,開啟gzip、緩存設(shè)置、合并資源請(qǐng)求的插件、設(shè)置50x,40x頁(yè)面、判斷移動(dòng)端,pc端跳轉(zhuǎn)等配置,nginx還是很強(qiáng)大的。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
詳解Nginx 反向代理、負(fù)載均衡、頁(yè)面緩存、URL重寫及讀寫分離詳解
本篇文章主要介紹了Nginx 反向代理、負(fù)載均衡、頁(yè)面緩存、URL重寫及讀寫分離詳解,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-12-12Nginx動(dòng)靜分離配置實(shí)現(xiàn)與說明
這篇文章主要介紹了Nginx動(dòng)靜分離配置實(shí)現(xiàn)與說明,需要的朋友可以參考下2022-04-04nginx代理實(shí)現(xiàn)靜態(tài)資源訪問的示例代碼
本文主要介紹了nginx代理實(shí)現(xiàn)靜態(tài)資源訪問的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06Nginx訪問控制與參數(shù)調(diào)優(yōu)的方法
這篇文章主要介紹了Nginx訪問控制與參數(shù)調(diào)優(yōu)的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03