Nginx代理同域名前后端分離項(xiàng)目的完整步驟
前后端分離項(xiàng)目,前后端共用一個(gè)域名。通過域名后的 url 前綴來區(qū)別前后端項(xiàng)目。
以 vue + php 項(xiàng)目為例。直接上 server 模塊的 nginx 配置。
server { listen 80; #listen [::]:80 default_server ipv6only=on; server_name demo.com; # 配置項(xiàng)目域名 index index.html index.htm index.php; # 1.轉(zhuǎn)給前端處理 location / { # 前端打包后的靜態(tài)目錄 alias /home/wwwroot/default/vue-demo/dist/; } # 2.轉(zhuǎn)給后端處理 location /api/ { try_files $uri $uri/ /index.php?$query_string; } # 3.最終php在這里轉(zhuǎn)給fpm location ~ [^/]\.php(/|$) { # 后端項(xiàng)目目錄 root /home/wwwroot/default/demo/public/; #fastcgi_pass 127.0.0.1:9000; fastcgi_pass unix:/tmp/php-cgi.sock; fastcgi_index index.php; include fastcgi.conf; include pathinfo.conf; } # 4.處理后端的靜態(tài)資源 location /public/ { alias /home/wwwroot/default/demo/public/uploads/; } #error_page 404 /404.html; access_log /home/wwwlogs/access.log main; }
簡(jiǎn)單解釋
- 當(dāng)域名后存在 /api/ 前綴時(shí),將轉(zhuǎn)給后端處理;
- 當(dāng)域名后存在 /uploads/ 前綴時(shí),訪問后端的靜態(tài)資源。
- 由于 location 精準(zhǔn)匹配的原則,除以上之外的訪問都會(huì)被轉(zhuǎn)到第一處 location 訪問前端頁面。
例如:
訪問文章列表接口
GET https://demo.com/api/posts
訪問上傳的圖片
GET https://demo.com/uploads/xxx.jpg
訪問前端首頁
GET https://demo.com/
訪問文章頁面
GET https://demo.com/posts
PS:alias 路徑末尾一定要有 / 。
總結(jié)
到此這篇關(guān)于Nginx代理同域名前后端分離項(xiàng)目的文章就介紹到這了,更多相關(guān)Nginx代理同域名前后端分離項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Nginx搭建高效的靜態(tài)圖片服務(wù)器的方法步驟
高效地管理和分發(fā)靜態(tài)資源是至關(guān)重要的,本文主要介紹了Nginx搭建高效的靜態(tài)圖片服務(wù)器的方法步驟,具有一定的參考價(jià)值,感興趣的可以了解一下2024-05-05Nginx 操作響應(yīng)頭信息的實(shí)現(xiàn)
這篇文章主要介紹了Nginx 操作響應(yīng)頭信息的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05解決Nginx 配置 proxy_pass 后 返回404問題
這篇文章主要介紹了Nginx 配置 proxy_pass 后 返回404問題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01nginx如何根據(jù)報(bào)文里字段轉(zhuǎn)發(fā)至不同地址
要在 Nginx 中根據(jù) POST 請(qǐng)求的 JSON 負(fù)載中的 id 字段的值進(jìn)行轉(zhuǎn)發(fā),你可以使用 Nginx 的 ngx_http_lua_module 模塊,這個(gè)模塊允許你在 Nginx 配置中使用 Lua 腳本,本文介紹nginx如何根據(jù)報(bào)文里字段轉(zhuǎn)發(fā)至不同地址,感興趣的朋友一起看看吧2024-12-12Nginx強(qiáng)制跳轉(zhuǎn)Https(Http訪問跳轉(zhuǎn)Https)
這篇文章主要為大家介紹了Http訪問強(qiáng)制跳轉(zhuǎn)到Https的幾種方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10nginx 關(guān)閉默認(rèn)站點(diǎn)的方法
國內(nèi)機(jī)房一般都要求網(wǎng)站主關(guān)閉空主機(jī)頭,防止未備案的域名指向過來造成麻煩2012-09-09