如何配置Docker Compose使仅React应用可访问.NET Core API？

核心问题分析 #

你当前的back-app配置里，ports字段是把容器的5000/5001端口映射到了主机端口，这就导致外部可以通过主机IP+端口直接访问API。要实现“仅内部可访问”，核心就是移除端口映射，同时利用Docker Compose默认的内部网络实现服务间通信。

分场景解决方案 #

场景1：React是容器内服务直接调用API（非浏览器端JS）

这种情况下，直接修改docker-compose.yml即可：

version: "3.9"
services:
    front-app:
        image: <image>
        build: <image path>
        ports:
            - "3000:80"
        # links 在Compose 3.x+版本已无需配置，服务名可直接作为DNS解析
    back-app:
        image: <image>
        build: <image path>
        # 移除ports配置，彻底禁止外部通过主机端口访问API
        environment:
            - ASPNETCORE_URLS=http://+:5000
            # 注意：ASPNETCORE_HTTP_PORT不是.NET Core官方标准变量，建议仅保留ASPNETCORE_URLS

关键说明：

• 移除back-app的ports：这是阻止外部访问的核心操作，没有端口映射，外部无法直接触达容器内的API服务。
• Docker Compose默认会为所有服务创建专属桥接网络，服务之间可以通过服务名（比如back-app）直接访问对方容器内的端口，所以front-app容器里的代码可以用http://back-app:5000调用API。
• 确保.NET Core API监听所有网络接口：ASPNETCORE_URLS=http://+:5000会让API监听容器内的所有接口，允许来自内部网络的请求。

场景2：React是浏览器端JS调用API

如果是浏览器里的React代码直接发起API请求，此时浏览器的请求来自外部主机，直接去掉API端口映射会导致浏览器无法访问。这时需要在front-app容器里配置反向代理，将API请求转发到内部网络：

1. 以Nginx作为静态文件服务器为例，修改Nginx配置文件（比如default.conf）：

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    # 反向代理所有/api开头的请求到内部API服务
    location /api/ {
        proxy_pass http://back-app:5000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 处理React单页应用的路由刷新问题
    location / {
        try_files $uri $uri/ /index.html;
    }
}

2. 修改docker-compose.yml（如果构建镜像时已打包Nginx配置，可省略volumes挂载）：

version: "3.9"
services:
    front-app:
        image: <image>
        build: <image path>
        ports:
            - "3000:80"
        # 本地调试时可挂载配置文件到容器，生产建议直接打包进镜像
        # volumes:
        #     - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    back-app:
        image: <image>
        build: <image path>
        environment:
            - ASPNETCORE_URLS=http://+:5000

关键说明：

• React代码里的API请求地址要改成相对路径，比如/api/get-data，而非http://localhost:5000/get-data。
• Nginx会将/api开头的请求转发到内部的back-app:5000，外部只能访问React的3000端口，无法直接触达API。

新手额外注意点 #

• 测试内部连通性：可以用docker exec -it <front-app容器ID> curl http://back-app:5000验证front-app容器是否能正常调用API。
• 不要限制API监听IP：不要把API的监听地址设为localhost，否则会拒绝来自内部网络的容器请求，必须监听0.0.0.0或+。

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