前后端分离的情况下使用Nginx部署Vite项目时静态资源被代理的问题

大多数教程中静态资源都是和后台服务在一起的，因此直接使用Nginx代理时是没有任何问题的
但是当前后端分离的情况下，可能就并不适应了，本文主要记录本人部署时遇到的一些坑

部署到根路径时打开页面报404

背景：

• 使用 Vite 打包时 baseUrl 为 '/'
• 生产模式时接口请求没有固定前缀（http://ip:port/a、http://ip:port/b）
• nginx配置中直接代理根路径 /

Nginx配置：

....
# 设置负载均衡
upstream serve_backend {
    # 轮询模式
	server 127.0.0.1:9001;
	server 127.0.0.1:9004;
}
server {
	listen       9000;
    server_name  localhost;
    #允许Header中使用下划线
    underscores_in_headers on;
     
    # 接口请求代理
    location / {
    	alias   html/statics/;
        try_files $uri $uri/ /index.html last;
        index   index.html index.htm;
        proxy_pass  http://serve_backend/;
        # 指定在何种情况下一个失败的请求应该被发送到下一台后端服务器
        proxy_next_upstream error timeout http_500;
        # 启用keep alive
        proxy_http_version 1.1;
        proxy_set_header Connection "";
        # 查看请求被代理到了哪个后端
        add_header backendIp $upstream_addr;
        add_header backendCode $upstream_status;

        # 获取 xforward和真实IP
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header  X-Real-IP  $remote_addr;
        proxy_set_header  Host $host;
    }
 }
....

现象：

分析：
当请求 http://127.0.0.1:9000 时会默认请求根路径下的 index.html

但因为我们此时已经将根路径下的所有请求都代理到了 http://127.0.0.1:9001 或 http://127.0.0.1:9004 ，所以就去这两个服务下面找静态资源了

显然我们的静态资源是在 Nginx 的 html/statics 下，而不在这两个服务下面，找不到自然就报 404 错误码了

解决办法—过滤静态资源

在 Nginx 的配置文件 server 块中进行过滤：

# 静态资源不代理，直接走原始请求
location ~* \.(gif|jpg|jpeg|html|json|ico|css|js)$ {
    alias   html/statics/;
    try_files $uri $uri/;
}

# 根路径(html页面)不代理，直接走原始请求
location = / {
    alias   html/statics/;
    try_files $uri $uri/ /index.html last;
    index   index.html index.htm;
}

其余接口请求代理到相应的后台接口

# 接口请求代理
location / {
    proxy_pass  http://serve_backend/;
    # 指定在何种情况下一个失败的请求应该被发送到下一台后端服务器
    proxy_next_upstream error timeout http_500;
    # 启用keep alive
    proxy_http_version 1.1;
    proxy_set_header Connection "";
    # 查看请求被代理到了哪个后端
    add_header backendIp $upstream_addr;
    add_header backendCode $upstream_status;

    # 获取 xforward和真实IP
    proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
    proxy_set_header  X-Real-IP  $remote_addr;
    proxy_set_header  Host $host;
}

此时页面就可以正常访问，不报404错误了