React mono-repo项目Docker端口映射不生效无法访问

端口访问失败核心原因是nx serve启动的开发服务器默认仅监听容器内部的127.0.0.1回环地址，未绑定到允许外部流量访问的0.0.0.0地址，即使配置了端口映射，宿主机流量也无法转发到容器内的服务上。
除此之外你的Dockerfile存在几处冗余/无效配置：

• 构建阶段执行yarn run build生成dist产物后，额外执行了COPY ./dist/apps/project-web .，但启动命令用的是开发模式的nx serve，该命令启动时会实时编译源码，完全不会用到提前构建好的静态文件，这几步操作只会徒增镜像体积。
• 单独全局安装nx的步骤多余，项目devDependencies中已经声明了nx依赖，本地安装的版本可直接调用。

根据你是要跑开发环境还是生产环境，二选一即可：

方案1：保留开发模式启动（nx serve） #

只需要给启动命令增加--host 0.0.0.0参数，让服务监听所有网卡地址，两种改法选一个就行：

• 临时测试不用改Dockerfile，直接在启动容器时覆盖启动命令：

docker run --name project-web_c1 -p 3333:4200 -d project-web1 yarn nx serve --host 0.0.0.0

• 永久生效修改Dockerfile的CMD指令：

# 替换原来的CMD行
CMD ["yarn", "nx", "serve", "--host", "0.0.0.0"]

修改后重新执行build命令构建镜像，再按原来的端口映射启动即可。

方案2：生产模式部署（推荐） #

既然已经在构建阶段生成了编译产物，不需要用开发服务器启动，直接用轻量静态文件服务器托管dist产物即可，镜像体积更小、启动更快、性能更好。优化后的Dockerfile参考：

FROM node:16-alpine3.15
WORKDIR /app

# 先拷贝依赖声明文件，充分利用Docker构建缓存，后续改业务代码不需要重新装依赖
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# 安装轻量静态文件服务
RUN yarn global add serve

# 拷贝剩余项目源码
COPY . .
# 执行生产构建
RUN yarn nx build project-web --prod

# 静态服务默认监听3000端口
EXPOSE 3000

# 启动静态服务，必须绑定0.0.0.0允许外部访问
CMD ["serve", "-s", "dist/apps/project-web", "-l", "3000", "--no-clipboard"]

对应启动命令调整端口映射即可：

docker run --name project-web_c1 -p 3333:3000 -d project-web1

如果改完还是访问不通，按以下步骤排查：

• 启动容器后执行docker logs project-web_c1查看服务启动日志，确认服务正常启动没有报错
• 执行docker exec -it project-web_c1 sh进入容器内部，用wget http://localhost:对应端口（开发模式4200/生产模式3000）测试，能正常拉取index.html说明容器内服务运行正常
• 确认启动参数中确实配置了--host 0.0.0.0，没有被其他配置覆盖

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