配置Nginx与Express实现Node应用静态文件正确访问

服务器上已部署的Django项目可通过https://server.com正常访问，现在新增了一个基于Express+Parcel的Node.js应用，需要通过https://server.com/nodeapp路径提供服务。

当前Nginx配置：

server {
    server_name server.com;

    location / {
            proxy_pass http://unix:/run/gunicorn.sock;
    }

    location /static {
            expires -1;
            alias /home/user/django/static;
    }

    location /nodeapp {
            proxy_pass http://localhost:8001/;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Node应用的index.js代码：

import express from 'express';

const app = express()
const port = 8001
const __dirname = import.meta.dirname;

app.use('/', express.static('dist'));

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    next();
});

app.listen(port, () => {
    console.log(`Listening on port ${port}`)
})

Parcel已将应用打包到dist目录，但访问https://server.com/nodeapp时，仅能加载根目录的index.html，所有静态资源（如css、js、图片）都无法找到——这些资源的请求路径是https://server.com/xxx，而非预期的https://server.com/nodeapp/xxx。

解决方案 #

方案一：调整Nginx配置（无需修改Node/Parcel代码） #

当前Nginx配置里，/nodeapp的proxy_pass末尾带斜杠，会把/nodeapp路径去掉直接转发到Node服务根目录，导致静态资源路径不匹配。可以通过重写规则修复：

修改后的Nginx配置：

server {
    server_name server.com;

    location / {
            proxy_pass http://unix:/run/gunicorn.sock;
    }

    location /static {
            expires -1;
            alias /home/user/django/static;
    }

    location /nodeapp {
            rewrite ^/nodeapp/(.*)$ /$1 break;
            proxy_pass http://localhost:8001;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

说明：

• 去掉proxy_pass末尾的斜杠，避免Nginx自动截断路径；
• rewrite规则把/nodeapp/xxx重写为/xxx后转发给Node服务，这样Node的静态资源路由能正确匹配请求。

方案二：调整Node+Parcel配置（规范路径前缀） #

如果不想改Nginx，也可以让Parcel打包时给静态资源加上/nodeapp前缀，同时调整Express的挂载路径：

1. 修改Parcel打包命令
   在项目的package.json里更新build脚本，指定公共路径：

{
  "scripts": {
    "build": "parcel build --public-url /nodeapp/"
  }
}

执行npm run build重新打包，Parcel会自动给所有静态资源的引用路径加上/nodeapp/前缀。

2. 修改Express配置
   把静态资源挂载到/nodeapp路径下：

import express from 'express';

const app = express()
const port = 8001
const __dirname = import.meta.dirname;

// 将静态资源挂载到/nodeapp路径
app.use('/nodeapp', express.static('dist'));

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    next();
});

app.listen(port, () => {
    console.log(`Listening on port ${port}`)
})

这样原Nginx配置无需改动，访问https://server.com/nodeapp时，静态资源请求路径会自动带上/nodeapp前缀，能被正确匹配。

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