Docker部署React+ASP.NET Core项目遇net::ERR_CONNECTION_TIMED_OUT问题

问题描述 #

将React项目、ASP.NET Core 6.0 API与SQL Server数据库通过Docker Compose部署后，出现以下异常：

• React容器可成功ping通api容器，但通过HTTP调用API的GraphQL端点时，抛出net::ERR_CONNECTION_TIMED_OUT错误
• 当React应用配置REACT_APP_BASE_URL="http://localhost:5555"时，项目可正常运行

相关配置文件 #

Docker Compose配置

version: '3.9'
services:
  # UI Container spec. note that 'ui' is the name of the container internally (also 'container_name')
  ui:
    container_name: myapp-ui-prod
    image: myapp-ui-prod
    env_file: ./UI/.env
    build:
      context: ./UI
      dockerfile: DockerFile_UI.prod    
    ports:
      - 1337:80
    networks:
      - psnetwork
    links:
      - api

  # Database Container spec.
  sql:
    container_name: myapp-sql
    image: myapp-sql
    environment:
      ACCEPT_EULA: 'Y'
      SA_PASSWORD: 'Pa55w0rd'
    build:
      context: ./DockerDB
      dockerfile: DockerFile_SQL
    ports:
      - 1633:1433 # Map 1433 from inside the container to 1633 host to avoid port conflict with local install
    networks:
      - psnetwork
    
  # API container spec.
  api:
    container_name: myapp-api
    image: myapp-api
    build:
      context: ./Api
      dockerfile: DockerFile_API
    environment:
      ASPNETCORE_ENVIRONMENT: Development
      ASPNETCORE_URLS: http://+:5555
    ports:
        - "5555:5555"
    networks:
      - psnetwork
    links:
      - sql
networks:
  psnetwork:
    driver: bridge

Nginx配置（UI容器内）

upstream api_backend {
    server api:5555;
    keepalive 8;
}

server {
  listen 80;
  
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

  # server_name example.com;
  location /api {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;

    proxy_pass http://api/api;
    proxy_redirect off;
  }
}

React ApolloClient配置

const client = new ApolloClient({
    uri: process.env.REACT_APP_BASE_URL+ '/api/graphql',
    cache: new InMemoryCache()
});

UI容器.env文件

REACT_APP_BASE_URL="http://api:5555"

原因分析 #

核心问题在于React应用的API请求是从浏览器发起的，Docker内部的api服务域名仅能在容器网络内解析，外部浏览器无法识别。当配置REACT_APP_BASE_URL="http://api:5555"时，浏览器会尝试解析api这个不存在的公网域名，最终导致连接超时。

而使用localhost:5555能正常运行，是因为浏览器将请求发送到宿主机的5555端口，该端口已映射到API容器的5555端口。

解决方案 #

方案一：利用Nginx反向代理（生产环境推荐） #

借助UI容器内的Nginx反向代理，让React应用请求当前域名的/api路径，由Nginx转发到API容器：

1. 修改UI容器的.env文件：

REACT_APP_BASE_URL="/api"

2. 调整ApolloClient的URI配置（拼接后为/api/graphql）：

const client = new ApolloClient({
    uri: `${process.env.REACT_APP_BASE_URL}/graphql`,
    cache: new InMemoryCache()
});

3. 修正Nginx的反向代理配置（补充API端口）：

location /api {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;

    proxy_pass http://api:5555/api; # 补充API容器的端口5555
    proxy_redirect off;
}

配置完成后，浏览器请求http://localhost:1337/api/graphql时，Nginx会将请求转发到Docker内部的api:5555/api/graphql，既解决了域名解析问题，也符合生产环境安全规范。

方案二：通过宿主机IP访问API（仅适合开发调试） #

开发阶段可将.env中的地址改为宿主机IP+端口：

REACT_APP_BASE_URL="http://你的宿主机IP:5555"

此方式不推荐生产环境使用，宿主机IP可能变动且直接暴露API端口存在安全风险。

额外检查项 #

• 确认API容器的5555端口正常监听：进入API容器执行netstat -tulpn，查看是否有进程监听0.0.0.0:5555
• 验证Docker网络psnetwork状态：执行docker network inspect psnetwork，检查三个容器是否都在该网络内
• 检查API的CORS配置：若浏览器报跨域错误，需在ASP.NET Core中允许UI域名（如http://localhost:1337）的跨域请求

内容的提问来源于stack exchange，提问作者amin mohammadi