React应用生产镜像多阶段Dockerfile构建失败求助

这个问题核心在于webpack的输出目录和Dockerfile预期的路径不匹配，咱们一步步来排查和解决：

错误提示很明确：第二阶段（nginx阶段）尝试从build阶段复制/app/build目录，但这个目录不存在。这说明你执行yarn build后，webpack生成的产物并没有放到/app/build下——毕竟webpack默认的输出目录是dist，而非build。

先排查目录结构 #

1. 检查webpack配置的输出路径
   打开你的webpack.config.js，找到output配置块，查看path字段：

   const path = require('path');
   
   module.exports = {
     // ...其他配置
     output: {
       path: path.resolve(__dirname, 'build'), // 这里是不是写的'build'？
       filename: '[name].bundle.js'
     }
   };
   

   如果这里写的是dist，那Dockerfile里的复制路径就错了，需要改成对应目录。

2. 临时验证build阶段的目录情况
   你可以临时修改build阶段的Dockerfile，添加一行命令查看构建后的目录结构：

   FROM node:14-alpine AS build
   WORKDIR /app
   COPY package.json ./
   COPY yarn.lock ./
   RUN yarn install --frozen-lockfile
   COPY . .
   RUN yarn build
   RUN ls -la /app # 新增这行，查看/app下的所有文件和目录
   

   重新执行构建命令，看输出的目录列表，就能找到webpack实际生成的产物目录（大概率是dist或你自定义的名称）。

针对性解决方案 #

根据排查结果，选以下任意一种方式修改即可：

方案1：修改Dockerfile适配webpack输出目录 #

如果webpack产物在dist目录，就把第二阶段的COPY命令改成：

FROM nginx:1.19-alpine
COPY --from=build ./app/dist /usr/share/nginx/html

方案2：修改webpack配置输出到build目录 #

在webpack.config.js里把output.path改成path.resolve(__dirname, 'build')，这样就和你原来的Dockerfile路径匹配了。

方案3：在build脚本里强制指定输出路径 #

直接在package.json的build命令中添加--output-path参数，强制webpack输出到build目录：

"scripts": {
  "dev": "webpack-dev-server --mode development .",
  "build": "webpack --mode production . --output-path build"
},

这三种方法都能解决问题，选最贴合你现有配置的就行。

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