如何在Nginx中实现同一域名下部署两个React应用及NodeJS API

嗨，我来帮你搞定这个Nginx配置的问题！你现在的需求很明确：同一个域名下，根路径跑React APP1，/admin路径跑React APP2，同时/api路径代理到你的NodeJS API对吧？之前的配置踩了两个常见坑，咱们一步步调整过来。

先分析你之前遇到的问题 #

1. 用root配置/admin路径时，Nginx会自动把/admin拼到你指定的root目录后面，也就是去/var/www/APP2/dist/admin找文件，但你的APP2打包后的文件都在dist根目录，自然找不到资源。
2. 改用alias时，index.html能加载，但组件出不来，这是因为React打包时默认用根路径作为静态资源的前缀，导致APP2的静态资源（比如js、css）会请求/static/xxx，而不是/admin/static/xxx，Nginx找不到这些资源，组件就加载失败了。

正确的Nginx配置方案 #

先给你完整的配置代码，再逐个解释关键点：

server {
    listen 80;
    server_name mydomain.com;

    # 代理NodeJS API，添加header确保请求正确传递到后端
    location /api/ {
        proxy_pass http://localhost:3003/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 根路径的React APP1，和你之前的配置基本一致
    location / {
        root /var/www/APP1/dist/;
        index index.html;
        # 处理React客户端路由，把非文件请求都指向index.html
        try_files $uri $uri/ /index.html;
    }

    # /admin路径的React APP2，重点看这里的配置
    location /admin {
        alias /var/www/APP2/dist/;
        index index.html;

        # 单独处理静态资源，确保js、css、图片等能被正确匹配
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
            alias /var/www/APP2/dist/;
            expires 1y; # 给静态资源加长期缓存，提升访问性能
            add_header Cache-Control "public, immutable";
        }

        # 处理React客户端路由，注意要指向/admin/index.html
        try_files $uri $uri/ /admin/index.html;
    }
}

关键配置说明 #

1. 用alias替代root：alias会直接把/admin路径映射到/var/www/APP2/dist/目录，而不是像root那样拼接路径，这样访问/admin时，Nginx会直接去APP2的dist目录找文件，不会多一层不存在的admin子目录。
2. 必须给APP2设置PUBLIC_URL：这是解决组件加载失败的核心！在打包APP2的时候，要指定静态资源的前缀为/admin，命令如下：
   • Linux/macOS：PUBLIC_URL=/admin npm run build
   • Windows：set PUBLIC_URL=/admin && npm run build
     这样React打包出来的静态资源路径会变成/admin/static/js/xxx.js，Nginx就能通过alias正确匹配到这些资源了。
3. 调整try_files路径：对于APP2的路由，要把所有非静态资源的请求指向/admin/index.html，这样React Router才能正确处理客户端路由，不会出现刷新页面404的问题。

最后要做的事 #

• 先检查Nginx配置是否有语法错误：sudo nginx -t
• 如果没问题，重启Nginx生效：sudo nginx -s reload
• 确保APP2的dist目录权限正确，Nginx有读取权限：sudo chown -R www-data:www-data /var/www/APP2/dist/

备注：内容来源于stack exchange，提问作者mehmetakkus