Angular应用docker-compose本地开发热重载的正确配置方法

问题核心原因 #

你遇到的核心问题有两个：一是绑定挂载本地Angular项目目录到容器的/app路径时，会直接覆盖镜像内提前构建好的/app/node_modules目录，导致依赖丢失；二是Mac环境下Docker挂载卷的文件系统事件默认不会透传给容器，会导致Angular默认的文件变更检测失效，热重载不工作。

正确配置修改方案 #

1. 优化Dockerfile #

合并指令减少镜像层，同时保留依赖层的缓存能力：

FROM node:12-slim

WORKDIR /app

# 优先拷贝依赖声明文件，只要package.json无变化，该层会被Docker缓存，无需每次重新装依赖
COPY package*.json ./
RUN npm install \
    && npm install -g @angular/cli@8.1.2 \
    # 合并apt操作并清理缓存，减少镜像体积
    && apt-get update \
    && apt-get install -y vim curl \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

ENV PATH /app/node_modules/.bin:$PATH

2. 修改docker-compose.yml #

核心是添加匿名卷挂载/app/node_modules，避免本地目录覆盖容器内的依赖，同时调整ng serve参数适配Docker挂载环境：

version: '3'

services:
  # ... 其他服务配置保持不变 ...
  blackmirrorhq:
    build: . # 本地构建镜像时直接指定Dockerfile路径即可，无需手动填写镜像名
    expose:
      - 4200
    ports:
      - "4200:4200"
    restart: on-failure
    volumes:
      # 绑定挂载本地项目目录，实现代码变更同步
      - <path to angular app>:/app
      # 新增匿名卷，专门挂载node_modules，不会被本地目录覆盖
      - /app/node_modules
    working_dir: /app
    # 新增--poll参数开启轮询检测文件变更，解决Mac环境下挂载卷事件不传递的问题
    command: ng serve --host 0.0.0.0 --port 4200 --disable-host-check --poll 2000

volumes:
  postgres-volume:
  # 匿名卷无需额外声明，Docker会自动管理

配置说明 #

• 匿名卷/app/node_modules的优先级高于绑定挂载的本地目录，因此容器内的node_modules不会被本地空的node_modules目录覆盖，同时不同系统编译的依赖包也不会互相干扰，完美解决Mac和Linux的依赖兼容性问题。
• 只有当package.json发生变更时，才需要重新执行docker compose build构建镜像更新依赖，日常开发启动直接用docker compose up即可，无需每次启动都重新安装依赖，启动速度会快很多。
• --poll 2000参数表示每2秒轮询一次文件变更，如果你觉得热重载响应慢，可以调小这个数值，比如改成1000就是每秒轮询一次。

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