如何解决Azure App Service多容器中Nginx代理/api路径404问题？

问题根源 #

你当前的Nginx配置完全搞反了代理指向：根路径/被代理到了后端Express，而/api/路径被代理到了前端React，这和你的需求正好相反。访问/api返回404，是因为前端React没有对应/api的路由逻辑。

修正后的Nginx配置 #

upstream frontend {
    server react:3000;
}

upstream backend {
    server express:8000;
}

server {
    listen       80;
    listen  [::]:80;
    server_name _;

    # 根路径代理至React前端
    location / {
        proxy_pass http://frontend;
        # 添加必要代理头，确保React正确识别请求环境
        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;
    }

    # /api路径代理至Express后端
    location /api/ {
        # 注意结尾斜杠：若后端接口路由不带/api前缀（如/users），保留斜杠，Nginx会自动去掉/api前缀传递请求
        # 若后端接口路由带/api前缀（如/api/users），则去掉结尾斜杠，保持完整路径传递
        proxy_pass http://backend/;
        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;
    }
}

额外验证步骤 #

1. 路由匹配检查：根据Express后端的实际路由结构调整proxy_pass的结尾斜杠，确保请求路径能正确匹配后端接口。
2. 容器连通性验证：通过docker compose logs查看三个容器的启动日志，确认react和express容器无启动报错，且nginx容器能正常解析react、express的服务名（Docker Compose默认会为所有服务创建同一桥接网络，服务名可直接作为域名访问）。
3. 镜像更新部署：将修改后的Nginx配置重新构建镜像，推送至Azure容器注册表（ACR），再更新Azure App Service的部署以加载新配置。

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