如何将Docker入站连接绑定到容器内指定hostname的Webpack服务

核心原理说明 #

Webpack devServer配置host: 'dev.ng.com'结合extra_hosts配置后，服务实际仅绑定了容器内部的127.0.0.1:4000，该地址为容器本地回环地址，默认仅支持容器内部访问，宿主机端口映射的入站请求默认发往容器的0.0.0.0网段，因此无法触达Webpack服务。

无需修改原有Webpack配置的实现方案 #

方案1：容器内iptables流量转发（推荐） #

通过iptables的NAT规则将容器入站4000端口的流量全部重定向到127.0.0.1:4000，仅需修改docker-compose配置即可：

gui-client:
  image: "gui-client"
  ports:
    - "4000:4000"
  extra_hosts:
    - "dev.ng.com:127.0.0.1"
  # 新增配置
  cap_add:
    - NET_ADMIN
  command: /bin/sh -c "iptables -t nat -A PREROUTING -p tcp --dport 4000 -j DNAT --to-destination 127.0.0.1:4000 && 替换为原有服务启动命令，例如npm run dev"

该方案无需修改镜像内容，仅通过容器启动参数即可实现转发，性能损耗极低。

方案2：socat端口转发 #

如果不想给容器开放NET_ADMIN权限，可以在容器内安装socat工具做流量中转：

1. 在镜像构建步骤（Dockerfile）中添加socat安装命令，例如Debian/Ubuntu系镜像添加：

RUN apt update && apt install -y socat

2. 修改docker-compose的启动命令：

gui-client:
  image: "gui-client"
  ports:
    - "4000:4000"
  extra_hosts:
    - "dev.ng.com:127.0.0.1"
  command: /bin/sh -c "socat TCP-LISTEN:4000,fork TCP:127.0.0.1:4000 & 替换为原有服务启动命令，例如npm run dev"

访问验证 #

保持宿主机/etc/hosts中127.0.0.1 dev.ng.com的配置不变，直接访问dev.ng.com:4000即可获得和原有环境完全一致的使用体验。

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