docker-compose部署React报错：无法COPY或找到package.json文件

核心问题根源 #

你的配置存在路径完全不匹配的硬冲突，同时可能存在构建时COPY路径指向错误的问题：

• Dockerfile 里设置的工作目录是 /usr/src/react/，所有构建的文件（package.json、依赖、代码）都放在这个路径下
• docker-compose 里的卷挂载把本地项目目录映射到了容器的 /react 路径，和 Dockerfile 用的路径完全独立，两边的文件不互通
• 构建时的 COPY package.json ./ 是从构建上下文（项目根目录）找文件，如果你的React项目的package.json不在根目录，自然会报无法复制的错误
• 之前你改成 COPY package*.json . 能构建成功，大概率是根目录存在其他项目的package.json（比如后端项目的），拷错了文件，启动时自然找不到React项目的配置

具体修复步骤 #

1. 全链路路径对齐 #

统一Dockerfile的工作目录、Compose的挂载路径，避免两边路径独立的问题，我们统一用 /react 作为容器内的工作目录：

修改后的Dockerfile

# React Dockerfile
# 拉取官方基础镜像
FROM node:13.12.0-alpine

# 工作目录和Compose挂载路径完全对齐
WORKDIR /react

# 修正环境变量PATH，指向工作目录下的node_modules
ENV PATH /react/node_modules/.bin:$PATH

# 按照你实际的package.json位置修改COPY路径：
# 如果package.json在项目根目录，直接用这行：
COPY package.json ./
# 如果package.json在项目根目录下的react/子目录，改成这行：
# COPY react/package.json ./

# 安装应用依赖
RUN npm install --silent
RUN npm install react-scripts@3.4.1 -g --silent

# 同样按照实际代码位置修改COPY路径：
# 如果React代码在根目录，用这行：
COPY . .
# 如果React代码在react/子目录，改成这行：
# COPY react/ .

# 启动应用
CMD ["npm", "run", "start"]

对应的docker-compose配置片段

react:
  build:
    context: ./
    dockerfile: react/Dockerfile
  volumes:
    # 挂载路径和Dockerfile的WORKDIR完全对齐
    - '.:/react'
    # 保留容器内的node_modules匿名卷，避免被本地空目录覆盖
    - '/react/node_modules'
  ports:
    - "3001:3000"
  environment:
    - CHOKIDAR_USEPOLLING=true
  depends_on:
    - drf

2. 验证文件实际位置 #

修改完成后先在本地项目根目录执行 ls package.json 检查：

• 如果返回文件存在，说明package.json在根目录，用默认的COPY配置即可
• 如果返回“无此文件”，说明你的React项目代码是放在根目录的react/子目录下，必须按照Dockerfile里的注释修改COPY的路径，指向子目录下的文件

注意事项 #

• 之前的路径不匹配问题会导致你挂载的本地代码完全不会被容器读取，本地修改代码也无法触发热更新，修复后这个问题会同步解决
• 不要把其他项目的package.json当作React项目的配置拷贝，否则会出现依赖安装错误、启动脚本不存在等衍生问题

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