使用容器进行开发

系列 入门
1
2
3
4
目录

解释

现在您已经安装了 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. 在您的浏览器中打开https://127.0.0.1以查看正在运行的应用程序。应用程序可能需要几分钟才能运行。该应用程序是一个简单的待办事项应用程序，因此您可以随意添加一两项，标记一些为已完成，甚至删除一项。

    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

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

module.exports = async (req, res) => {
...

  3. 现在，通过进行以下更改，更新端点以从该列表中发送随机问候语。

     7
 8
 9
10
11

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

  4. 如果您尚未执行此操作，请保存文件。刷新浏览器后，您应该会看到一个新的问候语。如果您继续刷新，您应该会看到所有消息出现。

    Screenshot of the to-do app with a new greeting

更改占位符文本

查看应用程序时，您将看到占位符文本只是“New Item”。您现在将使它更具描述性和趣味性。您还将对应用程序的样式进行一些更改。

  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&quot;

更改背景颜色

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

  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&quot;

就这样，您完成了。祝贺您更新您的网站。

回顾

在继续之前，请花点时间思考一下这里发生了什么。在短短的几分钟内，您就可以

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

  • 进行更改并立即查看它们。这是因为 1) 每个容器中运行的进程都在监视并响应文件更改，以及 2) 文件与容器化环境共享。

Docker Desktop 支持所有这些功能以及更多功能。一旦您开始使用容器进行思考，您就可以创建几乎任何环境，并轻松地与您的团队共享。

下一步

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

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