Angular docker-compose搭配nginx部署时代码变更无法实时生效

你当前使用的是生产环境多阶段构建方案，天然不支持代码实时变更同步，核心问题如下：

• 镜像构建阶段就已经执行npm run build -- --prod把Angular代码编译成静态文件，直接打包进了nginx镜像的只读层，容器运行时读取的是构建时固定的文件，和宿主机上的源码没有任何关联
• 没有配置宿主机和容器之间的目录挂载，宿主机上的代码修改根本不会同步到容器内部
• 生产模式的Angular构建默认不会监听文件变化，本身就不具备开发模式下的热更新能力
• 配置bug：你当前Dockerfile的CMD配置会覆盖nginx镜像默认的启动命令，执行完replace_api_url.sh脚本后容器会直接退出，nginx服务根本不会正常运行

根据你的使用场景二选一即可：

本地开发场景（需要热更新实时预览） #

不要用nginx托管生产构建产物的模式，直接基于node镜像跑Angular官方开发服务：

1. 替换为开发专用Dockerfile：

FROM node:16-alpine
WORKDIR /app

COPY ./package*.json ./
RUN npm install

COPY . .
EXPOSE 4200
# 开启0.0.0.0监听允许外部访问，加poll参数解决容器内文件监听不生效问题
CMD ["npm", "run", "start", "--", "--host", "0.0.0.0", "--poll=2000"]

2. 在docker-compose中配置卷挂载，注意把容器内的node_modules设为独立卷避免被宿主机覆盖：

services:
  angular-dev:
    build: .
    ports:
      - "4200:4200"
    volumes:
      - ./:/app
      - /app/node_modules

启动容器后修改本地代码，Angular开发服务会自动重新编译，浏览器无需手动刷新就能看到变更，全程不需要重新构建镜像。

模拟生产场景（用nginx托管静态文件） #

如果必须用nginx托管，需要手动打通宿主机编译产物和容器的同步路径：

1. 修复原Dockerfile的CMD启动bug，保证替换完配置后能正常启动nginx：

FROM node:16-alpine AS builder
WORKDIR /app

COPY ./package*.json ./
RUN npm install

COPY . .
RUN npm run build -- --prod

FROM nginx:alpine
COPY --from=builder /app/dist/* /usr/share/nginx/html/
COPY --from=builder /app/nginx-custom.conf /etc/nginx/conf.d/default.conf
COPY ./replace_api_url.sh /tmp
# 先执行配置替换，再前台启动nginx
CMD ["sh", "-c", "/tmp/replace_api_url.sh && nginx -g 'daemon off;'"]

2. 本地执行监听构建命令，代码变更时自动重新编译生成dist目录产物：

npm run build -- --watch --prod

3. 在docker-compose中添加卷挂载，把本地编译好的dist目录和nginx配置直接挂载到容器对应路径：

services:
  angular-prod:
    build: .
    ports:
      - "80:80"
    volumes:
      - ./dist:/usr/share/nginx/html
      - ./nginx-custom.conf:/etc/nginx/conf.d/default.conf

这种模式下代码变更后需要手动刷新浏览器才能看到效果，修改nginx配置后需要执行docker-compose exec angular-prod nginx -s reload重载配置才会生效。

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