React应用Docker部署：生产构建无效仍提示开发构建问题排查

核心问题 #

你虽然执行了npm run build:${BUILD_ENV}生成了生产构建产物，但最终启动的是开发服务器（通过npm run start:${BUILD_ENV}），而非用静态文件服务器托管生产构建后的静态资源。start系列命令（通常是Create React App默认的本地开发命令）会启动未优化的开发模式服务，因此会持续出现该警告。

具体错误点 #

• 启动逻辑错误：npm run start:*是用于本地开发的热重载服务器命令，无论是否提前执行build，只要运行start，就会重新编译开发版本并启动开发服务器，完全不会用到你build出来的生产产物。
• 多阶段构建未合理利用：你的Dockerfile仅用了builder阶段，但没有将构建产物复制到更轻量的运行环境（如Nginx），而是继续用Node镜像运行开发服务器，既浪费资源又触发警告。
• 依赖安装不合理：npm ci --only=production会跳过开发依赖，但React项目的build过程需要Webpack、Babel等开发依赖支持，这一步可能导致构建异常（你当前能运行大概率是因为后续复制了整个项目目录，本地残留的node_modules补全了依赖，但不符合Docker构建的最佳实践）。

修复后的Dockerfile示例 #

# 第一阶段：构建生产产物
FROM node:20-alpine AS builder

ARG BUILD_ENV
ENV BUILD_ENV=${BUILD_ENV}

WORKDIR /usr/src/app

# 先复制依赖文件，利用Docker缓存优化构建速度
COPY package*.json ./
# 安装所有依赖（包括开发依赖，构建过程必须用到）
RUN npm ci

# 复制项目代码和对应环境的配置文件
COPY . .
COPY .env.${BUILD_ENV} /usr/src/app/.env

# 执行生产构建命令
RUN npm run build:${BUILD_ENV}

# 第二阶段：用Nginx托管静态资源（轻量且高效）
FROM nginx:alpine

# 将builder阶段生成的构建产物复制到Nginx的静态文件目录
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

# 暴露Nginx默认服务端口
EXPOSE 80

# 启动Nginx（前台运行）
CMD ["nginx", "-g", "daemon off;"]

额外注意事项 #

• 确认package.json中的build:${BUILD_ENV}命令确实指向生产构建逻辑（例如Create React App的react-scripts build，或自定义的Webpack生产配置）。
• 如果坚持用Node环境托管静态资源（而非Nginx），需确保：
  1. 安装serve包（添加到dependencies中）
  2. 启动命令改为serve -s build（指向build后的静态文件夹），而非start系列命令
• 必须移除npm ci的--only=production参数，否则构建过程会因缺少开发依赖失败。

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