切换语言

使用容器进行开发

目录

说明

现在您已经安装了 Docker Desktop，准备好进行一些应用程序开发了。具体来说，您将执行以下操作：

  1. 克隆并启动一个开发项目
  2. 对后端和前端进行更改
  3. 立即查看更改

试用

在本实践指南中，您将学习如何使用容器进行开发。

启动项目

  1. 要开始使用，请克隆或 下载项目为 ZIP 文件 到本地计算机。

    $ git clone https://github.com/docker/getting-started-todo-app

    克隆项目后，请进入克隆创建的新目录：

    $ cd getting-started-todo-app

  2. 一旦你有了项目，使用 Docker Compose 启动开发环境。

    要使用 CLI 启动项目，请运行以下命令：

    $ docker compose watch

    您将看到显示正在拉取容器镜像、正在启动容器等的输出。如果您此时不完全理解，也不必担心。不过，在一两分钟内，情况应该会稳定并完成。

  3. 在浏览器中打开 http://localhost 以查看应用程序是否正在运行。应用程序可能需要几分钟才能启动。这是一个简单的待办事项应用程序，您可以随意添加一两项，标记一些为已完成，甚至删除某一项。

    Screenshot of the getting started to-do app after its first launch

环境里有什么？

现在环境已经启动并运行，里面实际上有什么？从高层次来看，有几个容器（或进程），每个容器都为应用程序提供特定的功能：

  • React 前端 - 一个运行 React 开发服务器的 Node 容器，使用 Vite。
  • Node后端 - 后端提供了一个API，该API提供了检索、创建和删除待办事项的能力。
  • MySQL数据库 - 用于存储项目列表的数据库。
  • phpMyAdmin - 一个用于与数据库交互的基于Web的界面，可通过 http://db.localhost访问。
  • Traefik 代理 - Traefik 是一个应用程序代理，可以将请求路由到正确的服务。它将所有针对 localhost/api/* 的请求发送到后端，将针对 localhost/* 的请求发送到前端，然后将针对 db.localhost 的请求发送到 phpMyAdmin。这使得可以使用端口 80 访问所有应用程序（而不是为每个服务使用不同的端口）。

在这个环境中，作为开发者的你无需安装或配置任何服务，无需填充数据库架构，无需配置数据库凭据，也无需其他操作。你只需要 Docker Desktop。其余的一切都会自动运行。

对应用进行更改

With this environment up and running, you’re ready to make a few changes to the application and see how Docker helps provide a fast feedback loop.

更改问候语

页面顶部的问候语是通过 /api/greeting 处的 API 调用填充的。目前，它总是返回“Hello world!”。现在您将修改它，使其返回三条随机消息之一（您可以选择这些消息）。

  1. 在文本编辑器中打开 backend/src/routes/getGreeting.js 文件。该文件为 API 端点提供了处理程序。

  2. 将顶部的变量修改为一个问候语数组。您可以使用以下修改内容，或者根据自己的喜好进行自定义。此外，请更新端点以从该列表中发送一个随机的问候语。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    const GREETINGS = [
    "Whalecome!",
    "All hands on deck!",
    "Charting the course ahead!",
];

module.exports = async (req, res) => {
    res.send({
        greeting: GREETINGS[ Math.floor( Math.random() * GREETINGS.length )],
    });
};

  3. 如果您尚未保存文件，请先保存。如果您刷新浏览器，应该会看到新的问候语。如果您继续刷新，应该会看到所有的消息出现。

    Screenshot of the to-do app with a new greeting

更改占位符文本

当你查看应用时，你会发现占位符文本仅仅是“新项目”。现在，你将使其更具描述性和趣味性。你还将对应用的样式做一些调整。

  1. 打开 client/src/components/AddNewItemForm.jsx 文件。这提供了向待办事项列表中添加新项目的组件。

  2. 将 placeholder 元素的 Form.Control 属性修改为您想要显示的任何内容。

    33
34
35
36
37
38
39

    <Form.Control
    value={newItem}
    onChange={(e) => setNewItem(e.target.value)}
    type="text"
    placeholder="What do you need to do?"
    aria-label="New item"
/>

  3. 保存文件并返回浏览器。您应该看到更改已经热重载到浏览器中。如果您不喜欢，可以随时调整，直到看起来完全符合您的要求。

Screenshot of the to-do app with an updated placeholder in the add item text field"

更改背景颜色

在您认为应用程序最终确定之前，您需要改进颜色。

  1. 打开 client/src/index.scss 文件。

  2. 将 background-color 属性调整为您喜欢的任何颜色。提供的代码片段是一种柔和的蓝色，与 Docker 的海洋主题相搭配。

    如果您正在使用 IDE，可以使用集成的颜色选择器来选择颜色。否则，请随意使用在线 颜色选择器。

    3
4
5
6
7

    body {
    background-color: #99bbff;
    margin-top: 50px;
    font-family: 'Lato';
}

    每次保存都应让您在浏览器中立即看到更改。不断调整，直到找到最适合您的设置为止。

    Screenshot of the to-do app with a new placeholder and background color"

这样，你就完成了。恭喜你更新了你的网站。

回顾

在继续之前，请花一点时间回顾一下这里发生了什么。在短短几分钟内，您能够：

  • 零安装即可启动完整的开发项目。容器化环境提供了开发环境，确保您拥有所需的一切。您无需在计算机上直接安装 Node、MySQL 或任何其他依赖项。您只需要 Docker Desktop 和一个代码编辑器。

  • 进行更改并立即查看结果。这是可能的，因为：1) 每个容器中运行的进程正在监视并响应文件更改，2) 文件与容器化环境共享。

Docker Desktop 能够实现这一切，甚至更多。一旦您开始使用容器思维，就可以创建几乎任何环境，并轻松地与您的团队共享它。

后续步骤

既然应用程序已经更新，您就可以学习如何将其打包为容器镜像并将其推送到注册表，特别是 Docker Hub。

构建并推送您的第一个镜像