启动项目
- 首先，将项目克隆或下载为 ZIP 文件到本地机器。
git clone https://github.com/docker/getting-started-todo-app2.拥有项目后，使用 Docker Compose 启动开发环境。docker compose watch此处出现=> ` ERROR [backend internal] load metadata for docker.io/library/node:20 ` 更换阿里云镜像源仍失败，更改DNS为8.8.8.8/8.8.4.4后成功
- 打开浏览器访问 http://localhost即可看到应用程序启动并运行。应用程序可能需要几分钟才能运行。该应用程序是一个简单的待办事项应用程序，因此可以随意添加一两个项目、将一些项目标记为已完成，甚至删除一个项目。
环境中有什么？
现在环境已启动并运行，那么它里面到底有些什么呢？从高层次来看，有多个容器（或进程），每个容器都可满足应用程序的特定需求：
- React前端 - 一个使用Vite运行 React 开发服务器的 Node 容器。
- 节点后端 - 后端提供的 API 可以检索、创建和删除待办事项。
- MySQL 数据库——用于存储项目列表的数据库。
- phpMyAdmin - 一个基于 Web 的界面，用于与可通过http://db.localhost访问的数据库进行交互 。
- Traefik 代理 - Traefik是一个应用程序代理，可将请求路由到正确的服务。它将 的所有请求发送localhost/api/到后端，将 的请求发送localhost/到前端，然后将 的请求发送db.localhost到 phpMyAdmin。这提供了使用端口 80（而不是每个服务使用不同的端口）访问所有应用程序的能力。
- 使用此环境，作为开发人员，您无需安装或配置任何服务、填充数据库模式、配置数据库凭据等。您只需要 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 )],
});
};
**总结 javascript代码部分 作用**
- Math.random() 生成随机浮点数（0 ≤ 值 < 1）
- GREETINGS.length 扩展范围到数组长度
- Math.floor() 确保结果为整数，用于安全访问数组
- GREETINGS[索引] 最终随机选中一个元素
- 其他常见取整方法对比 | 方法 | 示例输入 | 结果 | 说明 | | :—– | :—– | :—– | :—– | |Math.floor(2.7)| 2.7 | 2 | 向下取整（地板值）| |Math.ceil(2.1) | 2.1 | 3 | 向上取整（天花板值）| |Math.round(2.4) | 2.4 | 2 | 四舍五入| |Math.round(2.5)| 2.5 | 3 | 四舍五入|
构建项目
docker build -t suikk(Username)/getting-started-todo-app .
要验证图像是否存在于本地
docker image ls
推送图像
docker push <DOCKER_USERNAME>/getting-started-todo-app
