Docker构建成功后容器内找不到yarn，React热重载需求待解决

问题分析与解决方案 #

一、为什么容器内找不到npm/node/yarn？

你的Dockerfile采用了多阶段构建：

• 第一阶段用node:16-alpine镜像安装依赖、编译React项目
• 第二阶段切换到nginx:alpine镜像，仅复制第一阶段编译好的静态文件来运行
  最终启动的容器基于nginx:alpine，这个镜像本身不包含Node.js环境，自然找不到npm/yarn这类工具。

二、实现React热重载的核心方案

热重载需要依赖React官方的开发服务器（yarn start启动的webpack-dev-server），它会实时监听文件变化并自动刷新页面。因此需要调整配置，让容器运行在开发模式而非生产模式：

1. 修改前端Dockerfile

保留Node.js环境，支持开发服务器运行：

# 基于Node.js镜像，同时支持开发和构建
FROM node:16-alpine

WORKDIR /app

# 先复制依赖文件，利用Docker缓存加速构建
COPY package.json yarn.lock ./
RUN yarn install

# 复制全部项目文件
COPY . ./

# 默认启动开发服务器，生产环境可覆盖命令
CMD ["yarn", "start"]

如果想保留原有的多阶段构建（兼顾生产部署），也可以不修改Dockerfile，后续在compose.yaml中指定使用构建阶段的镜像。

2. 调整compose.yaml的frontend服务配置

frontend:
  build: 
    context: ./frontend
    # 如果用原多阶段Dockerfile，添加这行来使用包含Node.js的构建阶段镜像
    # target: build
  ports:
    - "3000:3000"  # 开发服务器默认端口为3000，直接映射
  volumes:
    - ./frontend:/app  # 挂载本地代码目录，实时同步修改
    - /app/node_modules  # 匿名卷保留容器内的依赖，避免本地依赖覆盖
  networks:
    - djangocmsnet
  environment:
    - CHOKIDAR_USEPOLLING=true  # 解决Docker挂载文件的监听问题
    - WDS_SOCKET_HOST=0.0.0.0   # 允许外部访问开发服务器的socket
    - WATCHPACK_POLLING=true

3. 启动并验证

执行以下命令重启前端容器：

docker-compose up --build frontend

现在修改本地React代码，浏览器会自动检测到变化并刷新页面，无需重建容器。

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