Docker + VSCode 搭建开发环境沙箱

搭建开发环境沙箱

本文主要介绍利用 Docker + VSCode 搭建开发环境沙箱，提供环境隔离，主要服务于需要使用多版本依赖打包的情况

话不多说，直接开始

操作环境：

软件名称	版本｜
操作系统	macOS Sequoia 15.1
VSCode	1.112.0
Docker Desktop	4.55.0
docker-engine	29.1.3

vscode 安装插件

先找一个需要很多系统依赖来构建产物的工程，这里用 node-canvas 做示例，

操作步骤可以类比到现实开发的目录中

下载解压 https://github.com/automattic/node-canvas 的代码
在项目根目录下创建 .devcontainer 文件夹
在 .devcontainer 里面创建开发要用的环境镜像的 Dockerfile

yml 复制代码

# 使用现代 LTS 版本，bookworm 提供了较新的图形库支持
FROM node:20.12.2-bookworm

# 安装 node-canvas 必须的系统依赖
# 包括：构建工具、Cairo、Pango、libjpeg、GIF支持、RSVG等
RUN apt-get update && apt-get install -y \
    build-essential \
    libcairo2-dev \
    libpango1.0-dev \
    libjpeg-dev \
    libgif-dev \
    librsvg2-dev \
    # 额外增加字体支持，否则 canvas 无法渲染文字
    fonts-liberation \
    fontconfig \
    # 辅助工具
    python3 \
    pkg-config \
    && rm -rf /var/lib/apt/lists/*

# 预安装全局工具
RUN npm install -g node-gyp

# 保持容器运行
# CMD [ "sleep", "infinity" ]

创建 devcontainer.json

json 复制代码

{
  "name": "Node-Canvas Dev Env",
  "build": {
    "dockerfile": "Dockerfile",
    "args": {
      // 配置代理加速镜像构建
      // 这里的地址建议用 host.docker.internal，它代表宿主机
      "http_proxy": "http://host.docker.internal:xxxx",
      "https_proxy": "http://host.docker.internal:xxxx"
    }
  },
  "customizations": {
    "vscode": {
      "settings": {
        "terminal.integrated.shell.linux": "/bin/bash",
        // 核心配置：禁止搜索和索引 node_modules
        // 不禁止的话, vsc-server 会对 node_modules 进行类型检查
        "search.exclude": {
          "**/node_modules": true
        },
        "files.watcherExclude": {
          "**/node_modules/**": true
        }
      },
      // 可以添加自己想要预装的 vscode 插件
      "extensions": [
        "lihuiwang.vue-alias-skip", // vue 路径别名跳转
        "dariofuzinato.vue-peek", // vue 单文件组件跳转增强
        "esbenp.prettier-vscode", // Prettier 格式化
        "mhutchie.git-graph" // git 可视化
        // 目前无法配置指定插件版本，只能手动安装
        // code --install-extension Vue.volar@3.0.8
      ]
    }
  },
  "extensions": [
  ],
  // 核心：端口转发（如果有 vue/express 服务）
  // 默认情况下 vsc-server 会自动扫描容器的端口，然后即时转发到宿主机上
  "forwardPorts": [],
  // 核心：处理挂载冲突
  "mounts": [
    // 将本地代码映射进容器
    "source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached",
    // 关键：防止宿主机的 node_modules 覆盖容器内编译好的 linux 版二进制文件
    "source=canvas-node-modules,target=/workspace/node_modules,type=volume"
  ],
  // 容器创建后自动安装依赖
  "postCreateCommand": "npm install --build-from-source",
  "runArgs": [
    // 不写时创建的容器将是一个随机的名称, 可读性较差
    // 容器名称, 需要唯一
    "--name",
    "canvas-demo-container"
  ]
}

创建完两个文件后, cmd/ctrl + p 打开 vscode 调用输入框，选择 Rebuild and Reopen in Container 就可以构建容器了

tips: 建议先把基础镜像拉取下来再构建，直接构建也会自动拉取就是了

等待一段镜像构建和依赖安装时间后，vscode 就会自动启动容器并展示工作空间，这时一个和本地依赖隔离的开发环境就构建完成了。

容器启动后，跑一下这个项目的测试命令

bash 复制代码

npm run test-server

可以看到服务正常启动在容器内部的 4000 端口，vsc 很贴心的帮你做了自动端口转发，一般是和容器的一致，也就是你可以在本机浏览器上直接访问 localhost:4000 就能看到项目的测试页面

到这里构建隔离开发环境的基础案例就结束了。

上面讲的是用自定义的 Dockerfile 来构建镜像，并且项目的 node_modules 也被封装在镜像内部方便共享。

下面的配置可以做到依赖另一个镜像而不是自己构建，并且代码目录直接挂载到容器内部，简化了一下操作，可以根据自己喜欢的开发场景选择

json 复制代码

{
  "name": "Webpack",
  "image": "node:20.20.2-bullseye",
  "customizations": {
    "vscode": {
      "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
      }
    }
  },
  // vscode 默认配置, 显示写出来方便学习和修改
  "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
  "workspaceMount": "source=${localWorkspaceFolder},target=/workspaces/${localWorkspaceFolderBasename},type=bind,consistency=cached",
}

总结一下上面的两个核心文件:

devcontainer.json 配置 vsc 构建容器的初始选项，包括使用 Dockerfile 还是已有的镜像进行构建，支持配置初始的插件和细化的挂载操作。
Dockerfile 当选择自己构建镜像时需要提供，能够对容器依赖的镜像做更加客制化的操作。

下次打开 vscode 在旁边的远程连接里面就可以重新打开容器了

参考文档

https://code.visualstudio.com/docs/devcontainers/containers