MacOS下Docker部署的React应用无法连接后端微服务

我正尝试将React应用从Windows完全迁移到MacOS环境，由于依赖问题，本次采用Docker编译并启动React应用。应用本身运行正常，但无法连接到后端微服务。后端通过docker-compose启动，其中有一个作为主服务的http-proxy，负责对接所有其他微服务，也是前端连接的目标服务。为何在Windows下能正常连接，而在MacOS+Docker环境下出现连接问题？

React应用Dockerfile #

FROM node:16.20.0-alpine
# Install git
RUN apk update && apk add git
# Create app directory
WORKDIR /Users/lucagirotti/Documents/TNO/lumos
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./
RUN npm install --force
#To bundle your app’s source code inside the Docker image, use the COPY instruction:
COPY . .
#Your app binds to port 3000 so you’ll use the EXPOSE instruction to have it mapped by the docker daemon:
EXPOSE 3000
CMD ["npm", "start"]

后端docker-compose.yaml #

version: '3'

services:

  http-proxy:
    image: nginx:1.23-alpine
    restart: unless-stopped
    networks:
      - internal
    ports:
      - 8443:443
    volumes:
      - ./provisioning/proxy/certificates:/etc/nginx/certificates
      - ./provisioning/proxy/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - frontend-lobby
      - frontend-client
      - socketio-nats-proxy
      - scene-controller

  nats:
    image: nats:2.3-alpine
    restart: unless-stopped
    networks:
      - internal
    ports:
      - 4222:4222 # Main messaging
      - 8222:8222 # Monitoring

  mongodb:
    image: bitnami/mongodb:4.4.15
    restart: always
    networks:
      - internal
    volumes:
      - mongodb:/bitnami/mongodb
      - ./provisioning/mongodb/docker-entrypoint-initdb.d/:/docker-entrypoint-initdb.d/:ro
    environment:
      # Databases and users are created in ./docker-entrypoint.initdb.d/mongo-init.js
      MONGODB_INITIAL_PRIMARY_PORT_NUMBER: 27017

  nats-logger:
    image: ci.tno.nl/socialxr/services/nats-logger:master
    restart: unless-stopped
    networks:
      - internal
    depends_on:
      - nats
    environment:
      NATS_ADDRESS: nats:4222

  frontend-lobby:
    image: ci.tno.nl/vrtogether/togethervr2:feature-nats-backend-lobby
    networks:
      - internal

  frontend-client:
    image: ci.tno.nl/vrtogether/togethervr2:feature-nats-backend-client
    networks:
      - internal

  socketio-nats-proxy:
    image: ci.tno.nl/socialxr/socketio-nats-proxy:master
    restart: unless-stopped
    networks:
      - internal
    depends_on:
      - nats
    environment:
      NATS_ADDRESS: nats:4222
      PORT: 8080 # Port within the container.

  session-controller:
    image: ci.tno.nl/socialxr/services/session-controller:master
    restart: unless-stopped
    networks:
      - internal
    depends_on:
      - nats
      - mongodb
    environment:
      NATS_ADDRESS: nats:4222
      STORAGE_URI: mongodb://u-sec:pw@mongodb:27017/session-controller?replicaSet=socialxrlab

  scene-controller:
    image: ci.tno.nl/socialxr/services/scene-controller:master
    restart: unless-stopped
    networks:
      - internal
    depends_on:
      - nats
    environment:
      NATS_ADDRESS: nats:4222
      HTTP_PORT: 8080

  media-controller-manager:
    image: ci.tno.nl/socialxr/services/media-controller-manager:master
    restart: unless-stopped
    networks:
      - internal
    depends_on:
      - nats
    environment:
      NATS_ADDRESS: nats:4222

  p2p-media-controller:
    image: ci.tno.nl/socialxr/services/p2p-media-controller:master
    restart: unless-stopped
    networks:
      - internal
    depends_on:
      - nats
      - mongodb
    environment:
      NATS_ADDRESS: nats:4222
      STORAGE_URI: mongodb://u-p2pmc:pw@mongodb:27017/p2p-media-controller?replicaSet=socialxrlab


volumes:
  mongodb:

networks:
  internal:

问题原因与解决方案 #

1. Docker网络访问差异 #

Windows和MacOS的Docker网络实现存在差异：

• Windows下Docker默认支持host.docker.internal直接访问宿主机端口，且容器间网络互通逻辑更宽松；
• MacOS下，如果React容器和后端internal网络不在同一Docker网络，前端无法直接通过服务名访问http-proxy，即使使用host.docker.internal，也需确保前端配置的后端地址正确。

解决：

• 将React容器加入后端的internal网络：修改React的启动命令（或添加docker-compose配置），加入参数--network=internal，这样前端可直接用http-proxy:443访问后端代理；
• 若前端需通过宿主机访问，将前端配置的后端地址改为https://host.docker.internal:8443，而非Windows下可能使用的localhost或服务名。

2. React容器WORKDIR路径问题 #

Dockerfile中WORKDIR /Users/lucagirotti/Documents/TNO/lumos是MacOS宿主机的绝对路径，在容器内创建该路径可能触发权限问题，且无必要绑定宿主机用户目录。

解决：
将WORKDIR改为容器内通用路径，例如：

WORKDIR /app

3. HTTPS证书信任问题 #

后端http-proxy使用HTTPS，MacOS下Docker容器内的Node环境可能不信任自签名证书，而Windows下可能已手动导入信任证书。

解决：

• 开发环境可在React容器启动时添加环境变量NODE_TLS_REJECT_UNAUTHORIZED=0（生产环境需导入信任证书）；
• 或在Dockerfile中复制证书到容器，配置Node信任该证书。

4. 端口与防火墙限制 #

MacOS的防火墙可能阻止Docker容器访问宿主机8443端口，而Windows下防火墙规则可能已开放该端口。

解决：
检查MacOS防火墙设置，允许Docker应用访问网络，或手动开放8443端口。

内容的提问来源于stack exchange，提问作者Luca Girotti