Docker多阶段构建复制文件夹时Npm/Webpack构建失败

问题根源 #

你遇到的核心问题不是后续阶段的COPY命令直接导致当前阶段出错，而是BuildKit的阶段依赖机制暴露了原本隐藏的问题：

• 当nginx阶段没有通过COPY --from=assets引用assets阶段时，BuildKit会跳过未被依赖的assets阶段，因此不会执行RUN yarn run build:website，自然不会报错。
• 当添加COPY --from=assets后，assets阶段成为nginx阶段的依赖，BuildKit必须完整构建assets阶段，此时才触发了webpack找不到的错误。

而webpack找不到的直接原因是：
你的node_builder和assets阶段都设置了NODE_ENV=production，yarn在生产环境下默认会跳过安装devDependencies中的包，而webpack通常被放在devDependencies中，导致构建时无法找到webpack命令。

解决方案 #

针对这个问题，有几种可行的解决方式：

1. 强制yarn安装所有依赖（推荐） #

在node_builder阶段的yarn install命令中添加--production=false参数，强制安装包括devDependencies在内的所有依赖，不受NODE_ENV影响：

RUN --mount=type=ssh,uid=1000,gid=1000 \
    yarn install --no-audit --production=false

2. 构建时临时切换NODE_ENV #

在assets阶段执行构建命令时，临时设置NODE_ENV=development，确保webpack能被调用：

RUN NODE_ENV=development yarn run build:website

3. 调整webpack的依赖位置（不推荐） #

将webpack从package.json的devDependencies移到dependencies中，这样生产环境下yarn也会安装它。但这种方式会增加生产镜像的体积，不建议采用。

验证方法 #

可以通过以下步骤验证问题：

1. 查看package.json，确认webpack是否在devDependencies中。
2. 手动执行NODE_ENV=production yarn install，检查本地node_modules/.bin目录下是否存在webpack。

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