macOS Catalina下Docker运行Angular-cli项目无法通过localhost访问

问题根源 #

Angular 自带的开发服务器ng serve默认仅绑定容器内部的localhost（127.0.0.1）回环地址，仅允许容器内部的进程访问该服务，因此哪怕配置了端口映射，宿主机也无法访问容器内的前端服务。

解决方案 #

修改Dockerfile中的启动命令，指定服务绑定所有网卡地址，并关闭开发环境的 host 访问校验：

# 替换原有CMD行即可，其余配置保持不变
CMD ["ng", "serve", "--host", "0.0.0.0", "--disable-host-check"]

注意：--disable-host-check仅适用于本地开发场景，生产环境打包部署时不要加该参数。

如果开发过程中需要使用热更新功能，可额外添加--poll参数解决Docker容器跨操作系统文件监听失效的问题：

CMD ["ng", "serve", "--host", "0.0.0.0", "--disable-host-check", "--poll", "2000"]

验证步骤 #

1. 重新构建镜像：docker build -t appname .
2. 启动容器：docker run -d -p 4200:4200 appname
3. 宿主机打开浏览器访问http://localhost:4200即可正常访问项目

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