原文鏈接：Nginx前后端分離反代（VUE+FastAPI） < Ping通途說

0.前言

工作需求自己全棧開發了一個后臺+后端，要求前后端分離，即nginx靜態代理前端文件，再代理后端接口。以前自己也遇過這種情況，但搗鼓了半天死活請求不上，最后方法就是開了個端口，通過端口直接請求后端，繞過了nginx。但現在又遇到了這種情況，還是需要在生產環境中使用，那莫得辦法了，不會也得會。

自己搗鼓了半天，找ds大哥一問瞬間茅塞頓開，實際上跟VueRouter、FastAPIRouter都很像。

1.需求分析

我們先來理一下需求：

假設域名為 https://admin.doupoa.site（假設！），我們需要在訪問 “/” 時顯示前端頁面，后端開放了一個路由和一個接口，其中路由包含websocket協議接口。那么接口規則應該如下：

1. /：后臺前端，無效路徑將由前端vueRouter指引至404頁面
2. /admin/*：后端的后臺專用接口
3. /admin/system/status：采用Websocket協議獲取系統狀態，輪詢時間較短，避免后臺日志刷屏
4. /api/*：對外的API接口

之前之所以無法解析的原因主要還是因為，我使用面板進行創建的，創建表單本身就挺有誤導性：

在更多選項中我們可以配置網站目錄和網站默認主頁，這樣一配就讓我覺得只要我輸入這個域名，就能使用index.html作為前端頁面，然后還能向后端請求數據，于是刷新了半天都不行。

找到對應的配置文件，可以看到location塊將“/”根路徑指向了后端接口，這就意味這所有的請求會被直接轉發到后端的地址上，而根本不會解析到index.html。

因此再來看看需求，我們只用將每個特殊的路徑進行單獨的解析即可。

/admin/system/status：精準匹配，升級為websocket協議

/admin | /api ：通配路由，以這兩個開頭的所有路由轉發至后端服務

/ ：靜態代理前端文件

2. 配置文件

直接手動修改conf路由文件，有些可能是rewrite重定向文件，辨別的辦法就是看是不是server {} 開頭。

修改完成后記得重啟nginx，使用面板配置的就在面板中重啟，命令行就通過sudo?nginx -s reload 重載即可。

HTTP配置文件

server {listen 80;server_name admin.doupoa.site;root /home/wwwroot/nginx_only/domain/admin.doupoa.site/web;index index.html;# 1. 處理WebSocket路由location = /admin/system/status {proxy_pass http://127.0.0.1:8000;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "Upgrade";proxy_set_header Host $host;proxy_read_timeout 60s;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}# 2. 處理其他后端接口location ~ ^/(admin|api) {proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_set_header X-Forwarded-Proto $scheme;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header Host $host;proxy_set_header Referer $http_referer;proxy_pass http://127.0.0.1:8000; # 后端接口proxy_set_header Accept-Encoding "";}# 3. 前端路由處理（Vue Router）location / {try_files $uri $uri/ /index.html;# 緩存前端數據proxy_cache nginx_only; #proxy_cache endproxy_temp_path /home/wwwroot/nginx_only/cache_temp;proxy_cache_key $scheme://$host$request_uri;proxy_cache_valid 200 304 12h; #cache_valid endproxy_connect_timeout 60s; #connect_timeout end}access_log /home/wwwroot/nginx_only/logs/access.log access;error_log /home/wwwroot/nginx_only/logs/error.log crit;
}

HTTPS配置文件

server {listen 443 ssl http2;server_name admin.doupoa.site;root /home/wwwroot/nginx_only/domain/admin.doupoa.site/web;index index.html;# 1. 處理WebSocket路由location = /admin/system/status {proxy_pass http://127.0.0.1:8000;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "Upgrade";proxy_set_header Host $host;proxy_read_timeout 60s;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}# 2. 處理其他后端接口location ~ ^/(admin|api) {proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_set_header X-Forwarded-Proto $scheme;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header Host $host;proxy_set_header Referer $http_referer;proxy_pass http://127.0.0.1:8000;proxy_set_header Accept-Encoding "";}# 3. 前端路由處理（Vue Router）location / {try_files $uri $uri/ /index.html;# 緩存前端數據proxy_cache nginx_only; #proxy_cache endproxy_temp_path /home/wwwroot/nginx_only/cache_temp;proxy_cache_key $scheme://$host$request_uri;proxy_cache_valid 200 304 12h; #cache_valid endproxy_connect_timeout 60s; #connect_timeout end}access_log /home/wwwroot/nginx_only/logs/access.log access;error_log /home/wwwroot/nginx_only/logs/error.log crit;add_header Strict-Transport-Security "max-age=31536000; includeSubdomains;"; #force_ssl endssl_certificate_key  /home/wwwroot/nginx_only/etc/admin.doupoa.site-ssl-ssl/admin.doupoa.site-ssl.key; # SSL密鑰ssl_certificate  /home/wwwroot/nginx_only/etc/admin.doupoa.site-ssl-ssl/admin.doupoa.site-ssl.crt; # SSL證書ssl_stapling on;resolver_timeout 3s;ssl_ciphers "ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA:ECDHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES128-SHA256:DHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES256-GCM-SHA384:AES128-GCM-SHA256:AES256-SHA256:AES128-SHA256:AES256-SHA:AES128-SHA:DES-CBC3-SHA:HIGH:!aNULL:!eNULL:!EXPORT:!DES:!MD5:!PSK:!RC4"; # 對應證書的加密算法ssl_prefer_server_ciphers on;ssl_session_timeout 10m;ssl_session_cache    shared:SSL:10m;ssl_protocols TLSv1.2 TLSv1.3;ssl_dhparam /home/wwwroot/nginx_only/etc/admin.doupoa.site-ssl-ssl/admin.doupoa.site-ssl.pem; # 密鑰協商協議
}