使用容器进行开发

目录

解释

既然你已经安装了 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:// 来查看正在运行的应用程序。应用可能需要几分钟才能运行起来。该应用是一个简单的待办事项应用，所以你可以随意添加一两个项目，将一些标记为完成，甚至删除一个项目。

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

环境中有什么？

既然环境已经启动并运行，那么它里面到底有什么？从宏观上看，有几个容器（或进程），每个容器都为应用程序提供特定的需求：

  • React 前端 - 一个正在运行 React 开发服务器的 Node 容器，使用 Vite。
  • Node 后端 - 后端提供一个 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

更改占位符文本

当你查看应用时，你会看到占位符文本仅仅是“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"

更改背景颜色

在你认为应用程序最终定稿之前，你需要让颜色变得更好。

  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。

构建并推送您的第一个镜像
© . This site is unofficial and not affiliated with Kubernetes or Docker Inc.