启动项目
- 首先,将项目克隆或下载为 ZIP 文件到本地机器。
git clone https://github.com/docker/getting-started-todo-app
2.拥有项目后,使用 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