Ubuntu系统Nginx服务器下MERN栈应用React与Node.js公共文件夹区分配置咨询

我来帮你搞定这个问题！这种静态资源冲突的情况在MERN部署里挺常见的，核心是让Nginx能区分开哪些请求该交给React的静态资源，哪些该指向Node.js的public文件夹。下面分两种常用方案给你参考：

方案一：Nginx直接托管两个静态目录（适合无特殊逻辑的静态资源） #

如果你的Node.js public文件夹里都是纯静态文件（比如图片、文档），不需要Node服务做额外处理，最直接的方式是让Nginx直接托管这两个目录，按路径前缀区分。

假设你的目录结构是：

• React构建产物目录：/var/www/react-app/build
• Node.js的public目录：/var/www/node-app/public

修改你的Nginx站点配置文件（通常在/etc/nginx/sites-available/your-app.conf），添加以下规则：

server {
    listen 80;
    server_name your-domain.com;

    # 1. 先处理Node.js public文件夹的请求，用专属前缀区分
    location /node-public/ {
        alias /var/www/node-app/public/;
        expires 30d; # 静态资源缓存优化
        add_header Cache-Control "public, max-age=2592000";
    }

    # 2. 处理React的静态资源（CSS/JS/图片等）
    location / {
        root /var/www/react-app/build;
        try_files $uri $uri/ /index.html; # React路由的SPA fallback
    }

    # 3. 转发API请求到Node.js服务
    location /api/ {
        proxy_pass http://localhost:5000/; # 假设Node服务运行在5000端口
        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;
    }
}

配置解释： #

• location /node-public/：所有以/node-public/开头的请求，都会映射到Node.js的public目录。比如访问your-domain.com/node-public/avatar.jpg，实际读取的是/var/www/node-app/public/avatar.jpg
• location /：根路径的请求优先交给React的build目录，try_files保证React单页应用的路由能正常工作
• location /api/：API请求转发到Node.js服务

方案二：通过路径前缀转发给Node.js处理（适合需要Node逻辑的静态资源） #

如果你的Node.js public文件夹里的资源需要经过Node服务的处理（比如权限校验、动态生成），那就要把对应请求转发给Node服务，让Node自己处理静态资源。

假设你的Node.js服务已经用express.static('public')挂载了静态资源，修改Nginx配置：

server {
    listen 80;
    server_name your-domain.com;

    # 1. 转发Node静态资源请求到Node服务
    location /node-public/ {
        proxy_pass http://localhost:5000/; # Node服务会把这个路径映射到public目录
        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;
    }

    # 2. React静态资源与SPA路由
    location / {
        root /var/www/react-app/build;
        try_files $uri $uri/ /index.html;
    }

    # 3. API请求转发
    location /api/ {
        proxy_pass http://localhost:5000/api/;
        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;
    }
}

注意： #

这种情况下，你需要确保Node.js服务里的静态资源挂载路径和Nginx的转发前缀对应。比如如果Nginx转发/node-public/到http://localhost:5000/，那么Node里的express.static('public')会直接处理这个请求；如果Node里是挂载在/public路径下，那Nginx的proxy_pass要改成http://localhost:5000/public/。

后续必做步骤 #

1. 检查配置语法：执行sudo nginx -t，确保配置没有语法错误
2. 重启Nginx：执行sudo systemctl reload nginx让配置生效
3. 权限检查：确保Nginx的运行用户（通常是www-data）有两个目录的读取权限：

   sudo chown -R www-data:www-data /var/www/react-app/build /var/www/node-app/public
   sudo chmod -R 755 /var/www/react-app/build /var/www/node-app/public
   

这样配置后，你就可以同时访问React的静态资源（根路径）和Node.js的public资源（通过/node-public/前缀）了，API请求也能正常转发到Node服务。

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