Docker中React开发应用无法从Windows外部访问app.my-host.com

问题背景 #

React开发应用通过Docker Compose运行，相关配置如下：

Docker Compose 文件 #

version: '3.8'
services:
  my_frontend:
    build:
      context: ../
      dockerfile: ./deployment/Dockerfile.dev
    ports:
      - 80:80
    extra_hosts:
      - "app.my-host.com:127.0.0.1"
    env_file:
      - ../src/environment/.env.local.dev
    volumes:
      - ../src:/app/src
      - /app/node_modules
    stdin_open: true
    tty: true

Dockerfile.dev 文件 #

FROM node:18-alpine

RUN apk update && apk upgrade && \
    apk add --no-cache bash git openssh curl

WORKDIR /app

COPY package.json /app/

RUN npm install

COPY . /app/

EXPOSE 80

CMD [ "npm", "start" ]

当前状态：

• 容器构建运行正常
• 容器内部通过curl http://app.my-host.com可正常访问
• Windows笔记本外部无法访问该地址，已尝试extra_hosts配置未解决
• React应用通过环境文件指定HOST为app.my-host.com

解决思路 #

1. 添加Windows本地hosts映射 #

Docker Compose的extra_hosts仅作用于容器内部，无法让Windows主机识别该域名。需要在本地hosts文件中添加映射：

• 以管理员权限打开C:\Windows\System32\drivers\etc\hosts文件
• 添加一行：127.0.0.1 app.my-host.com
• 保存后执行命令ipconfig /flushdns刷新DNS缓存

2. 修改React服务器监听地址 #

React开发服务器默认可能仅绑定127.0.0.1，导致容器外部无法访问：

• 检查环境文件../src/environment/.env.local.dev，将HOST设置为HOST=0.0.0.0（同时保留域名映射不影响内部访问）
• 或者修改package.json的启动命令，强制绑定到所有网卡：

  "scripts": {
    "start": "HOST=0.0.0.0 PORT=80 react-scripts start"
  }
  

3. 验证端口与防火墙配置 #

• 确认Docker Compose的ports: - 80:80配置生效，容器80端口已映射到Windows主机80端口
• 检查Windows防火墙是否允许80端口的入站连接，可临时关闭防火墙测试，若能访问则添加对应允许规则

4. 检查容器内监听状态 #

进入容器执行netstat -tulpn，确认React服务器是否监听0.0.0.0:80。如果仅监听127.0.0.1或app.my-host.com，外部将无法访问。

内容的提问来源于stack exchange，提问作者Vimal Kurien Sam