使用容器进行开发

使用容器进行开发

解释

现在您已经安装了 Docker Desktop,可以开始进行应用程序开发了。具体来说,您将执行以下操作:

  1. 克隆并启动开发项目
  2. 对后端和前端进行更改
  3. 立即查看更改

试试看

在本实践指南中,您将学习如何使用容器进行开发。

启动项目

  1. 首先,您可以将 项目克隆或下载为 ZIP 文件 到本地计算机。

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

    项目克隆完成后,导航到克隆创建的新目录:

    $ cd getting-started-todo-app
    
  2. 项目完成后,使用 Docker Compose 启动开发环境。

    要使用 CLI 启动项目,请运行以下命令:

    $ docker compose watch
    

你会看到输出信息,显示容器镜像正在下载、容器正在启动等等。如果你现在还不能完全理解,也不用担心。但过一会儿,一切就会稳定下来并完成。

  1. 打开浏览器访问 http://localhost 即可查看应用程序运行情况。应用程序可能需要几分钟才能启动。这是一个简单的待办事项应用程序,您可以随意添加一两项任务、将一些任务标记为已完成,甚至删除任务。

develop-getting-started-app-first-launch.webp

环境中有什么?

现在环境已经启动并运行,那么它里面究竟包含哪些内容呢?从总体上看,它包含多个容器(或进程),每个容器(或进程)都满足应用程序的特定需求:

  • React 前端 - 一个运行 React 开发服务器的 Node 容器,使用Vite。
  • 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!”。现在,您需要将其修改为返回三个随机消息中的一个(您可以从中选择)。

  1. 用文本编辑器打开该backend/src/routes/getGreeting.js文件。该文件提供了 API 端点的处理程序。

  2. 将顶部的变量修改为一个问候语数组。您可以随意使用以下修改,或根据自己的喜好进行自定义。此外,请更新端点,使其能够从该列表中随机发送一条问候语。

    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 )],
        });
    };
    
  3. 如果还没保存文件,请先保存。刷新浏览器后,您应该会看到新的问候语。持续刷新,您应该会看到所有消息都出现。

    Screenshot of the to-do app with a new greeting

更改占位符文本

当你查看应用时,你会发现占位符文本只是“新项目”。现在,你需要让它更具描述性和趣味性。你还需要对应用的样式进行一些更改。

  1. 打开client/src/components/AddNewItemForm.jsx文件。此组件用于向待办事项列表添加新项目。

  2. 修改元素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"
    />
    
  3. 保存文件并返回浏览器。您应该会看到更改已经热加载到浏览器中。如果您不满意,可以随意调整,直到看起来满意为止。

Screenshot of the to-do app with an updated placeholder in the add item text field"

更改背景颜色

在认为应用程序最终定稿之前,你需要改进颜色。

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

  2. 您可以根据需要将属性颜色调整background-color为任何颜色。提供的代码片段使用的是柔和的蓝色,与 Docker 的航海主题相得益彰。

    如果您使用的是集成开发环境 (IDE),可以使用其内置的颜色选择器来选择颜色。否则,您也可以使用在线颜色选择器。

    body {
        background-color: #99bbff;
        margin-top: 50px;
        font-family: 'Lato';
    }
    

    每次保存后,您都应该能在浏览器中立即看到更改。请不断调整,直到找到最适合您的设置。

develop-app-with-updated-client.webp

至此,就完成了。恭喜你网站更新成功。

概要

在继续之前,请花点时间反思一下这里发生的事情。短短几分钟内,你就能够:

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

  • 做出更改即可立即查看。这之所以能够实现,是因为:1)每个容器中运行的进程都在监视并响应文件更改;2)文件与容器化环境共享。

Docker Desktop 可以实现这一切,甚至更多。一旦你开始使用容器,你就可以创建几乎任何环境,并轻松地与团队共享。

下一步

现在应用程序已经更新完毕,您可以学习如何将其打包为容器镜像并将其推送到注册表,特别是 Docker Hub。