教程：使用 Visual Studio Code 创建 Docker 应用

项目
04/12/2023

本教程是介绍用于与 Visual Studio Code (VS Code) 结合使用的 Docker 的四部分系列文章的开头部分。你将了解如何使用 Docker Compose 创建和运行 Docker 容器、保留数据以及管理多个容器。

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

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

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

必备条件

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

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

创建容器

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

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

安装 VS Code 的 Docker 扩展后，可以在 VS Code 中使用容器。除了 Docker 窗格中的上下文菜单外，还可以选择“终端”>“新建终端”以打开命令行窗口。还可以在 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 中，选择左侧的 Docker 图标以查看 Docker 扩展。

Docker VS Code 扩展会显示计算机上运行的容器。可以访问容器日志并管理容器生命周期（例如停止和移除）。

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

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

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

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

为应用生成容器映像

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

Screenshot shows the sample application with several items added and a text box and button to add new items.

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

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

转到 Docker 入门教程存储库，然后选择“代码”>“下载 ZIP”。将内容提取到本地文件夹。
在 VS Code 中，选择“文件”>“打开文件夹”。导航到提取的项目中的 app 文件夹并打开该文件夹。应看到名为 package.json 的文件和两个名为 src 和 spec 的文件夹。
在与文件 package.json 相同的文件夹中创建一个名为 Dockerfile 的文件，并包含以下内容。
```
FROM node:20-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 作为映像的标记。

标记是映像的易记名称。

若要从命令行创建容器映像，请使用以下命令。
```
docker build -t getting-started .
```
注意

在外部 Bash 窗口中，转到包含 Dockerfile 的 app 文件夹以运行此命令。

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

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

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

启动应用容器

现在你已拥有映像，可以运行应用程序。

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

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

后续步骤

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

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

更新和共享 Docker 应用

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