发布于 2026-01-05 4 阅读
0

使用这款 VS Code 扩展程序改进您的 Docker 工作流程。DEV 的全球展示与讲述挑战赛由 Mux 呈现:展示您的项目!

使用此 VS Code 扩展程序改进您的 Docker 工作流程

由 Mux 主办的 DEV 全球展示挑战赛:展示你的项目!

欢迎在推特上关注我,我很乐意接受您对话题或改进方面的建议。/克里斯

在 Docker 工作流程中,您需要完成很多操作。您将花费大量时间在终端上,并编写 Dockerfile 和/或 docker-compose.yaml 文件。幸运的是,有一个扩展程序可以极大地帮助您完成上述所有操作,以及部署到云端。

您的 Docker 工作流程

在使用 Docker 时,我们经常会执行一些相同的操作。这些操作包括:

  • 编写Dockerfile 或 docker-compose.yml 文件
  • 在这里,我们负责管理所有工作,包括添加标签、推送到代码仓库等等。
  • 运行/启动/停止/移除容器,如果对每个容器/镜像都执行这些操作,将会涉及相当多的操作。幸运的是,我们有 Docker Compose,它可以对容器组进行操作。
  • 将 Docker 镜像部署到 Docker Hub 等镜像仓库或云端某个位置。
  • 将其投入生产环境,这既可以在本地部署,也可以使用某种云解决方案。

除非我们有像Docker Kitematic或类似的工具可以使用,否则我们很可能要花很多时间在终端上。

资源

以下是一系列资源,可帮助您加深对 Docker 的了解,并了解 Docker 在云计算环境中的应用:

 Docker 扩展

本文旨在介绍一款能够真正帮助您提高工作效率的 Visual Studio Code 扩展。那么,它究竟能做什么呢?

  • 在编写代码方面,它可以帮助您生成 Dockerfile 和 Docker Compose 文件。此外,它还支持自动补全、文件检查等功能。
  • 管理工具自带一系列命令,可以帮助完成从文件生成到管理镜像和容器等各种操作。
  • 浏览仓库功能允许您浏览 Docker Hub 以及云端容器注册表。
  • 部署到云端,该工具让您只需单击一下即可将应用部署到云端,只需选择您的镜像即可,部署过程简单易行,完全取决于您的需求。

安装

安装方法与安装其他扩展程序相同。打开 Visual Studio Code,点击扩展程序按钮,然后输入命令Docker,如下所示:

创作

我们可以通过两种方式来解决这个问题:

  • 创建我们的Dockerfile文件docker-compose.yml并开始创作。
  • 让扩展程序为我们生成文件。我们来展示一下后者。

生成文件

CMD +SHIFT + P在 Mac 上打开命令菜单并开始输入Docker。它应该会显示“ 选择” 。

Add Docker Files to Workspace

然后系统会提示我们选择“是”, 因为这正是我们要构建的内容。如果您有 Go 或 .Net Core 项目,请选择相应的项目。Select platform

Node.js

最后,我们需要选择一个端口,我们选择默认建议的端口3000

选择平台后需要看到的对话框可能因所选平台而异。

 生成的文件

那么,我们从中得到了什么?
我们得到了:

  • docker-compose.yml
  • docker-compose.debug.yml
  • Dockerfile
  • .dockerignore

不仅是文件,而且文件内容也很丰富。

Dockerfile
我们来看Dockerfile一个例子

FROM node:10.13-alpine
ENV NODE_ENV production
WORKDIR /usr/src/app
COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
RUN npm install --production --silent && mv node_modules ../
COPY . .
EXPOSE 3000
CMD npm start
Enter fullscreen mode Exit fullscreen mode

上面我们看到一切都有人替我们做了。它有

  • 选择了一张图片
  • 设置环境变量
  • 设置工作目录
  • 已复制 package.jsonpackage-lock.json
  • 安装了我们的库
  • 复制了我们的申请文件
  • 暴露了一个端口
  • 已发出命令,将在容器中启动我们的应用程序。

真是令人印象深刻!当然,我们仍然需要编写我们的应用程序。


接下来我们来看一下docker-compose.ymldocker-compose.yml文件:

version: '2.1'

services:
  articles:
    image: articles
    build: .
    environment:
      NODE_ENV: production
    ports:
      - 3000:3000
Enter fullscreen mode Exit fullscreen mode

它已经完成了所有设置,包括如何构建镜像、设置环境变量和映射端口。

docker-compose.debug.yml
这会生成一个与 docker-compose.yml 非常相似的文件,docker-compose.yml但区别在于它是node检查模式下运行的,如下所示command: node --inspect index.js

.dockerignore
文件包含许多用于匹配我们不想复制的文件的良好模式,例如node_modules.git.envDockerfile您可能需要根据自己的需要调整此文件。

使用自动完成功能进行创作

好的。我们来看一个从头开始的场景。首先,我们创建一个Dockerfile.

让我们开始输入FROM。如下所示,我们会​​获得有关如何输入命令以及命令应如何显示的帮助信息。

