快捷導(dǎo)航

Nginx代理同域名前后端分離項(xiàng)目的完整步驟

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

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

前后端分離項(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)文章

詳解基于CentOS 7配置Nginx自啟動(dòng)
這篇文章主要介紹了詳解基于CentOS 7配置Nginx自啟動(dòng),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03
Nginx偽靜態(tài)配置和常用Rewrite偽靜態(tài)規(guī)則集錦
偽靜態(tài)是一種可以把文件后綴改成任何可能的一種方法，如果我想把php文件偽靜態(tài)成html文件，這種相當(dāng)簡(jiǎn)單的，下面我來介紹nginx 偽靜態(tài)配置方法有需要了解的朋友可參考。
2014-06-06
詳解 Nginx代理功能與負(fù)載均衡
本篇文章主要介紹了詳解 Nginx代理功能與負(fù)載均衡，先描述一些關(guān)于代理功能的配置，再說明負(fù)載均衡詳細(xì)，有興趣的可以了解一下。
2017-02-02
Nginx跨域使用字體文件的配置方法
這篇文章主要介紹了Nginx跨域使用字體文件的配置方法,使用HttpHeadersModule模塊實(shí)現(xiàn),需要的朋友可以參考下
2014-06-06
Nginx配置優(yōu)化詳解
如果你已經(jīng)安裝過Nginx并在生產(chǎn)環(huán)境中使用，那么Nginx配置優(yōu)化你一定也要做，這樣才能看到Nginx性能，本文就從基本配置優(yōu)化開始到高層配置教你如何優(yōu)化Nginx
2013-11-11
詳解nginx的請(qǐng)求限制（連接限制和請(qǐng)求限制）
這篇文章主要介紹了詳解nginx的請(qǐng)求限制（連接限制和請(qǐng)求限制），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-07-07
Nginx配置文件詳解以及優(yōu)化建議指南
Nginx是一款面向性能設(shè)計(jì)的HTTP服務(wù)器,相較于Apache、lighttpd具有占有內(nèi)存少,穩(wěn)定性高等優(yōu)勢(shì),下面這篇文章主要給大家介紹了關(guān)于Nginx配置文件詳解以及優(yōu)化的相關(guān)資料,需要的朋友可以參考下
2021-09-09
Nginx location(正則)使用
這篇文章主要介紹了Nginx location(正則)使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
Windows環(huán)境實(shí)現(xiàn)Nginx配置及開機(jī)自啟動(dòng)
本文主要介紹了Windows環(huán)境實(shí)現(xiàn)Nginx配置及開機(jī)自啟動(dòng),通過兩種方式可以實(shí)現(xiàn)nginx的開機(jī)自啟動(dòng),具有一定的參考價(jià)值,感興趣的可以了解一下
2024-03-03
prometheus監(jiān)控nginx并實(shí)現(xiàn)可視化的操作指南
Nginx是一款高性能的Web服務(wù)器,被廣泛應(yīng)用于各類的網(wǎng)站和應(yīng)用程序中,為了保證Nginx的正常工作,我們需要對(duì)其進(jìn)行監(jiān)控和管理,所以本文給大家介紹了prometheus監(jiān)控nginx并實(shí)現(xiàn)可視化的操作指南,需要的朋友可以參考下
2024-05-05