在Azure容器实例部署React Docker容器遇端口转发异常求助

已知信息梳理 #

• 应用镜像托管在Docker Hub公共仓库，拉取命令：docker pull lylediego/monsters-rolodex:22
• 本地启动命令：docker run -d -p 8000:3000 <image-id>，本地访问http://localhost:8000/monster可正常加载应用
• 镜像内应用默认监听3000端口，Dockerfile已通过EXPOSE 3000声明端口

排查步骤（按问题出现概率排序） #

1. 检查ACI端口映射配置 #

ACI的端口映射规则和本地Docker启动有差异，创建实例时必须显式配置对应关系，且实例创建后不支持修改端口配置，配错只能删除重建：

• 配置端口时，目标端口必须填容器内应用实际监听的3000，公开端口可根据需求自定义（比如80、8000均可）
• 传输协议选择TCP，不要误选UDP
• 确认实例开启了公共IP地址，若选了私有网络类型，公网环境无法直接访问

2. 修复React开发服务监听地址限制 #

当前Dockerfile用npm start启动的是create-react-app内置的webpack开发服务，默认仅绑定127.0.0.1回环地址，仅允许容器内部访问，云环境的网络转发无法触达该服务——本地Docker桌面版会自动做网络适配所以能正常访问，但部署到ACI这类云容器环境会直接失效。
修复方式为修改启动命令，让服务监听0.0.0.0所有网卡地址，调整Dockerfile的CMD行如下：

CMD ["npm", "start", "--", "--host", "0.0.0.0"]

修改后重新构建镜像推送到Docker Hub，再重新部署到ACI即可。

3. 部署后校验 #

部署完成后可通过两个维度确认服务状态：

• 在Azure门户容器实例的「容器-日志」页查看启动日志，若出现Compiled successfully、On Your Network: http://<容器内网IP>:3000字样，说明容器内服务启动正常
• 访问时使用概览页提供的FQDN全限定域名，不要手动拼接IP，若公开端口不是80/443，访问时必须带上端口号，格式为http://<ACI的FQDN>:<配置的公开端口>/monster

复现验证指引 #

持有Azure订阅的用户可按以下步骤复现验证问题：

• 拉取目标镜像：docker pull lylediego/monsters-rolodex:22
• 创建ACI实例时选择公共镜像源，填入上述镜像地址
• 先按错误配置（目标端口填8000、或不修改服务监听地址）部署验证访问失败场景
• 按上述步骤调整监听地址、正确配置端口映射后重新部署，即可正常访问

小提示：如果后续要做生产环境部署，不建议直接用npm start跑开发服务，可将React代码打包为静态文件后用Nginx托管，稳定性和性能会更好，该优化不影响当前问题的排查修复。

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