日常

学习

Posted by KK on January 16, 2025

启动项目

  1. 首先,将项目克隆或下载为 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后成功

  2. 打开浏览器访问 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

Docker文档