使用容器进行开发

目录

说明

现在您已安装 Docker Desktop，您可以开始进行应用程序开发了。具体来说，您将执行以下操作：

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

试一试

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

启动项目

  1. 要开始，请克隆或下载项目压缩文件到您的本地机器。

    $ 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。其余工作都自动完成。

更改应用程序

在这个环境启动并运行后，您就可以对应用程序进行一些更改，并了解 Docker 如何帮助提供快速的反馈循环。

更改问候语

页面顶部的问候语由/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. 将Form.Control元素的placeholder属性修改为您想要显示的任何内容。

    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）。

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