React应用部署Kubernetes时提示找不到index.html的问题求助

问题根源分析 #

你的Dockerfile存在路径复制逻辑错误，导致React应用的文件结构不符合预期，npm start无法定位到正确位置的index.html文件。

具体修复步骤 #

1. 修正Dockerfile的文件复制逻辑 #

当前Dockerfile中，你先将./al.web/package.json复制到/al.web，随后执行COPY . .，这会把宿主机当前目录下的所有内容（包括al.web文件夹本身）复制到容器的/al.web目录中。最终容器内的文件结构会变成/al.web/al.web/[你的React项目文件]，而React开发服务器默认在工作目录下的public文件夹查找index.html，自然会出现找不到文件的错误。

修改后的Dockerfile：

# 基于node alpine镜像构建开发环境
FROM node:alpine AS development

ENV NODE_ENV development

# 设置工作目录
WORKDIR /al.web

# 复制al.web目录下的package.json和package-lock.json（如果存在）
COPY ./al.web/package*.json ./

# 安装依赖
RUN npm install

# 复制al.web目录下的所有文件到工作目录
COPY ./al.web/ .

# 启动开发服务器
CMD npm start

2. 验证容器内文件结构 #

你可以在Dockerfile中添加RUN ls -la命令，确认容器内/al.web目录下是否存在public文件夹，以及public目录中是否有index.html：

# 在COPY ./al.web/ .之后添加
RUN ls -la public/

3. （可选）切换到生产构建模式（推荐用于Kubernetes部署） #

如果是在Kubernetes中部署生产环境，建议先构建React生产包，再用Nginx等静态服务器托管，而非使用开发服务器运行。示例Dockerfile：

# 构建阶段
FROM node:alpine AS builder

WORKDIR /app

COPY ./al.web/package*.json ./
RUN npm install

COPY ./al.web/ .
RUN npm run build

# 生产运行阶段
FROM nginx:alpine

# 复制构建好的静态文件到Nginx默认目录
COPY --from=builder /app/build /usr/share/nginx/html

# 暴露端口
EXPOSE 80

# 启动Nginx
CMD ["nginx", "-g", "daemon off;"]

额外检查点 #

• 确认你的React项目中，public/index.html文件确实存在，未被误删除或重命名。
• 检查Kubernetes的Pod配置，确认容器端口映射正确，且应用启动命令未被意外覆盖。

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