开发容器教程

这个教程会一步步带你了解如何使用 Dev Containers 扩展在 Docker 容器中运行 Visual Studio Code。完成本教程无需任何Docker基础知识。

在 Docker 容器中运行 VS Code 有很多好处，但在本教程中，我们将重点介绍使用 Docker 容器来建立一个与本地环境分开的开发环境。

前提条件

你需要安装Visual Studio Code。

安装Docker

Docker 是创建和管理容器所必需的。

Docker 桌面

下载并安装 Docker Desktop，或替代的 Docker 选项，比如远程主机上的 Docker，或支持 Docker 合规的 CLI。

启动Docker

运行 Docker Desktop 应用启动 Docker。如果你在活动栏里看到 Docker 鲸鱼图标，就知道它在运行。

Docker 可能启动几分钟。如果鲸鱼图标是动画的，说明它可能还在开始播放中。你可以点击图标查看状态。

检查一下Docker

Docker 运行后，你可以通过打开一个新的终端窗口并输入以下命令来确认一切正常：

docker --version
# Docker version 18.09.2, build 6247962

安装扩展

Dev Containers 扩展允许你在 Docker 容器中运行 Visual Studio Code。

安装开发容器扩展

检查安装

安装了开发容器扩展后，你会在最左侧看到一个新的状态栏项目。

远程状态栏条项可以快速显示VS Code在哪个上下文（本地或远程）运行，点击该项会弹出开发容器命令。

取样

为了创建一个 Docker 容器，我们将打开一个包含 Node.js 项目的 GitHub 仓库。

打开命令面板 （F1）执行命令“开发容器：尝试开发容器样本......并从列表中选择节点样本。

注意：还有其他开发容器示例，例如VScode-Remote-try-Python或VScode-remote-try-Java，但本教程将使用VScode-远程-try-node.

等容器组装好

窗口随后会重新加载，但由于容器尚未存在，VS Code会创建一个容器，并将样本仓库克隆到隔离的容器卷中。这可能需要一些时间，进展通知会提供状态更新。幸运的是，下次打开文件夹时不需要这个步骤，因为容器已经存在了。

容器建好后，VS Code 会自动连接到它，并将本地文件系统的项目文件夹映射到容器中。

检查容器

容器运行并连接后，你应该会在状态栏左下角看到远程上下文的变化：

检查你的环境

在容器中开发的一个好处是，你可以使用应用所需的特定版本的依赖，而不会影响本地开发环境。

本教程的具体容器安装了 Node.js v18，你可以通过打开一个新终端 > 新终端（Windows，Linux Ctrl+Shift+'））并输入：

node --version; npm --version

这应该会显示以下版本：

运行应用程序

现在我们可以按 F5，这样应用就会在容器内运行。流程开始后，进入 http://localhost:3000，你应该能看到简单的Node.js服务器正在运行！

终止你的容器连接

你可以在容器里结束会话，然后用文件>关闭远程连接，回到本地运行VS Code。

工作原理

下一节将更详细地介绍开发容器扩展如何设置和配置你的容器。

开发容器扩展使用了.devcontainer文件夹，具体来说devcontainer.json，以及一个可选Dockerfile或docker-compose.yml，创建你的开发容器。

在我们刚才探讨的例子中，项目有.devcontainer带有devcontainer.json在里面。该devcontainer.json使用图像mcr.microsoft.com/devcontainers/javascript-node:0-18.你可以在开发容器/图片仓库中更详细地探索这张图片。

首先，你的镜像是根据提供的 Dockerfile 或图片名构建的，也就是mcr.microsoft.com/devcontainers/javascript-node:0-18在这个例子中。然后创建一个容器，并开始使用以下设置devcontainer.json.最后，你的Visual Studio Code环境会根据设置重新安装和配置devcontainer.json.例如，这个例子中的开发容器安装了streetsidesoftware.code-拼写检查器延伸。

注：额外的配置会根据基础镜像中的内容添加到容器中。例如，我们看到streetsidesoftware.code-拼写检查器上方扩展，容器还将包括“dbaeumer.vscode-eslint”作为这是mcr.microsoft.com/devcontainers/typescript-node.在使用devcontainer.json预装时会自动完成，你可以在预装部分了解更多。

完成这些后，你的本地 Visual Studio Code 副本会连接到新开发容器内运行的 Visual Studio Code 服务器。

devcontainer.json

该devcontainer.json基本上是一个配置文件，决定了你的开发容器如何构建和启动。

//devcontainer.json
{
  "name": "Node.js",

  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18",

  // Features to add to the dev container. More info: https://containers.dev/features.
  // "features": {},

  "customizations": {
    "vscode": {
      "settings": {},
      "extensions": ["streetsidesoftware.code-spell-checker"]
    }
  },

  // "forwardPorts": [3000],

  "portsAttributes": {
    "3000": {
      "label": "Hello Remote World",
      "onAutoForward": "notify"
    }
  },

  "postCreateCommand": "yarn install"

  // "remoteUser": "root"
}

上述示例摘自VScode-远程-try-node我们在教程里用过的仓库。

你可以查看完整的列表devcontainer.json选择。

恭喜你

恭喜你，已经成功完成了本教程！

这只是对使用开发容器实现的简要概述。下一步，我们建议你看看如何在容器中打开机器上的现有文件夹，或者在容器中打开GitHub仓库或PR。

可以看看其他远程开发扩展。

• 远程 - SSH
• 女子超级联赛

或者通过安装远程开发扩展包来获取全部。

故障排除

验证 Docker 上下文

如果你没有使用全新安装的 Docker 和开发容器示例：尝试开发容器示例......示例在当前上下文中遇到问题，你应该检查一下你的 Docker 上下文。新安装会有一个“默认”上下文，你可以把它设回当前上下文。

# Displays the list of contexts, '*' denotes the current context
docker context list

# Switches the list to the 'default' context
docker context use default