Docker启动React项目容器后无法访问localhost是什么原因

问题原因排查及修复 #

1. 端口不匹配 #

create-react-app 内置的开发服务器默认监听3000端口，你当前Dockerfile中暴露的是4000端口，端口映射也绑定的是4000，宿主机请求无法命中容器内实际运行的服务。

2. CMD指令语法错误 #

你提供的Dockerfile中CMD指令存在两处语法问题：

• 缺少闭合引号
• exec格式的CMD需要用方括号包裹参数
  错误写法：

CMD "npm" "start

正确的exec格式写法为：

CMD ["npm", "start"]

3. 服务监听地址限制 #

即使你将端口统一修改为4000，create-react-app默认监听的是容器内部的127.0.0.1地址，该地址仅允许容器内部访问，宿主机的请求无法穿透到容器服务，需要指定服务监听0.0.0.0。

完整修复方案 #

方案1：保持端口映射不变，修改服务配置 #

修改后的Dockerfile如下：

FROM node
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
# 指定create-react-app监听0.0.0.0，端口改为4000
ENV HOST=0.0.0.0
ENV PORT=4000
EXPOSE 4000
CMD ["npm", "start"]

重新构建镜像后，原启动命令docker run -p 4000:4000 -it react-repo即可正常访问。

方案2：不改服务配置，调整端口映射 #

如果你不想修改项目默认的3000端口配置，修改Dockerfile的EXPOSE指令为EXPOSE 3000，新增ENV HOST=0.0.0.0，启动容器时使用端口映射-p 4000:3000即可。

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