面向前端开发人员的 Docker

2025-06-04

面向前端开发人员的 Docker

作者：Emanuel Suriano✏️

自 2013 年 Docker 发布以来，容器的使用率一直在上升，如今已成为大多数科技公司堆栈的一部分。然而，遗憾的是，在前端开发领域，容器的概念却很少被提及。

因此，当前端开发人员需要与容器化交互时，他们往往会遇到很多困难。几周前，我遇到了这样的情况，当时我不得不与公司里一些我通常不接触的服务进行交互。

任务本身很简单，但由于缺乏对容器化工作原理的了解，花了将近两天的时间才完成。经过这次经历，我现在处理容器和CI管道时感觉更加安全了，但整个过程相当痛苦且漫长。

这篇文章的目标是教您 Docker 的核心概念以及如何操作容器，以便您可以专注于您喜欢的任务！

LogRocket 免费试用横幅

Docker是什么以及为什么

让我们首先用简单易懂的语言来定义什么是 Docker（借助Docker 课程）：

Docker 是一种工具，它允许开发人员、系统管理员等轻松地将他们的应用程序部署在沙箱（称为容器）中以在主机操作系统上运行。

使用容器的主要好处是它们打包代码及其所有依赖项，因此无论计算环境如何，应用程序都能快速可靠地运行。

这种解耦使得基于容器的应用程序能够轻松、一致地部署，无论应用程序部署在何处：云服务器、公司内部服务器还是您的个人计算机。

容器化应用程序可视化

术语📖

在 Docker 生态系统中，您需要了解一些关键定义才能理解他们到底在说什么：

  • Image：应用程序的蓝图，构成了容器的基础。它是一个轻量级、独立、可执行的软件包，包含运行应用程序所需的一切，即代码、运行时、系统工具、系统库和设置。
  • Containers：这些由图像和启动容器时提供的任何其他配置选项定义，包括但不限于网络连接和存储选项。
  • Docker daemon：在主机上运行的后台服务，用于管理 Docker 容器的构建、运行和分发。守护进程是在客户端与之通信的操作系统中运行的进程。
  • Docker client：允许用户与 Docker 守护进程交互的 CLI。它也可以以其他形式的客户端形式存在，例如提供 UI 界面的客户端。
  • Docker Hub：镜像仓库。您可以将镜像仓库视为所有可用 Docker 镜像的目录。如有需要，您可以托管自己的 Docker 镜像仓库并从中提取镜像。

“你好，世界！”演示🌎

为了充分理解上述术语，让我们设置 Docker 并运行一个示例。

第一步是在你的机器上安装 Docker。请前往Docker 官方页面，选择你当前的操作系统，然后开始下载。你可能需要创建一个账户，但不用担心，Docker 不会在以上任何步骤中向你收取任何费用。

安装 Docker 后，打开终端并执行docker run hello-world。您应该看到以下消息：

➜ ~ docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
1b930d010525: Pull complete
Digest: sha256:6540fc08ee6e6b7b63468dc3317e3303aae178cb8a45ed3123180328bcc1d20f
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.
Enter fullscreen mode Exit fullscreen mode

让我们看看幕后到底发生了什么：

  1. docker是使您能够与 Docker 客户端通信的命令。
  2. 当你运行 时docker run [name-of-image]，Docker 守护进程会首先检查你的计算机上是否有该镜像的本地副本。如果没有，它会从 Docker Hub 拉取该镜像。在本例中，镜像的名称为hello-world。
  3. 一旦你有了镜像的本地副本，Docker 守护进程将从中创建一个容器，并生成以下消息Hello from Docker!
  4. 然后，Docker 守护进程将输出流式传输到 Docker 客户端并将其发送到您的终端。

Node.js 演示

“Hello, World!” Docker 演示简单快捷，但事实上我们并没有用到 Docker 的全部功能。让我们来做点更有趣的事。让我们用 Node.js 运行一个 Docker 容器。

所以，正如你可能猜到的，我们需要在 Docker 中搭建一个 Node 环境。幸运的是，Docker 团队创建了一个很棒的市场，你可以在他们的公共 Docker Hub 中搜索 Docker 镜像。要查找 Node.js 镜像，只需在搜索栏中输入“node”，你很可能会找到这个。

Docker Hub 截图

因此第一步是从 Docker Hub 拉取镜像，如下所示：

➜ ~ docker pull node
Enter fullscreen mode Exit fullscreen mode

然后，你需要设置一个基本的 Node 应用。创建一个名为 的文件node-test.js，然后使用JSON Placeholder发送一个简单的 HTTP 请求。以下代码片段将获取 Todo 并打印其标题：

const https = require('https');

https
  .get('https://jsonplaceholder.typicode.com/todos/1', response => {
    let todo = '';

    response.on('data', chunk => {
      todo += chunk;
    });

    response.on('end', () => {
      console.log(`The title is "${JSON.parse(todo).title}"`);
    });
  })
  .on('error', error => {
    console.error('Error: ' + error.message);
  });
Enter fullscreen mode Exit fullscreen mode

我想避免使用外部依赖项，node-fetch或者axios将示例的焦点放在 Node 上，而不是依赖项管理器上。

让我们看看如何使用 Node 镜像运行单个文件并解释docker run标志：

