教程：使用 Visual Studio Code 创建容器应用

2025-05-14

本教程是介绍用于 Visual Studio Code（VS Code）的 Docker 的四部分系列教程的开头。你将了解如何创建和运行 Docker 容器，保留数据，并使用 Docker Compose 管理多个容器。

VS Code 提供了一个容器工具扩展，可让你使用本地 Docker Desktop 服务。 Docker Desktop 在计算机上运行并管理本地容器，这些容器是压缩虚拟化环境，可提供用于生成和运行应用的平台。容器不需要完整操作系统的大小和开销。

在第一个教程中，你将了解如何：

创建 Docker 容器。
生成容器映像。
启动应用容器。

先决条件

已安装 Visual Studio Code。
已安装容器工具 VS Code 扩展。
Docker Desktop 配置为使用 Linux 容器。
Docker Hub 帐户。可以免费创建帐户。

本教程适用于 Windows 10 或更高版本和配置为使用 Linux 容器的 Docker Desktop。

创建容器

容器是计算机上的进程。它与主计算机上的所有其他进程隔离。该隔离使用内核命名空间和控制组。

容器使用独立的文件系统。此自定义文件系统由 容器映像提供。映像包含运行应用程序所需的所有内容，例如所有依赖项、配置、脚本和二进制文件。映像还包含容器的其他配置，例如环境变量、要运行的默认命令和其他元数据。

安装适用于 VS Code 的容器工具扩展后，可以在 VS Code 中使用容器。除了容器资源管理器中的上下文菜单外，还可以选择 “终端>新建终端 ”以打开命令行窗口。还可以在 Bash 窗口中运行命令。除非指定，否则标记为 Bash 的任何命令都可以在 Bash 窗口或 VS Code 终端中运行。

将 Docker 设置为 Linux 容器模式。若要切换到 Linux 容器（如果当前已设置为 Windows 容器），请在运行 Docker Desktop 时右键单击系统托盘中的 Docker 图标，然后选择 切换到 Linux 容器。
在 VS Code 中，选择终端>新终端。
在终端窗口或 Bash 窗口中，运行以下命令。
```
docker run -d -p 80:80 docker/getting-started
```
此命令包含以下参数：
- -d 在后台以分离模式运行容器。
- -p 80:80 将主机的端口 80 映射到容器中的端口 80。
- docker/getting-started 指定要使用的映像。
提示

可以组合单个字符标志来缩短完整命令。例如，上述命令可以编写为：
```
docker run -dp 80:80 docker/getting-started
```
在 VS Code 中，选择左侧的“容器”图标以查看容器资源管理器。

容器工具 VS Code 扩展显示计算机上运行的容器。可以访问容器日志并管理容器生命周期，例如停止和删除。

将随机创建容器名称（在本示例中 modest_shockley）。你的名称会有所不同。
右击 docker/getting-started 以打开上下文菜单。选择“在浏览器中打开”。

请打开浏览器并输入 http://localhost/tutorial/。

你将看到一个在本地托管的关于 DockerLabs 的页面。
右击 docker/getting-started 以打开上下文菜单。选择“删除以删除此容器。

若要使用命令行删除容器，请运行以下命令以获取其容器 ID：
```
docker ps
```
然后停止并删除容器：
```
docker stop <container-id>
docker rm <container-id>
```
刷新浏览器。你刚才看到的“入门”页面已消失。

为应用生成容器映像

本教程使用简单的 Todo 应用程序。

屏幕截图显示了示例应用程序，其中添加了多个项，以及用于添加新项的文本框和按钮。

应用允许你创建工作项并将其标记为已完成或删除它们。

若要生成应用程序，请创建 Dockerfile。 Dockerfile 是基于文本的说明脚本，用于创建容器映像。

转到 Docker 入门教程存储库，然后选择代码>下载 ZIP。将内容提取到本地文件夹。
在 VS Code 中，选择文件>打开文件夹。导航到提取的项目中的应用文件夹，然后打开该文件夹。应会看到一个名为 package.json 的文件和两个名为 src 和规范的两个文件夹。
使用以下内容在文件 package.json 的同一文件夹中创建名为 Dockerfile 的文件。
```
FROM node:lts-alpine
RUN apk add --no-cache python3 g++ make
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "/app/src/index.js"]
```
注意

请确保该文件没有文件扩展名，如 .txt。
在文件资源管理器中，在 VS Code 的左侧，右键单击“Dockerfile”，然后选择“生成映像”。在文本输入框中输入 getting-started 作为映像的标记。

标记是映像的易记名称。

若要从命令行创建容器映像，请在包含“Dockerfile”的 app 文件夹中使用以下命令。
```
docker build -t getting-started .
```

你已使用 Dockerfile 来生成新的容器映像。你可能已经注意到，下载了许多“层”。 Dockerfile 从映像启动node:lts-alpine。除非该映像已在计算机上，否则需要下载该映像。

下载镜像后，Dockerfile 复制你的应用程序，并使用 yarn 安装你的应用程序的依赖项。 CMD 中的值指定从此映像启动容器时要运行的默认命令。

. 命令末尾的 docker build 告知 Docker 应查找当前目录中的 Dockerfile。

启动应用容器

有了映像后，即可运行应用程序。

若要启动容器，请使用以下命令。
```
docker run -dp 3000:3000 getting-started
```
-d 参数指示在分离模式下（在后台）运行容器。 -p 值在主机端口 3000 和容器端口 3000 之间创建映射。如果没有端口映射，将无法访问应用程序。
几秒后，在 VS Code 的容器资源管理器的容器下，右键单击 getting-started 并选择“在浏览器中打开”。可以改为将 Web 浏览器打开到 http://localhost:3000。

你应该会看到应用运行。
添加一个或两个项目以测试它是否按预期工作。可以将项目标记为已完成并删除项。前端已成功将项目存储在后端。

后续步骤

你已完成本教程，并且有一个包含几个项的正在运行的待办事项列表管理器。你已了解如何创建容器映像并运行容器化应用。

保留迄今为止所完成的一切内容，以继续学习本系列教程。接下来，请尝试本系列的第 II 部分：

更新和共享容器应用

下面是一些可能对你有用的资源：

通过