Docker化React应用时无法找到index.html文件的问题

问题分析 #

报错显示Could not find a required file. Name: index.html Searched in: /app/public，核心原因有两个可能：

• public目录未被正确复制到容器内
• 生产环境使用npm start启动开发服务器，不符合React生产部署规范

解决方案1：采用标准生产部署方式（推荐） #

React生产环境应部署npm run build生成的静态文件，而非使用开发服务器。修改Dockerfile如下：

FROM node:lts-alpine3.14 as build

RUN apk update && \
  apk upgrade && \
  apk add --no-cache bash git openssh

WORKDIR /app

COPY package.json .
RUN npm install -g --force npm@latest typescript@latest yarn@latest
RUN npm install

COPY . ./
RUN npm run build

# 生产阶段
FROM node:lts-alpine3.14

WORKDIR /app

# 安装静态服务器serve
RUN npm install -g serve

# 仅复制build后的静态文件，减小镜像体积
COPY --from=build /app/build ./build

EXPOSE 3000

ENV NODE_ENV production

# 用serve托管build目录，指定端口3000
CMD ["serve", "-s", "build", "-l", "3000"]

解决方案2：修复原Dockerfile的文件复制问题（不推荐生产用） #

如果一定要保留npm start启动方式，需确保public目录被正确复制：

1. 检查项目根目录的.dockerignore文件，删除任何包含public/的行，避免public目录被忽略
2. 修改Dockerfile的生产阶段，调整文件复制顺序：

   # 生产阶段修改部分
   WORKDIR /app
   
   # 先完整复制build阶段的所有文件
   COPY --from=build /app ./
   
   RUN yarn install --production
   
   EXPOSE 3000
   EXPOSE 3001
   
   ENV SERVER_PORT=3000
   ENV API_PORT=3001
   ENV NODE_ENV production
   
   CMD ["npm", "start"]
   

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