➜ ~ docker run -it --rm --name my-running-script -v "$PWD":/usr/src/app -w /usr/src/app node node node-test.js
Enter fullscreen mode Exit fullscreen mode
  • -it在该模式下运行容器interactive，您可以在容器内执行多个命令。
  • --rm执行完成后自动删除容器。
  • --name [name]为 Docker 守护进程中运行的进程提供一个名称。
  • -v [local-path: docker-path]将本地目录挂载到 Docker，以便交换信息或访问当前系统的文件系统。这是我最喜欢的 Docker 功能之一！
  • -w [docker-path]设置工作目录（起始路由）。默认情况下，此目录为/。
  • node是要运行的镜像的名称。它始终位于所有docker run标志之后。
  • node node-test.js是容器的说明。这些说明始终位于镜像名称之后。

运行上一个命令的输出应该是：The title is "delectus aut autem"。

React.js 演示⚛

由于这篇文章主要针对前端开发人员，让我们在 Docker 中运行一个 React 应用程序！

让我们从一个基础项目开始。为此，我建议使用create-react-appCLI，但您可以使用手头上的任何项目；过程是一样的。

➜ ~ npx create-react-app react-test
➜ ~ cd react-test
➜ ~ yarn start
Enter fullscreen mode Exit fullscreen mode

你应该能够看到create-react-app项目的主页。接下来，我们来介绍一个新概念，即Dockerfile。

本质上，它Dockerfile是一个简单的文本文件，其中包含有关如何构建 Docker 镜像的说明。在此文件中，您通常会指定要使用的镜像、其中包含哪些文件，以及在构建之前是否需要执行某些命令。

现在让我们在项目根目录中创建一个文件react-test。将其命名为Dockerfile，并写入以下内容：

# Select the image to use
FROM node

## Install dependencies in the root of the Container
COPY package.json yarn.lock ./
ENV NODE_PATH=/node_modules
ENV PATH=$PATH:/node_modules/.bin
RUN yarn

# Add project files to /app route in Container
ADD . /app

# Set working dir to /app
WORKDIR /app

# expose port 3000
EXPOSE 3000
Enter fullscreen mode Exit fullscreen mode

在项目中工作时，建议从 中yarn删除并将其移动到根目录。这是为了利用提供的缓存。因此，您可以在 React 应用程序中自由地执行这些操作。node_modules/appyarnrm -rf node_modules/

之后，您可以根据上述内容构建一个新图像Dockerfile，它将逐步运行定义的命令。

➜ ~ docker image build -t react:test .
Enter fullscreen mode Exit fullscreen mode

要检查 Docker 镜像是否可用，您可以运行docker image ls。

➜ ~ docker image ls
REPOSITORY TAG IMAGE ID CREATED SIZE
react test b530cde7aba1 50 minutes ago 1.18GB
hello-world latest fce289e99eb9 7 months ago 1.84kB
Enter fullscreen mode Exit fullscreen mode

现在是时候使用您在前面的示例中使用的命令来运行容器了：docker run。

➜ ~ docker run -it -p 3000:3000 react:test /bin/bash
Enter fullscreen mode Exit fullscreen mode

请注意该-it标志，运行命令后，它会在容器内给出提示符。在这里，您可以运行与本地环境中相同的命令，例如yarn start或yarn build。

要退出容器，只需输入exit，但请记住，重新启动容器时，您在容器中所做的更改将不会保留。如果您想将对容器的更改保留在文件系统中，可以使用-v标志并将当前目录挂载到/app。

➜ ~ docker run -it -p 3000:3000 -v $(pwd):/app react:test /bin/bash

root@55825a2fb9f1:/app# yarn build
Enter fullscreen mode Exit fullscreen mode

命令完成后，您可以检查/build本地项目中是否有一个文件夹。

结论👋

这是一段探索 Docker 工作原理的奇妙旅程。如果您想了解更多高级概念，或巩固对本文讨论概念的理解，我建议您查看下面链接的参考资料。

让我们继续一起创造事物👷

参考文献🤓

编者注：觉得这篇文章有什么问题？您可以在这里找到正确版本。

插件：LogRocket，一个用于 Web 应用的 DVR

 
LogRocket 仪表板免费试用横幅
 
LogRocket是一款前端日志工具，可让您重播问题，就像它们发生在您自己的浏览器中一样。无需猜测错误发生的原因，也无需要求用户提供屏幕截图和日志转储，LogRocket 让您重播会话，快速了解问题所在。它可与任何应用程序完美兼容，不受框架限制，并且提供插件来记录来自 Redux、Vuex 和 @ngrx/store 的额外上下文。
 
除了记录 Redux 操作和状态外，LogRocket 还记录控制台日志、JavaScript 错误、堆栈跟踪、带有标头 + 正文的网络请求/响应、浏览器元数据以及自定义日志。它还会对 DOM 进行插桩，以记录页面上的 HTML 和 CSS，即使是最复杂的单页应用程序，也能重现像素完美的视频。
 
免费试用。

面向前端开发人员的 Docker一文最先出现在LogRocket 博客上。

文章来源：https://dev.to/bnevilleoneill/docker-for-front-end-developers-ldi
Devto 翻译
PREV
JavaScript 的工作原理：优化解析效率
NEXT
Node.js 中的设计模式：第 2 部分