使用容器进行开发

主页 / 开始 / 介绍 / 使用容器进行开发使用容器进行开发目录说明试一试启动项目环境中有什么？更改应用程序更改问候语更改占位符文本更改背景颜色回顾后续步骤说明现在您已安装 Docker Desktop，您可以开始进行应用程序开发了。具体来说，您将执行以下操作：

克隆并启动一个开发项目更改后端和前端立即查看更改试一试在本实践指南中，您将学习如何使用容器进行开发。

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

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

克隆项目后，导航到克隆创建的新目录。

$ cd getting-started-todo-app

获得项目后，使用 Docker Compose 启动开发环境。

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

$ docker compose watch

您将看到输出显示正在下载容器镜像、容器正在启动等等。如果您现在还不理解所有内容，请不要担心。但是，在一两分钟内，事情应该会稳定下来并完成。

打开浏览器访问https://127.0.0.1以查看正在运行的应用程序。应用程序可能需要几分钟才能运行。该应用程序是一个简单的待办事项应用程序，因此您可以随意添加一个或两个项目，将一些项目标记为已完成，甚至删除项目。

环境中有什么？现在环境已启动并运行，其中实际上有什么？在高层次上，有几个容器（或进程），每个容器都为应用程序提供特定的需求。

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！”。您现在将修改它以返回三个随机消息之一（您可以选择）。

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

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

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 )],

});

};如果您还没有这样做，请保存文件。如果刷新浏览器，您应该会看到新的问候语。如果继续刷新，您应该会看到所有消息都显示出来。

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

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

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

33

34

35

36

37

38

39

value={newItem}

onChange={(e) => setNewItem(e.target.value)}

type="text"

placeholder="What do you need to do?"

aria-label="New item"

/>保存文件并返回到您的浏览器。您应该已经看到更改热重载到您的浏览器中。如果您不喜欢它，可以随意调整它，直到看起来恰到好处。

更改背景颜色在您认为应用程序已最终确定之前，您需要使颜色更好。

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

将background-color属性调整为您喜欢的任何颜色。提供的代码片段是柔和的蓝色，与 Docker 的航海主题相符。

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

3

4

5

6

7

body {

background-color: #99bbff;

margin-top: 50px;

font-family: 'Lato';

}每次保存都应该让您在浏览器中立即看到更改。继续调整它，直到它成为您完美的设置。

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

回顾在继续之前，请花一点时间回顾一下这里发生的事情。在短短几分钟内，您就能够

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

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

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

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

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