17站長(zhǎng)網(wǎng) › 首頁(yè) ›網(wǎng)站› 服務(wù)器 › 查看內(nèi)容

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

2022-10-7 08:29| 查看: 1602 |來(lái)源: 互聯(lián)網(wǎng)

老生常談了，這里談?wù)勎业睦斫獾那昂蠖朔蛛x，簡(jiǎn)單的分離無(wú)非是將原來(lái)mvc的view層剝離出來(lái)，獨(dú)立一個(gè)成為Servlet服務(wù)，Servlet之間依靠http連通。這里的view Serv ...

老生常談了，這里談?wù)勎业睦斫獾那昂蠖朔蛛x，簡(jiǎn)單的分離無(wú)非是將原來(lái)mvc的view層剝離出來(lái)，獨(dú)立一個(gè)成為Servlet服務(wù)，Servlet之間依靠http連通。這里的view Servlet容器可以是任意一種服務(wù)端服務(wù)，Tomcat、Apache、Nginx、IIS，都可以。這里以常用的Nginx為例子做簡(jiǎn)單的介紹。

需求分析

先來(lái)一波需求分析。

單項(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)單的基于根路徑配置就這樣好了，這里無(wú)非是通過(guò)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文件（資源文件另說(shuō)）。這樣我永遠(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)單了，我通過(guò)正則匹配/api這個(gè)請(qǐng)求，通過(guò)proxy_pass屬性，將請(qǐng)求定向到http://api.xxx.com。即可

修改cookie domain

有時(shí)候處于安全考慮，我們會(huì)設(shè)置一定的cookie的domain屬性這是對(duì)于nginx轉(zhuǎn)發(fā)來(lái)說(shuō)就很不友好了。當(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è)例子，還有，開(kāi)啟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ì)17站長(zhǎng)網(wǎng)的支持。

本文最后更新于 2022-10-7 08:29，某些文章具有時(shí)效性，若有錯(cuò)誤或已失效，請(qǐng)?jiān)诰W(wǎng)站留言或聯(lián)系站長(zhǎng)：17tui@17tui.com

·END·

站長(zhǎng)網(wǎng)微信號(hào)：w17tui，關(guān)注站長(zhǎng)、創(chuàng)業(yè)、關(guān)注互聯(lián)網(wǎng)人 - 互聯(lián)網(wǎng)創(chuàng)業(yè)者營(yíng)銷服務(wù)中心

免責(zé)聲明：本站部分文章和圖片均來(lái)自用戶投稿和網(wǎng)絡(luò)收集，旨在傳播知識(shí)，文章和圖片版權(quán)歸原作者及原出處所有，僅供學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途，如果損害了您的權(quán)利，請(qǐng)聯(lián)系我們及時(shí)修正或刪除。謝謝！

下一篇：Docker 數(shù)據(jù)卷操作的實(shí)現(xiàn)上一篇：Linux服務(wù)器下Nginx與Apache共存的實(shí)現(xiàn)方法分析

17站長(zhǎng)網(wǎng)微信二維碼

始終以前瞻性的眼光聚焦站長(zhǎng)、創(chuàng)業(yè)、互聯(lián)網(wǎng)等領(lǐng)域，為您提供最新最全的互聯(lián)網(wǎng)資訊，幫助站長(zhǎng)轉(zhuǎn)型升級(jí)，為互聯(lián)網(wǎng)創(chuàng)業(yè)者提供更加優(yōu)質(zhì)的創(chuàng)業(yè)信息和品牌營(yíng)銷服務(wù)，與站長(zhǎng)一起進(jìn)步！讓互聯(lián)網(wǎng)創(chuàng)業(yè)者不再孤獨(dú)！

掃一掃，關(guān)注站長(zhǎng)網(wǎng)微信

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

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

大家都在看

相關(guān)分類

熱門排行

最近更新