ExpressJS子目录部署NGINX反向代理静态资源加载问题

1. 修正Express静态资源挂载前缀 #

问题根源是Express未给静态资源设置正确的挂载路径，导致前端请求指向网站根目录。修改app.js：

const path = require('path');
// 将静态资源挂载到/nlapp/public路径，对应本地public目录
app.use('/nlapp/public', express.static(path.join(__dirname, 'public')));

同时检查signup.html里的资源引用，改用绝对路径：

<!-- 错误写法 -->
<link rel="stylesheet" href="/css/style.css">
<!-- 正确写法 -->
<link rel="stylesheet" href="/nlapp/public/css/style.css">

若想用相对路径，确保页面路由为/nlapp，相对路径./public/css/style.css会被解析为/nlapp/public/css/style.css，但绝对路径更稳定。

2. 配置NGINX反向代理 #

确保NGINX把/nlapp开头的请求转发给Express（假设Express运行在3000端口），修改server块配置：

server {
    listen 443 ssl;
    server_name website.com www.website.com;

    # 主站原有配置
    root /var/www/website.com/public_html;
    index index.html index.php;

    # 转发Express请求
    location /nlapp/ {
        proxy_pass http://localhost:3000/;
        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;
    }

    # 可选：NGINX直接处理静态资源（减少Express负载）
    location /nlapp/public/ {
        alias /var/www/website.com/public_html/nlapp/public/;
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
    }

    # SSL等其他原有配置
    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;
}

注意：

• proxy_pass末尾的/必须保留：它会把/nlapp/xxx转发为/xxx到Express；如果省略，会转发为/nlapp/xxx，此时Express路由需对应调整。
• 使用alias时，路径末尾的/要和请求路径匹配，避免路径拼接错误。

3. 重启服务验证 #

• 重启Express应用，加载新配置。
• 检查NGINX配置语法：nginx -t
• 重启NGINX：systemctl restart nginx

之后打开浏览器开发者工具，确认静态资源请求路径为https://www.website.com/nlapp/public/css/xxx.css这类正确路径。

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