无法通过Nginx同时暴露React前端与FastAPI后端，仅其一可正常访问

你的问题核心是Nginx代理路径的处理逻辑不对：当请求/api/docs时，Nginx当前的配置会把请求转发到http://backend:8000/api/docs，但FastAPI的/docs接口是在根路径下，所以后端找不到这个资源——直接访问localhost:8000/docs能正常访问也验证了这一点。

下面是两种可行的修复方案：

方案一：给proxy_pass添加末尾斜杠 #

修改Nginx配置中的后端代理规则，在proxy_pass的URL末尾加上斜杠，这样Nginx会自动把/api/前缀替换为根路径/：

server {
    listen 80;
    server_name my_app;

    # 代理前端React应用
    location / {
        proxy_pass http://app:3000;
    }

    # 代理FastAPI后端，注意proxy_pass末尾的斜杠
    location /api/ {
        proxy_pass http://backend:8000/;
    }
}

方案二：使用rewrite规则移除/api前缀 #

如果不想依赖proxy_pass的斜杠特性，可以通过rewrite指令手动去掉/api/前缀后再转发：

server {
    listen 80;
    server_name my_app;

    location / {
        proxy_pass http://app:3000;
    }

    location /api/ {
        # 把/api/开头的路径重写为去掉前缀后的路径
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://backend:8000;
    }
}

修改完成后，重启Nginx容器（docker-compose restart nginx），再访问http://localhost/api/docs就能正常加载FastAPI的文档页面了，同时前端的访问也不会受影响。

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