多Docker容器NGINX路由配置问题：/api请求未转发至Flask

我搭建的系统包含SvelteKit前端（容器名frontend，端口5001）和Flask后端（容器名backend，端口5002），分别部署在独立Docker容器，用NGINX做反向代理。需求是：

• 所有不以/api开头的请求转发到SvelteKit
• 以/api开头的请求转发到Flask

当前NGINX配置如下：

worker_processes 1;

events { worker_connections 1024; }

http {
    sendfile on;

    upstream backend {
        server backend:5002;
    }

    upstream frontend {
        server frontend:5001;
    }

    server {
        listen 80;

        location / {
            proxy_pass http://frontend;
            proxy_redirect     off;
            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-Host $server_name;
        }
    }

    server {
        listen 80;

        location /api {
            proxy_pass http://backend;
            proxy_redirect     off;
            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-Host $server_name;
        }
    }
}

docker ps输出：

CONTAINER ID   IMAGE                  COMMAND                  CREATED          STATUS         PORTS                                       NAMES
02e5f32f3b5f   stopssis_v2_nginx      "/docker-entrypoint.…"   7 minutes ago    Up 6 minutes   0.0.0.0:80->80/tcp, :::80->80/tcp           nginx
4ebe13b534db   stopssis_v2_frontend   "docker-entrypoint.s…"   26 minutes ago   Up 6 minutes   0.0.0.0:5001->5001/tcp, :::5001->5001/tcp   frontend
94345bfd5123   stopssis_v2_backend    "python ./app/run.py"    26 minutes ago   Up 6 minutes   0.0.0.0:5002->5002/tcp, :::5002->5002/tcp   backend

现在/api开头的请求仍被转发到SvelteKit，需要修正配置，同时求推荐NGINX可视化学习资源。

原因分析 #

你配置了两个监听80端口的server块，NGINX会将所有请求匹配到第一个server块（未指定server_name时，第一个server会成为默认服务器），导致/api请求也进入location /规则，被转发到前端。

修正后的配置 #

将两个server块合并，在同一个server内定义不同的location规则，NGINX会优先匹配更精确的location（/api优先级高于/）：

worker_processes 1;

events { worker_connections 1024; }

http {
    sendfile on;

    upstream backend {
        server backend:5002;
    }

    upstream frontend {
        server frontend:5001;
    }

    server {
        listen 80;

        # 优先匹配/api开头的请求
        location /api {
            proxy_pass http://backend;
            proxy_redirect     off;
            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-Host $server_name;
            # 可选：若后端接口无/api前缀，添加此行去掉请求前缀
            # rewrite ^/api(.*)$ $1 break;
        }

        # 其他所有请求转发到前端
        location / {
            proxy_pass http://frontend;
            proxy_redirect     off;
            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-Host $server_name;
        }
    }
}

验证步骤 #

1. 修改配置后重启NGINX容器：docker restart nginx
2. 测试/api请求（如curl http://localhost/api/test），确认转发到Flask后端
3. 测试非/api请求（如curl http://localhost），确认转发到SvelteKit前端

• NGINX官方可视化配置工具：通过拖拽操作生成基础配置，实时同步对应NGINX代码，快速理解规则匹配逻辑
• Location匹配优先级流程图：查看静态流程图，直观掌握=、^~、~等修饰符的匹配顺序，理清路由优先级规则
• Docker+NGINX拓扑图：查看容器化场景下的反向代理架构图，理解容器间网络通信和请求转发路径
• 请求处理阶段动画演示：部分技术博主制作的动画，展示请求从进入NGINX到转发后端的全流程，清晰呈现各处理阶段的作用

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