使用容器进行开发
解释
现在您已经安装了 Docker Desktop,可以进行一些应用程序开发了。具体而言,您将执行以下作:
- 克隆并启动开发项目
- 更改后端和前端
- 立即查看更改
试用
在本动手指南中,您将学习如何使用容器进行开发。
启动项目
要开始使用,请将项目作为 ZIP 文件克隆或下载到本地计算机。
$ git clone https://github.com/docker/getting-started-todo-app
克隆项目后,导航到克隆创建的新目录:
$ cd getting-started-todo-app
拥有项目后,使用 Docker Compose 启动开发环境。
要使用 CLI 启动项目,请运行以下命令:
$ docker compose watch
您将看到一个输出,其中显示正在拉取容器镜像、容器正在启动等。如果您此时不完全理解,请不要担心。但是,在一两分钟内,事情应该会稳定下来并结束。
打开浏览器以 http://localhost 以查看应用程序已启动并正在运行。应用程序可能需要几分钟才能运行。该应用程序是一个简单的待办事项应用程序,因此您可以随意添加一两个项目,将一些项目标记为已完成,甚至删除一个项目。
环境中有什么?
现在环境已经启动并运行,其中实际上包含什么?概括地说,有几个容器(或进程)每个容器都满足应用程序的特定需求:
- React 前端 - 一个使用 Vite 运行 React 开发服务器的 Node 容器。
- Node 后端 - 后端提供了一个 API,该 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 端点的处理程序。将顶部的变量修改为问候数组。请随意使用以下修改或根据自己的喜好进行自定义。此外,更新终端节点以从此列表发送随机问候语。
1 2 3 4 5 6 7 8 9 10 11
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 )], }); };
如果尚未保存,请保存该文件。如果您刷新浏览器,您应该会看到新的问候语。如果继续刷新,您应该会看到所有消息都出现。
更改占位符文本
当您查看该应用程序时,您会看到占位符文本只是 “New Item”。现在,您将使其更具描述性和趣味性。您还将对应用程序的样式进行一些更改。
打开
client/src/components/AddNewItemForm.jsx
文件。这提供了将新项添加到待办事项列表的组件。修改
placeholder
属性的Form.Control
元素添加到您想要显示的任何内容中。33 34 35 36 37 38 39
<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,则可以使用集成的颜色选择器选择颜色。否则,请随意使用在线颜色选择器。
3 4 5 6 7
body { background-color: #99bbff; margin-top: 50px; font-family: 'Lato'; }
每次保存都应该让您立即在浏览器中看到更改。不断调整它,直到它成为最适合您的设置。
这样,您就完成了。恭喜您更新了您的网站。
回顾
在继续之前,请花点时间思考一下这里发生的事情。在片刻之间,您就能够:
以零安装工作量启动完整的开发项目。容器化环境提供了开发环境,确保您拥有所需的一切。您不必直接在计算机上安装 Node、MySQL 或任何其他依赖项。您只需要 Docker Desktop 和代码编辑器。
进行更改并立即查看它们。之所以能够做到这一点,是因为 1) 每个容器中运行的进程正在监视和响应文件更改,以及 2) 文件与容器化环境共享。
Docker Desktop 支持所有这些以及更多功能。一旦您开始考虑使用容器,您几乎可以创建任何环境并轻松地与您的团队共享。
后续步骤
现在应用程序已更新,您可以了解如何将其打包为容器镜像并将其推送到注册表,特别是 Docker Hub。