现在您已经安装了 Docker Desktop,可以开始进行应用程序开发了。具体来说,您将执行以下操作:
在本实践指南中,您将学习如何使用容器进行开发。
首先,您可以将 项目克隆或下载为 ZIP 文件 到本地计算机。
$ git clone https://github.com/docker/getting-started-todo-app
项目克隆完成后,导航到克隆创建的新目录:
$ cd getting-started-todo-app
项目完成后,使用 Docker Compose 启动开发环境。
要使用 CLI 启动项目,请运行以下命令:
$ docker compose watch
你会看到输出信息,显示容器镜像正在下载、容器正在启动等等。如果你现在还不能完全理解,也不用担心。但过一会儿,一切就会稳定下来并完成。

现在环境已经启动并运行,那么它里面究竟包含哪些内容呢?从总体上看,它包含多个容器(或进程),每个容器(或进程)都满足应用程序的特定需求:
在这种环境下,作为开发人员,您无需安装或配置任何服务、填充数据库模式、配置数据库凭据等等。您只需要 Docker Desktop。其余功能都能自动运行。
有了这个环境并运行起来,你就可以对应用程序进行一些更改,看看 Docker 如何帮助提供快速的反馈循环。
页面顶部的问候语是通过 API 调用生成的/api/greeting。目前,它始终返回“Hello world!”。现在,您需要将其修改为返回三个随机消息中的一个(您可以从中选择)。
用文本编辑器打开该backend/src/routes/getGreeting.js文件。该文件提供了 API 端点的处理程序。
将顶部的变量修改为一个问候语数组。您可以随意使用以下修改,或根据自己的喜好进行自定义。此外,请更新端点,使其能够从该列表中随机发送一条问候语。
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文件。此组件用于向待办事项列表添加新项目。
修改元素placeholder的属性Form.Control,使其显示你想要显示的内容。
<Form.Control
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),可以使用其内置的颜色选择器来选择颜色。否则,您也可以使用在线颜色选择器。
body {
background-color: #99bbff;
margin-top: 50px;
font-family: 'Lato';
}
每次保存后,您都应该能在浏览器中立即看到更改。请不断调整,直到找到最适合您的设置。

至此,就完成了。恭喜你网站更新成功。
在继续之前,请花点时间反思一下这里发生的事情。短短几分钟内,你就能够:
无需任何安装工作,即可启动完整的开发项目。容器化环境提供了开发环境,确保您拥有所需的一切。您无需在本地计算机上直接安装 Node、MySQL 或任何其他依赖项。您只需要 Docker Desktop 和代码编辑器即可。
做出更改即可立即查看。这之所以能够实现,是因为:1)每个容器中运行的进程都在监视并响应文件更改;2)文件与容器化环境共享。
Docker Desktop 可以实现这一切,甚至更多。一旦你开始使用容器,你就可以创建几乎任何环境,并轻松地与团队共享。
现在应用程序已经更新完毕,您可以学习如何将其打包为容器镜像并将其推送到注册表,特别是 Docker Hub。