在 Nginx 中配置前端和后端共用一個(gè)域名的情況，通常是通過路徑或子路徑將請(qǐng)求轉(zhuǎn)發(fā)到不同的服務(wù)。以下是一個(gè)示例配置，假設(shè)：

前端靜態(tài)文件在 /var/www/frontend/。
后端 API 服務(wù)運(yùn)行在 http://127.0.0.1:5000。
域名是 example.com，其中：
靜態(tài)前端通過 example.com 訪問。
后端 API 通過 example.com/api/ 訪問。

server {listen 80;server_name example.com;# 配置前端靜態(tài)文件location / {root /var/www/frontend;index index.html;# 支持前端 history 模式路由try_files $uri $uri/ /index.html;}# 配置后端 API 路由location /api/ {proxy_pass http://127.0.0.1:5000;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}# 配置錯(cuò)誤頁(yè)面（可選）error_page 404 /404.html;location = /404.html {root /var/www/frontend;}
}

在前端使用基于路由的單頁(yè)應(yīng)用程序（如 React、Vue ）時(shí)，前端的路由模式通常分為 hash 模式 和 history 模式。在 Nginx 配置前端路由時(shí)，需要特別處理 history 模式，因?yàn)樗蕾囉?HTML5 的 pushState 功能，而不帶 # 的路徑直接被 Nginx 視為文件路徑。

try_files 指令的作用就是按順序檢査文件是否存在，返回第一個(gè)找到的文件。 $uri 是nginx 提供的變量，指當(dāng)前請(qǐng)求的 URI，不包括任何參數(shù)，當(dāng)請(qǐng)求靜態(tài)資源文件的時(shí)候，命中 $uri 規(guī)則；當(dāng)請(qǐng)求頁(yè)面路由的時(shí)候，命中 /ndex.html 規(guī)則