我们继续输入名称baseImage,在本例中,我们要查找Node.js图片,所以我们开始输入字符n。下面会显示与我们输入内容匹配的选项列表。它按受欢迎程度列出了基础图片,并添加了一些有用的信息,以便我们了解搜索结果:

接下来我们尝试输入,ENV但只输入到E提示框就显示我们正在输入的命令以及输入方式之前:


如你所见,它对我们如何输入命令非常有帮助。

接下来是,WORKDIR它向我们展示了: 它不仅告诉我们如何输入命令,还告诉我们它会影响像等命令。

COPYADD

此时,我们希望告诉它复制一些在运行诸如安装库之类的命令之前可能需要的文件:


这就给了我们两种不同的 复制方式relativeabsolute

如前所述,我们需要运行一个命令来安装软件。自动补全功能告诉我们以下内容:


这再次暗示了这可能是哪些类型的命令。

到目前为止,Dockerfile我们可能需要访问COPY应用程序文件,我们已经向您展示了如何使用自动完成功能,所以让我们来看看EXPOSE

正如你所看到的,它展示了导出端口的所有不同方式,真的很有教育意义。

好的,此时通常还需要一条命令,我们可以用 `a`CMD或`b`ENTRYPOINT来在容器中启动我们的应用程序:

管理

我们将在这里使用命令面板。它允许我们调用的命令数量几乎多得惊人。不过,我们还是按主题来介绍它们吧。命令面板包含一个很长的 Docker 命令列表。我们可以

  • 构建Docker 镜像
  • 运行容器
  • 查看日志
  • 停止/移除容器
  • 停止/移除图像
  • 显示日志以及更多内容……

让我们集中精力把应用程序启动并运行起来。

构建应用程序

好的,这是一个非常简单的应用程序,所以我们打开终端并运行以下命令,把它转换成一个 Node.js 应用程序。

npm init -y
Enter fullscreen mode Exit fullscreen mode

然后运行:

npm install express
Enter fullscreen mode Exit fullscreen mode

然后添加以下内容app.js

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))
app.listen(port, () => console.log(`Example app listening on port ${PORT}!`))
Enter fullscreen mode Exit fullscreen mode

最后,package.json添加以下内容进行更新scripts

"start": "node.app.js"
Enter fullscreen mode Exit fullscreen mode

现在我们准备好了!

View / Command Palette以下所有命令,均可通过菜单打开命令面板,或使用快捷键(Mac 系统为 Ctrl+C)调用快捷键。CMD + SHIFT + P

构建图像

开始输入Docker: Build,自动补全功能会缩小选择范围。执行建议的命令。

它会询问我们是否要使用当前 Dockerfile 以及要给镜像添加什么标签。选择完成后,它会开始拉取基础镜像并执行 Dockerfile 中的所有命令Dockerfile。完成后,你应该可以通过输入命令并查找你指定的标签名称
来查看新构建的镜像,它应该会显示在列表顶部。docker images

运行镜像

开始输入Docker: Run命令,并按照提示执行。这将列出您可以运行的 Docker 镜像。查看终端中执行的命令,如下所示:docker run --rm -d -p 3000:3000/tcp articles:latest

Docker Compose

当然,我们可以利用 Docker Compose 的强大功能进行上行和下行操作。

开始输入命令Docker: Compose Up,这将在首次运行时创建 Docker 镜像,然后运行容器。使用命令验证docker ps。此外,我们还有Docker: Compose DownDocker Compose Restart

 浏览存储库

在操作栏底部,您应该会看到一个类似 Docker 鲸鱼的图标。点击该图标,您应该会看到:


如上所示,您可以查看计算机上的所有镜像,也可以查看其他镜像仓库,例如 Docker Hub、Azure 以及您添加的任何私有镜像仓库。要使用 Azure 镜像仓库,您需要Azure Account安装相应的扩展程序。安装完成后,您应该会看到类似这样的内容:

在 Azure 容器注册表中右键单击 Docker 镜像,我们可以执行更多命令: 如您所见,我们可以在门户中查看资源。我们可以删除整个存储库,也可以将其中的所有内容拉取到本地计算机。

 部署到云端

部署到云端只有一种方法:

  • 从 Docker Hub 部署

这篇介绍此扩展的文章说应该可以从容器注册表进行部署。我确信可以,只是我还没弄明白如何通过扩展程序来实现。一旦我找到了方法,就会更新文章。

总之,要从 Docker Hub 部署,你只需要登录 Docker Hub,右键单击你的 Docker 镜像,然后选择“部署”,就像这样:

概括

我们已经向您展示了这款 Visual Studio Code 扩展的许多功能。您可以管理镜像、容器,并对它们执行各种操作,例如构建、运行、查看日志,甚至将它们部署到云端。

希望这对您有所帮助,也希望您能试用一下这个扩展程序。

文章来源:https://dev.to/azure/improve-your-docker-workflow-with-this-vs-code-extension-j60