如何让Docker Compose挂载VSCode Dev Containers创建的代码仓库卷？

核心思路：避免硬编码卷名，复用Dev Container的代码挂载逻辑 #

方案1：使用绑定挂载（推荐，适配绝大多数场景）

直接在docker-compose.yml的webpack服务中，复用和Dev Container主服务一致的绑定挂载配置，不需要依赖命名卷。这样不管开发者的环境如何，都会自动挂载当前工作目录的代码，完全不用关心卷名。

示例配置：

services:
  # 你的主应用服务（Dev Container默认启动的服务）
  app:
    build: ./app
    volumes:
      - .:/app  # 绑定本地代码目录到容器内的/app路径
    # 其他配置...

  # Webpack热重载服务
  webpack:
    build: ./webpack
    volumes:
      - .:/app  # 和主服务完全一致的挂载配置，自动同步代码变化
    ports:
      - "3000:3000"  # 热重载端口
    command: npm run dev  # 启动热重载服务的命令
    environment:
      - NODE_ENV=development

这种方式的优势：

• 完全不需要硬编码卷名，所有开发者的环境都能自动适配
• 代码修改会实时同步到webpack容器，热重载直接生效
• 适配本地Dev Container和远程Dev Container场景

方案2：动态命名卷（适配必须用命名卷的场景）

如果你的场景必须使用命名卷（比如远程容器存储优化），可以通过环境变量动态传递卷名，避免硬编码。

1. 在docker-compose.yml中定义一个引用环境变量的命名卷：

volumes:
  app-code:
    external: true
    name: ${DEV_WORKSPACE_VOLUME:-default-app-code}  # 用环境变量指定卷名， fallback到默认值

services:
  app:
    volumes:
      - app-code:/app
    # 其他配置...

  webpack:
    volumes:
      - app-code:/app
    # 其他配置...

2. 在.devcontainer/devcontainer.json中自动设置环境变量，匹配VSCode的工作区卷命名规则：

{
  "dockerComposeFile": ["../docker-compose.yml"],
  "service": "app",
  "workspaceFolder": "/app",
  "env": {
    "DEV_WORKSPACE_VOLUME": "${localWorkspaceFolderBasename}_code"  # 动态生成卷名，和VSCode自动创建的卷名对齐
  },
  "runServices": ["app", "webpack"]
}

这种方式的优势：

• 卷名由环境变量动态生成，开发者无需手动统一
• 复用命名卷的存储优势，同时避免硬编码的耦合问题

关键注意事项 #

• 确保webpack容器内的代码路径和主服务完全一致，否则热重载可能无法识别文件变化
• 若使用绑定挂载，需确保本地代码目录的权限和容器内用户权限匹配，避免文件读写问题

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