跳到主要内容

Dev Container 教程 (二) 使用预构建加速流程

小林
小林
后端开发工程师, 专注Go开发、微服务和云原生

我在之前的文章介绍了 Dev Container 的基本使用, 但容器构建耗时过长的问题还未探讨, 本文将通过预构建(prebuild)技术, 彻底解决这一痛点

messenger-showing.png

前置条件​

简单示例​

下面以 Go 开发环境为例, 演示如何配置一个基本的 Dev Container

新建 go-prebuild 目录并添加下面文件

.devcontainer/devcontainer.json
{
    "name": "Go",
    "image": "mcr.microsoft.com/devcontainers/go:1-1.24-bookworm",
    "features": {
        "ghcr.io/mrsimonemms/devcontainers/cobra-cli:1": {}
    },
    "customizations": {
        "vscode": {
            "settings": {
                "window.newWindowProfile": "Default", // 新窗口使用的配置文件, 只能在"默认配置文件"中设置
                "files.autoSave": "afterDelay", // 自动保存文件
                "editor.formatOnSave": true, // 保存时自动格式化
                "files.simpleDialog.enable": true, // 简单对话框, ctrl+n 新建文件时不再弹出对话框
                "editor.insertSpaces": true, // 使用空格代替制表符
                "editor.tabSize": 4, // 缩进空格数
                "editor.autoClosingDelete": "always", // 删除左括号时总是自动删除右括号
                "editor.minimap.autohide": "mouseover", // 鼠标不在缩略图上时隐藏缩略图, 鼠标在缩略图上时显示缩略图
                "terminal.integrated.cursorStyle": "underline", // 终端光标样式使用下划线
                "explorer.confirmDelete": false, // 删除文件时不再弹出确认对话框
                "explorer.confirmDragAndDrop": false, // 拖放移动文件或文件夹时不再弹出确认对话框
                "vsicons.dontShowNewVersionMessage": true, // 不显示新版本消息
                "workbench.iconTheme": "vscode-icons" // 使用 vscode-icons 图标主题
            },
            "extensions": [
                "mhutchie.git-graph", // Git 图形化视图
                "eamodio.gitlens", // Git 增强工具, 主要为了能显示代码作者
                "vscode-icons-team.vscode-icons", // VSCode 图标主题
                "github.copilot", // GitHub Copilot, AI 代码补全
                "github.copilot-chat" // GitHub Copilot Chat, AI 聊天助手
            ]
        }
    },
    "containerEnv": {
        "GOPROXY": "https://goproxy.io,direct"
    },
    "runArgs": [
        "--name",
        "go-container"
    ]
}

关键参数解析

  • features: 配置添加功能模块, 这里添加Go命令行工具 cobra-cli
  • customizations: 个性化配置, 这里提供我的VSCocde设置和插件以供参考
  • containerEnv: 设置环境变量, 这里通过环境变量设置Go镜像源
  • runArgs: 传递给 Docker CLI 的参数, 这里给启动容器命名为 go-container, 方便查找

Features​

Features 是 Dev Container 一项比较强大的能力, 它将常见的开发环境配置封装为可复用的模块, 使环境配置变得简单高效

Features 核心优势

  1. 模块化设计
  • 将常见开发环境配置拆分为独立的、可组合的功能单元
  • 每个 Feature 专注于单一职责(如安装特定语言运行时、配置工具链等)
  • 可根据项目需求灵活组合不同 Features
  1. 简化配置
  • 无需再编写复杂的 Dockerfile 或处理繁琐的安装脚本
  • 通过简单的声明式语法在 devcontainer.json 中添加功能

在 VSCode 中，可以通过可视化界面轻松添加 Features:

feature-devcontainer.gif

官方和社区提供了很多常用的 Features, 具体可以参考 Available Dev Container Features

添加插件​

Dev Container 支持在容器内预装 VS Code 插件, 确保开发环境开箱即用. 配置插件有两种方式:

  1. 手动添加: 将插件 ID 添加到 devcontainer.json 的 extensions 数组中
  2. 可视化操作: 在 VSCode 界面中管理插件

extensions-devcontainer.gif

推荐实践: 对于团队项目, 建议在 devcontainer.json 中明确指定必要插件, 确保所有成员使用一致的开发环境

预构建​

安装 Dev Container CLI​

npm install -g @devcontainers/cli

构建自定义镜像​

在项目目录执行以下命令构建镜像:

devcontainer build --workspace-folder . --image-name go-devcontainer:0.1

img

构建成功后, 您将获得一个包含完整开发环境的 Docker 镜像, 可直接用于创建 Dev Container

使用预构建镜像​

新建 go-demo 目录, 创建 devcontainer.json 文件

.devcontainer/devcontainer.json
{
    "name": "go-demo",
    "image": "go-devcontainer:0.1"
}

通过 Ctrl + Shift + P 打开命令面板, 输入 "Reopen in Container" 并执行, VSCode 将使用预构建镜像启动开发环境

img

静待 VSCode 启动 VSCode Server, 下载并激活必要的插件, 接下来就可以愉快的开发了

镜像分发策略​

预构建的镜像可推送到私有或公共镜像仓库, 解决网络环境限制问题:

docker tag go-devcontainer:0.1 registry.cn-hangzhou.aliyuncs.com/lepo/go-devcontainer:0.1
docker push registry.cn-hangzhou.aliyuncs.com/lepo/go-devcontainer:0.1

也可以直接一步到位, 构建镜像并推送到镜像仓库

devcontainer build --workspace-folder . --push true --image-name <my_image_name>:<optional_image_version>

离线模式​

预构建虽解决了镜像构建问题, 但仍需要网络下载 VSCode Server 和插件. 以下方法可实现真正的离线开发环境

直接将容器打包成镜像​

  1. 首先启动一个已配置好的容器
  2. 将运行中的容器保存为新镜像

我们在先前的示例中已启动一个命名为 go-container 的容器, 可以直接将其保存为镜像

docker commit go-container go-devcontainer-offline:0.1

使用离线镜像​

新建 go-demo-offline 目录, 创建 devcontainer.json 文件

.devcontainer/devcontainer.json
{
    "name": "go-demo-offline",
    "image": "go-devcontainer-offline:0.1"
}

此时, 即使完全断开网络连接, 也能成功启动开发环境, 并且相关的环境配置, 插件安装均已准备就绪, 开箱即用

重要安全提示

此方法会将容器内所有数据(包括可能的敏感信息)打包到镜像中, 请务必:

  1. 在提交前清理容器内的敏感数据
  2. 避免将包含用户凭证的容器提交到共享仓库

保存镜像​

制作的镜像同样可以推送到私有仓库方便随时拉取开发环境, 或者可以保存为 tar 文件, 存到 U 盘随身携带

docker save -o go-devcontainer-offline.tar go-devcontainer-offline:0.1

后续可直接恢复镜像

docker load -i go-devcontainer-offline.tar

以后你就能火箭般🚀配好自己的开发环境, 从此成为最靓的仔 😎

参考​

最后于 更新