Docker Compose up无法检测代码变更问题求助

问题分析 #

你的问题核心在于Docker Compose里挂载了命名卷frontend到Nginx的静态文件目录，这个卷会在第一次运行后缓存/usr/share/nginx/html下的内容。后续哪怕你重新构建镜像，命名卷里的旧内容也会优先覆盖镜像中新构建的文件，导致代码变更完全不生效。

另外你的Dockerfile是多阶段构建，本身打包逻辑没问题，但卷的挂载优先级高于镜像内的文件，这就导致新构建的内容被卷里的旧文件“盖”住了。

解决方案 #

针对这个问题，分两种场景给你解决思路：

1. 移除命名卷（适合生产/不需要实时热更新的场景）

如果只是想让构建后的镜像内容生效，不需要本地代码实时同步，直接删掉docker-compose.yml里的卷挂载配置就行：

version: '2'

services:
  frontend:
    build: .
    image: front:1.0
    ports:
      - "80:80"
    # 删掉下面这两行卷挂载配置
    # volumes:
    #   - frontend:/usr/share/nginx/html
    networks:
      - mlops

# 若没有其他服务用到这个卷，也可以删掉整个volumes块
# volumes:
#   frontend:

networks:
  mlops:

修改后执行docker compose build && docker compose up -d，容器就会直接使用镜像里新构建的内容了。

2. 用绑定挂载替代命名卷（适合开发环境实时热更新）

如果是开发时需要改完代码立刻看到效果，把命名卷换成绑定挂载，映射本地的build目录到容器里：
首先先清理掉旧的容器和卷：

docker compose down -v

然后修改docker-compose.yml：

version: '2'

services:
  frontend:
    build: .
    image: front:1.0
    ports:
      - "80:80"
    # 替换成绑定挂载，本地build目录和容器目录同步
    volumes:
      - ./build:/usr/share/nginx/html
    networks:
      - mlops

networks:
  mlops:

这样你本地每次执行npm run build后，容器里的Nginx就能立刻拿到新的静态文件。要是想更高效，开发阶段可以直接用Node.js的开发服务器（比如npm start），不用打包到Nginx，修改代码还能自动热重载。

额外小贴士 #

• 构建时可以加--no-cache强制跳过缓存，确保完全重新构建：docker compose build --no-cache
• 之前如果创建过命名卷，一定要用docker compose down -v彻底删掉，不然旧卷可能会被复用，还是看不到变更。

备注：内容来源于stack exchange，提问作者sahith palika