Nginx前后端分离反代（VUE+FastAPI）

原文链接：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; # 密钥协商协议
}