在新版Docker（Mac环境）中通过Docker Compose获取宿主机IP

针对你的场景（React容器需连接宿主机API，且支持局域网访问），下面是新版Docker for Mac下的可行方案：

1. 容器内访问宿主机：用内置DNS（仅本地测试） #

Docker for Mac原生提供host.docker.internal这个特殊DNS，会自动解析到宿主机IP。在docker-compose.yml中给React容器配置环境变量：

services:
  react-app:
    build: .
    environment:
      - REACT_APP_API_BASE_URL=http://host.docker.internal:你API的端口号
    ports:
      - "3000:3000"

React代码里读取变量：

const apiBaseUrl = process.env.REACT_APP_API_BASE_URL || 'http://localhost:你API的端口号';

局限：这个DNS只能在容器内部解析，局域网其他机器访问React应用时，无法识别host.docker.internal，所以仅适合本地开发测试。

2. 支持局域网访问：动态注入宿主机局域网IP #

要让局域网设备正常访问，必须把宿主机的局域网IP传给React容器，步骤如下：

1. 终端执行命令获取Mac的局域网IP（通常是en0接口，不对就换en1）：

export HOST_IP=$(ifconfig en0 | grep inet | awk '$1=="inet" {print $2}')

2. 修改docker-compose.yml，引用这个环境变量：

services:
  react-app:
    build: .
    environment:
      - REACT_APP_API_BASE_URL=http://${HOST_IP}:你API的端口号
    ports:
      - "3000:3000"

3. 启动容器时直接传递变量：

HOST_IP=$(ifconfig en0 | grep inet | awk '$1=="inet" {print $2}') docker-compose up -d

这样React应用会使用宿主机的局域网IP作为API地址，局域网内其他机器访问时就能正常连接API了。

3. 新版Docker Compose的简化写法（可选） #

Docker Compose v2+支持在配置中直接嵌入shell命令，但依赖终端环境，稳定性不如方法2：

services:
  react-app:
    build: .
    environment:
      - REACT_APP_API_BASE_URL=http://$(ifconfig en0 | grep inet | awk '$1=="inet" {print $2}'):你API的端口号
    ports:
      - "3000:3000"

关键注意事项 #

• React环境变量必须以REACT_APP_开头，Create React App才会将其注入应用。
• 确保Mac防火墙允许API端口的入站连接，否则局域网设备无法访问。
• 如果你的API也运行在Docker容器中，直接用Compose服务名访问（比如http://api-service:端口）更可靠，无需宿主机IP。

内容的提问来源于stack exchange，提问作者Carlos Sosa