快捷導(dǎo)航

Nginx代理同域名前后端分離項目的完整步驟

更新時間：2020年10月18日 09:56:57 作者：Mr_houzi

這篇文章主要給大家介紹了關(guān)于Nginx代理同域名前后端分離項目的完整步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前后端分離項目，前后端共用一個域名。通過域名后的 url 前綴來區(qū)別前后端項目。

以 vue + php 項目為例。直接上 server 模塊的 nginx 配置。

server
 {
 listen 80;
 #listen [::]:80 default_server ipv6only=on;
 server_name demo.com; # 配置項目域名
 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(/|$)
 {
  # 后端項目目錄
  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;
}

簡單解釋

當(dāng)域名后存在 /api/ 前綴時，將轉(zhuǎn)給后端處理；
當(dāng)域名后存在 /uploads/ 前綴時，訪問后端的靜態(tài)資源。
由于 location 精準(zhǔn)匹配的原則，除以上之外的訪問都會被轉(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代理同域名前后端分離項目的文章就介紹到這了,更多相關(guān)Nginx代理同域名前后端分離項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Nginx 服務(wù)器安裝及配置文件詳解介紹
這篇文章主要介紹了Nginx 服務(wù)器安裝及配置文件詳解介紹，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2016-11-11
HTTP 499 狀態(tài)碼 nginx下 499錯誤的解決辦法
HTTP狀態(tài)碼出現(xiàn)499錯誤有多種情況,499錯誤是什么?Nginx 499錯誤的原因及解決方法,下面跟著腳本之家小編一起學(xué)習(xí)吧
2016-06-06
Nginx中實現(xiàn)訪問HTTP請求時自動跳轉(zhuǎn)到HTTPS請求
本文主要介紹了Nginx中實現(xiàn)訪問HTTP請求時自動跳轉(zhuǎn)到HTTPS請求,下面介紹了兩種方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-08-08
Nginx之rewrite實現(xiàn)URL重寫方式
文章介紹了Nginx的rewrite模塊,包括其重要性、相關(guān)指令（如set、if、break、return、rewrite）的使用方法和作用域,并舉例說明了這些指令的實際應(yīng)用場景,如域名重定向和防盜鏈處理
2025-03-03
nginx配置請求轉(zhuǎn)發(fā)不生效的實現(xiàn)
本文主要介紹了nginx配置請求轉(zhuǎn)發(fā)不生效的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2025-02-02
Nginx服務(wù)器中414錯誤和504錯誤的配置解決方法
這篇文章主要介紹了Nginx服務(wù)器中414錯誤和504錯誤的配置解決方法,分別對應(yīng)Request-URI Too Large和Gateway Time-out這樣的錯誤提示,需要的朋友可以參考下
2015-12-12
nginx出現(xiàn)500 Internal Server Error錯誤的解決方法
這篇文章主要介紹了nginx出現(xiàn)500 Internal Server Error錯誤的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-09-09
解決httpd占用80端口導(dǎo)致Nginx啟動失敗報錯的解決辦法
今天在建自己小網(wǎng)站時啟動Nginx時,發(fā)現(xiàn)其報下列錯誤,意思是因為80端口被占用導(dǎo)致Nginx啟動失敗,所以本文小編給大家介紹介紹如何解決解決httpd占用80端口導(dǎo)致Nginx啟動不成功報nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
2023-11-11
Nginx反向代理多域名的HTTP和HTTPS服務(wù)的實現(xiàn)
這篇文章主要介紹了Nginx反向代理多域名的HTTP和HTTPS服務(wù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
詳解Nginx實戰(zhàn)之讓用戶通過用戶名密碼認(rèn)證訪問web站點
這篇文章主要介紹了詳解Nginx實戰(zhàn)之讓用戶通過用戶名密碼認(rèn)證訪問web站點,有興趣的可以了解一下。
2016-11-11