Docker Compose构建React镜像npm install耗时20分钟，docker build仅需2分钟求助

我在搭建包含SpringBoot、MongoDB和React的项目时，遇到Docker Compose构建React镜像的异常问题：

• 单独用docker build构建React镜像，npm install仅需2分钟
• 用docker-compose build构建时，npm install耗时长达20分钟
• 但通过docker-compose run --build --rm -it npm install执行安装却正常

版本信息：

• Docker 27.3.1，构建号ce1223035a
• Docker Compose 2.30.3

已尝试过的无效操作：

• 清理所有镜像、容器、卷
• 执行docker builder prune
• 执行docker-compose build --no-cache frontend
• 在Dockerfile中添加/移除USER node配置
• 添加/移除复制package-lock.json的步骤
• 分别测试vite和create-react-app创建的项目

1. 限定Docker Compose的构建上下文 #

Docker Compose默认以项目根目录作为构建上下文，如果根目录下有大量无关文件（比如其他服务的构建产物、日志、未忽略的node_modules），会导致上下文打包传输耗时剧增，间接拖慢npm install。

• 在docker-compose.yml中为React服务指定精准的构建上下文：

  services:
    frontend:
      build:
        context: ./frontend  # 指向React项目所在的子目录
        dockerfile: Dockerfile
  

• 同时确保React项目目录下的.dockerignore正确忽略冗余文件：

  node_modules
  .git
  dist
  .env
  *.log
  

2. 统一构建驱动 #

Docker Compose和docker build可能使用了不同的构建驱动（比如Compose默认用docker-container驱动，而docker build用docker驱动），驱动差异会导致性能差距。

• 查看当前默认构建驱动：docker builder inspect
• 临时指定Compose使用与docker build一致的驱动：

  COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=0 docker-compose build frontend
  

• 也可以在docker-compose.yml中全局配置构建驱动：

  services:
    frontend:
      build:
        dockerfile: Dockerfile
        x-builder:
          driver: docker
  

3. 排查网络配置差异 #

Docker Compose构建时的网络代理、DNS设置可能与docker build不同，导致npm包下载缓慢。

• 临时切换为host网络测试Compose构建速度：

  services:
    frontend:
      build:
        dockerfile: Dockerfile
      network_mode: host
  

• 在Dockerfile中直接指定国内npm镜像源，规避网络瓶颈：

  RUN npm config set registry https://registry.npmmirror.com/
  RUN npm install --no-fund --no-audit
  

4. 禁用并行构建 #

如果多个服务同时构建，系统资源被抢占会导致React的npm install变慢，强制串行构建可缓解：

docker-compose build --parallel false frontend

内容的提问来源于stack exchange，提问作者Adam Makolino Zieliski