Docker打包React项目后/usr/share/nginx/html无项目文件问题求助

常见原因及对应解决方法 #

原因1：构建阶段npm run build执行失败，未生成产物目录 #

• 问题本质：如果build阶段代码编译报错、依赖安装失败，就不会生成默认的build产物目录，后续复制自然找不到文件
• 排查方式：执行构建命令时添加参数查看完整构建日志：docker build --progress=plain -t react-app .，检查build阶段的npm run build输出是否有报错
• 解决方法：
  • 先在本地执行npm run build，确认前端代码本身可以正常编译，无语法错误、依赖缺失问题
  • 固定Node版本，不要使用latest标签，避免Node版本过高和项目依赖不兼容，比如React17对应使用FROM node:16-alpine AS build，alpine镜像体积也更小
  • 国内用户可替换npm源提升依赖安装成功率，将RUN npm install修改为RUN npm install --registry=https://registry.npmmirror.com

原因2：Docker构建上下文路径错误 #

• 问题本质：如果你在React项目的上级目录执行构建命令，比如docker build -f React/Dockerfile .，此时构建上下文是上级目录，COPY . .会把上级目录内容复制到镜像的/app路径下，你的项目实际存放在/app/React目录中，执行npm run build后产物会生成在/app/React/build下，后续复制/app/build自然找不到文件
• 解决方法：
  • 进入Dockerfile所在的React项目根目录执行构建命令：docker build -t react-app .
  • 如果确实需要在上级目录构建，对应修改复制产物的路径为COPY --from=build /app/React/build /usr/share/nginx/html

原因3：.dockerignore规则过滤了构建所需文件 #

• 问题本质：如果项目根目录的.dockerignore文件配置了排除src、public、package.json等构建必需文件，会导致build阶段没有源文件可以编译，自然没有产物
• 解决方法：调整.dockerignore规则，仅排除不需要的文件即可，参考配置如下：

node_modules
.git
.gitignore
.env.*
npm-debug.log

原因4：项目修改了默认的构建产物输出目录 #

• 问题本质：如果项目使用了vite、craco等工具，或者修改了package.json的build脚本配置，可能将默认的build输出目录改为了dist等其他名称
• 解决方法：查看package.json的build配置或者构建工具配置，确认产物输出目录后，对应修改COPY指令，比如输出目录为dist时，改为：COPY --from=build /app/dist /usr/share/nginx/html

验证方式 #

构建完成后可直接查看镜像内的构建产物确认问题：

1. 先查看build阶段根目录是否存在产物目录：docker run --rm --entrypoint ls 你的镜像名或ID /app
2. 再查看产物目录下是否有index.html等前端文件：docker run --rm --entrypoint ls 你的镜像名或ID /app/build

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