Docker化React应用执行docker-compose up后访问端口无页面显示问题

看起来你遇到了Docker化React应用后无法正常访问的问题，我帮你梳理下配置里的几个关键问题，一步步来解决：

问题分析 #

1. Dockerfile指令逻辑混淆

   • 你用了RUN serve -s build，这是在镜像构建阶段执行的命令，构建完成后这个进程就终止了，容器启动时并不会延续它的运行。真正控制容器启动后服务的是CMD指令，但你这里有多个CMD，只有最后一个会生效，同时还存在端口不匹配的问题。
   • EXPOSE 3000声明容器暴露3000端口，但serve默认运行在5000端口，这就导致外部映射的3000端口根本连不到服务。
   • 开头的FROM scratch完全多余，后面的FROM mhart/alpine-node:6.12.0会直接覆盖它，没必要保留。
   • 指令顺序不合理，没有利用Docker的缓存机制（比如应该先复制依赖文件再安装，避免每次修改代码都重新安装依赖）。

2. docker-compose.yml的端口与挂载冲突

   • 你映射了3000:3000，但容器内的serve实际跑在5000端口，端口不匹配直接导致访问失败。
   • volumes: - .:/app把本地当前目录挂载到容器的/app目录，这会直接覆盖容器里构建好的build文件夹（如果本地没有build目录，容器内的build就被替换成空的了），这也是访问不到内容的核心原因之一。

修改后的配置文件 #

Dockerfile

# 使用指定的Node镜像，移除无用的FROM scratch
FROM mhart/alpine-node:6.12.0

# 设置npm日志级别，减少构建时的冗余输出
ENV NPM_CONFIG_LOGLEVEL warn

# 全局安装serve工具
RUN npm install -g serve

# 指定serve运行的端口，与后续EXPOSE保持一致
ENV PORT 3000

# 先复制依赖相关文件，利用Docker缓存优化构建速度
COPY package.json package.json
COPY semantic.json semantic.json
COPY npm-shrinkwrap.json npm-shrinkwrap.json

# 安装项目依赖
RUN npm install gulp-header --save-dev
RUN npm install --no-optional

# 复制项目其余文件
COPY . .

# 构建生产版本的React应用
RUN npm run build --production

# 声明容器暴露的端口
EXPOSE 3000

# 容器启动时启动serve服务，指定build目录和运行端口
CMD ["serve", "-s", "build", "-l", "3000"]

docker-compose.yml

version: '3'
services:
  web:
    build: .
    image: react-cli
    container_name: react-cli
    # 开发环境建议只挂载需要热更新的目录（比如src），避免覆盖build文件夹
    # volumes:
    #   - ./src:/app/src
    # 生产环境建议直接移除volumes挂载，使用镜像内的build文件
    ports:
      - '3000:3000'

修改说明 #

• 调整Dockerfile指令顺序，把依赖安装放在前面，利用Docker缓存，下次构建时如果依赖没变化就不会重新安装，大幅加快构建速度。
• 统一端口配置：通过环境变量和serve参数强制服务运行在3000端口，与EXPOSE和docker-compose的端口映射保持一致。
• 移除构建阶段的RUN serve -s build，只保留容器启动时的CMD命令，保证容器启动后服务持续运行。
• 优化挂载逻辑：开发场景只挂载需要实时更新的目录，生产场景直接使用镜像内的构建产物，避免挂载覆盖问题。

验证步骤 #

1. 先清理旧的镜像和容器：

docker-compose down
docker rmi react-cli

2. 重新构建并启动服务：

docker-compose up --build

3. 现在访问http://localhost:3000就能正常看到你的React应用了。

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