Windows下Docker Compose挂载卷二次修改代码不同步容器问题

问题现象 #

Windows 10系统中Docker Compose无法同步前端代码变更至容器，但相同配置在Ubuntu下正常。特殊情况：初次构建后代码错误网站显示异常，本地修复后刷新可正常同步；但改回错误版本时网站无变化，进入容器修改代码也不影响页面显示。

给出的docker-compose.yml配置 #

version: '3.9'
services:
    postgres:
        image: postgres:13.3
        ports:
            - 5432:5432
        environment:
            POSTGRES_USER: username
            POSTGRES_PASSWORD: postgresql_password
            POSTGRES_DB: database_name
            PGDATA: /var/lib/postgresql/data/dbfiles
        volumes:
            - ./DbData:/var/lib/postgresql/data
           # - postgresql.conf:/etc/postgresql.conf
            - ./DbData:/docker-entrypoint-initdb.d/
        container_name: pgdb
    nginx:
        depends_on:
            - api
            - frontend
        restart: always
        build:
            dockerfile: Dockerfile.dev
            context: './nginx'
        ports:
            - "3050:80"
    api:
        build:
            dockerfile: Dockerfile.dev
            context: './Backend'
        volumes:
            - ./Backend:/app
        command: "gunicorn -c gunicorn.py Backend.wsgi"
        depends_on:
            -   postgres
    frontend:
        stdin_open: true
        build:
            dockerfile: Dockerfile.dev
            context: './Frontend'
        volumes:
            - /app/node_modules
            - ./Frontend:/app

排查与解决步骤 #

1. 清理前端构建缓存

这种"改对生效、改回不生效"的现象，大概率是前端构建工具（如create-react-app）的缓存在作祟，它可能没检测到文件回退的变更：

• 进入前端容器清理缓存：

  # 替换成你的前端容器名，可通过docker-compose ps查看
  docker exec -it frontend rm -rf node_modules/.cache
  

• 若要彻底避免，修改前端的Dockerfile.dev，在启动命令中添加禁用缓存参数：

  # 以React项目为例，其他框架可参考对应禁用缓存的参数
  CMD ["npm", "start", "--", "--no-cache"]
  

2. 切换Docker至WSL2后端并使用WSL文件系统

Windows原生Docker的文件监听机制远不如Linux，改用WSL2后端能解决大部分挂载同步问题：

• 打开Docker Desktop设置 → Resources → WSL Integration，启用你正在使用的WSL发行版（如Ubuntu），并设置默认使用WSL2。
• 关键操作：把项目迁移到WSL的文件系统内（比如/home/你的用户名/项目目录），而非Windows的C/D盘挂载目录。WSL挂载Windows目录的文件通知效率极低，容易丢失变更事件。

3. 禁用Nginx反向代理缓存

如果页面是通过Nginx代理访问，可能Nginx缓存了旧页面内容：

• 修改Nginx配置文件（对应./nginx目录下的配置），添加缓存禁用头部：

  location / {
      proxy_pass http://frontend:3000; # 替换为你的前端容器实际端口
      proxy_set_header Cache-Control "no-cache, no-store, must-revalidate";
      proxy_set_header Pragma "no-cache";
      proxy_set_header Expires 0;
  }
  

• 重启Nginx容器生效：

  docker-compose restart nginx
  

4. 重置Docker卷与权限

Windows下挂载卷可能出现权限不一致或卷数据异常：

• 彻底清理旧卷并重新构建：

  docker-compose down -v
  docker-compose up --build
  

• 若仍有权限问题，在docker-compose.yml的frontend服务中添加用户匹配配置：

  frontend:
      # 原有配置不变
      user: "${UID:-1000}:${GID:-1000}" # 匹配WSL或本地用户ID，避免权限冲突
  

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