多阶段构建无法从前置阶段COPY文件：React应用Docker化问题

我一眼就看出问题出在哪了——你第一阶段用了CMD来执行构建命令，但Docker构建过程中根本不会执行CMD指令！

问题根源 #

CMD是用来定义容器启动时默认执行的命令，而docker build的构建流程只会执行RUN、COPY、ADD这类构建阶段的指令。你原来的第一阶段在构建时完全没运行npm run build，自然就不会生成/app/build目录，第二阶段复制时当然找不到目标内容。

修正后的Dockerfile #

把第一阶段的CMD换成RUN，让打包命令在构建阶段执行：

FROM node:alpine as build
WORKDIR /app
ADD package.json /app
RUN npm install
ADD . /app
# 关键：用RUN替代CMD，确保构建阶段执行打包
RUN npm run build

FROM nginx:alpine
# 现在可以正常复制build阶段生成的静态文件了
COPY --from=build /app/build/ /usr/share/nginx/html

为什么这样改能解决问题 #

• RUN npm run build会在Docker构建第一阶段时直接执行，完成React应用的打包，生成/app/build目录
• 第二阶段通过COPY --from=build就能从第一阶段的镜像中复制到已经生成的静态文件，最终Nginx镜像可以直接提供这些静态资源服务

之后你再执行docker build -t foo .，就能顺利完成镜像构建了。如果你的项目用了yarn或pnpm，替换对应的包管理命令即可，逻辑完全一致。

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