Nginx反向代理+Express API场景下无法提供静态文件（返回302错误）

核心问题排查与修复 #

1. 修正路径拼写错误
   正则匹配location里的root路径存在拼写错误：/home/user/Documents/app.com/CURRENT PROJECT/public 需改为 /home/user/Documents/myapp.com/CURRENT PROJECT/public，与server块的全局root保持一致。

2. 调整静态文件匹配优先级
   使用^~前缀让静态资源路径优先匹配，避免被后端API的/location拦截。同时简化配置，复用全局root：

   # 优先匹配/css路径
   location ^~ /css/ {
       expires max;
       gzip_static on;
   }
   
   # 优先匹配/js路径
   location ^~ /js/ {
       expires max;
       gzip_static on;
   }
   
   # 匹配其他静态文件后缀
   location ~* \.(woff|woff2|png|jpg|jpeg|webp|svg|mp3)$ {
       expires max;
       gzip_static on;
   }
   

3. 修复配置语法错误
   配置第一行的pid /run/nginx.pid末尾缺少分号，这会导致Nginx无法加载配置。修正后应为：

   pid /run/nginx.pid;
   

4. 确认文件权限
   确保www-data用户对静态文件目录有读取权限：

   sudo chown -R www-data:www-data /home/user/Documents/myapp.com/CURRENT PROJECT/public
   sudo chmod -R 755 /home/user/Documents/myapp.com/CURRENT PROJECT/public
   

完整修正后的配置示例 #

user www-data;
pid /run/nginx.pid;

http {
    upstream loadbalance {
        least_conn;
        server myapp:8003;
    }

    server {
        listen 80;
        listen 443 ssl http2;
        server_name www.myapp.com;

        ssl_certificate         /etc/ssl/certs/cert.pem;
        ssl_certificate_key     /etc/ssl/private/key.pem;
        ssl_client_certificate /etc/ssl/certs/cloudflare.crt;

        return 301 https://myapp.com$request_uri;
    }

    server {
        root "/home/user/Documents/myapp.com/CURRENT PROJECT/public";
        server_name myapp.com;

        ##
        # SSL Settings
        ##
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        ssl_certificate         /etc/ssl/certs/cert.pem;
        ssl_certificate_key     /etc/ssl/private/key.pem;
        ssl_client_certificate /etc/ssl/certs/cloudflare.crt;

        # 处理/css路径下的静态文件
        location ^~ /css/ {
            expires max;
            gzip_static on;
        }

        # 处理/js路径下的静态文件
        location ^~ /js/ {
            expires max;
            gzip_static on;
        }

        # 处理其他静态资源后缀
        location ~* \.(woff|woff2|png|jpg|jpeg|webp|svg|mp3)$ {
            expires max;
            gzip_static on;
        }

        # 转发API请求到后端
        location / {
            proxy_http_version 1.1;
            proxy_request_buffering off;
            proxy_cache_bypass $http_upgrade;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            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;

            proxy_pass http://loadbalance;
        }
    }
}

验证步骤 #

1. 执行nginx -t检查配置语法是否正确
2. 执行systemctl reload nginx重新加载配置
3. 访问https://myapp.com/css/style.css测试静态文件是否正常返回

内容的提问来源于stack exchange，提问作者Janez Kranjski