Docker构建React镜像卡住无限耗时，是否为M1芯片问题？求解决方案

在M1架构的iMac上，通过npx create-react-app创建的React项目，使用Dockerfile.dev和docker-compose.yml构建镜像时出现最后一步无限卡顿的情况，核心原因包括镜像架构不兼容、Dockerfile指令误用、配置文件错误等，以下是针对性的修复方案：

一、修正Dockerfile.dev配置 #

原配置存在两个关键问题：构建阶段启动开发服务器导致构建进程无法结束、未适配M1的arm64架构。修改后的配置如下：

# 指定兼容M1的平台，解决架构不匹配问题
FROM --platform=linux/amd64 node:alpine

WORKDIR /app

# 同时复制package.json和package-lock.json，确保依赖安装一致性
COPY package.json package-lock.json ./

# 更换国内npm源加速安装（可选）
RUN npm config set registry https://registry.npmmirror.com/

# 添加--legacy-peer-deps解决React 18与部分依赖的版本冲突
RUN npm install --legacy-peer-deps

COPY . .

# 使用CMD在容器运行时启动开发服务器，而非构建阶段的RUN
CMD ["npm", "run", "start"]

二、修正docker-compose.yml配置 #

原配置中version字段错误，且未明确指定平台，修改后：

version: '3.8'
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile.dev
      # 明确指定平台适配M1
      platform: linux/amd64
    ports:
      - "3000:3000"
    volumes:
      - /app/node_modules
      - .:/app
    # 添加环境变量解决容器内React热加载失效问题
    environment:
      - CHOKIDAR_USEPOLLING=true

三、M1专属优化操作 #

• 启用Docker的Rosetta模拟：打开Docker Desktop设置 → Features in development，勾选"Use Rosetta for x86/amd64 emulation on Apple Silicon"，重启Docker后再尝试构建。
• 清理Docker缓存：执行docker system prune -a清除旧镜像和缓存，避免缓存导致的异常。
• 若依赖安装仍缓慢，可在本地先执行npm install，再通过挂载目录复用本地node_modules（需确保本地与容器内node版本一致）。

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