Docker构建React镜像成功但运行失败：找不到index.html文件

核心问题 #

容器内未正确复制public目录，导致React启动时无法找到/app/public/index.html文件。

错误原因拆解 #

1. 初始Dockerfile的路径错误
   你最初的Dockerfile里执行了两次复制：

   COPY . /app
   RUN npm install
   COPY . app/
   

   第二次COPY的目标路径app/是相对路径，会在当前工作目录/app下创建子目录/app/app/，项目文件被复制到这个子目录里，React自然找不到根目录下的public文件夹。

2. 修改后Dockerfile的指令顺序问题
   你把RUN ls -la /app/public放在了CMD之后，Dockerfile是按从上到下顺序执行的，CMD是容器启动时才会触发的指令，而RUN是构建阶段执行的——虽然这条RUN会执行，但如果文件复制本身有问题，依然会报错。另外更关键的是，可能你本地的.dockerignore文件排除了public目录，导致COPY . .根本没把public复制到容器里。

解决方案 #

1. 修正Dockerfile的复制逻辑与指令顺序 #

使用以下标准的React项目Dockerfile：

FROM node:14-alpine
WORKDIR /app

# 先复制依赖配置文件，利用Docker缓存优化构建速度
COPY package.json package-lock.json* ./
RUN npm install

# 复制整个项目文件到容器工作目录
COPY . .

EXPOSE 3090
CMD ["npm", "start"]

• COPY . .表示将本地当前目录的所有文件（排除.dockerignore指定的内容）复制到容器的当前工作目录/app，确保项目结构和本地一致。

2. 检查.dockerignore文件 #

打开本地项目根目录的.dockerignore，确保里面没有public这一行。如果有类似下面的内容，删除public条目：

node_modules
build
.env
# 移除这一行：public

如果.dockerignore忽略了public，COPY指令会自动跳过该目录，导致容器内缺失index.html。

3. 验证复制结果（可选） #

可以在COPY . .之后添加临时指令，确认public目录已被复制：

FROM node:14-alpine
WORKDIR /app

COPY package.json package-lock.json* ./
RUN npm install

COPY . .
# 临时检查public目录
RUN ls -la /app/public

EXPOSE 3090
CMD ["npm", "start"]

构建镜像时如果这一步成功，说明public目录已正确复制，之后可以删除这条RUN指令。

4. 重新构建并运行 #

执行以下命令重新构建镜像并运行容器：

docker build -t react-app .
docker run -p 3090:3090 react-app

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