Docker Compose启动React-Node.js应用时前端无法加载求助

云原生阿岚

2026-8-9

React-Node.js容器化后前端无法加载的问题解决

你的问题核心是两个关键配置缺失：React开发服务器默认仅监听容器内部的localhost，导致宿主机无法访问；同时你指定的3001端口未覆盖react-scripts的默认3000端口设置。以下是具体解决方案：

解决方案1：修改前端启动脚本

直接修改my-app/package.json的scripts字段，强制React开发服务器使用指定端口并绑定到容器所有网络接口：

{
  // ... 其他原有内容
  "scripts": {
    "start": "HOST=0.0.0.0 PORT=3001 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  // ... 其他原有内容
}

解决方案2：在Dockerfile中添加环境变量（推荐）

如果不想改动package.json，可以在前端Dockerfile中统一配置环境变量：

FROM node:10
WORKDIR /usr/src/app/my-app
COPY . .
RUN npm install && npm run build
# 配置端口和监听地址
ENV PORT=3001
ENV HOST=0.0.0.0
EXPOSE 3001

CMD ["npm", "start"]

关键原理说明

HOST=0.0.0.0：让React开发服务器监听容器的所有网络接口，而非默认的localhost（容器内部的localhost仅容器自身可访问，宿主机无法直接连通）。
PORT=3001：覆盖react-scripts默认的3000端口，与docker-compose中设置的端口映射3001:3001保持一致。