部署 Docker 应用程序终极指南

Docker 彻底改变了软件的开发、测试和部署方式。它消除了软件部署中的许多常见问题，如兼容性问题以及开发环境和生产环境之间的环境差异。

在本文中，我们将探讨将 Docker 容器部署到生产环境的过程。我们将讨论容器、Docker、使用 Docker 的好处及其部署选项。最后，我们将演示如何构建、dockerize 和部署Next.js应用程序到Back4app 容器— 完全免费！

什么是集装箱？

容器是一个独立的可执行文件包，其中包含运行应用程序所需的一切。其中包括代码、运行时、库、环境变量和配置文件。容器的最大优点是可以部署到任何地方，而且体积小、速度快、效率高。

使用容器的好处

使用容器能让您的企业受益匪浅。它既能帮助开发人员，也能帮助 IT 运营团队。使用 Docker 的一些好处包括

• 可移植性：容器可以部署在任何地方！
• 应用程序隔离：容器将应用程序及其依赖关系与主机系统隔离。
• 责任分工：开发人员和 IT 运营团队分工合作。
• 更快的应用程序开发：无需摆弄本地开发环境、CI/CD。
• 轻松扩展：结合协调软件，容器可以轻松扩展。

有关容器的更多信息，请参阅《什么是云计算中的容器？

容器与虚拟机

虚拟机（VM）是物理硬件的抽象，而容器则是操作系统层面的虚拟化。虚拟机具有更强的隔离性和安全性，而容器不占空间，效率更高，可扩展性更强。

可以将容器和虚拟机结合起来，以获得两者的最佳效果。

什么是 Docker？

Docker是一种基于 Linux 的开源工具，允许开发人员在轻量级容器中创建、部署和运行应用程序。它为你提供了容器化技术的所有好处，让你可以比以往更快地编码、发布和部署软件！

它是一项稳定且经过实战检验的技术，于 2013 年发布。从那时起，它就被包括Google、AWS 和Microsoft在内的许多大公司所采用。它有一个庞大的开发者社区作为后盾，这意味着如果你遇到问题，可以很容易地找到帮助。

Docker 并不是市场上唯一的容器化工具，但却是最受欢迎的工具。一些不错的替代工具包括Podman、LXD、containerd 和Buildah。

使用 Docker 的好处

除了容器化技术的所有优点外，Docker 还具有其他一些优点。让我们一起来看看。

重量轻

Docker 以其轻量级和快速的特性，为虚拟机提供了一种实用且经济实惠的替代品。Docker 适合高密度环境和中小型部署，在这些环境中，你需要用较少的资源做更多的事情。

版本控制

Docker 允许对应用程序进行版本管理，从而在必要时轻松回滚到以前的版本。这有助于减少停机时间，并将与应用程序更新或更改相关的问题的影响降至最低。

加强协作

Docker Hub是一个基于云的存储库，用于存储、共享和管理 Docker 镜像，无需从头开始创建 Docker 镜像。它为发现和共享流行的 Docker 镜像（包括 Docker 社区创建的镜像和软件供应商提供的官方镜像）提供了一个中心位置。它与 Docker CLI 和 Docker Desktop 紧密集成。

可扩展性

Docker 提供了一种可扩展的架构，可用于将应用程序部署到大规模分布式系统，如集群或云平台。Docker 能够处理大量容器，并通过Docker Swarm或Kubernetes等工具对其进行协调，因此可以根据需求轻松地扩大或缩小规模。

Docker 和本地开发

在本地计算机上安装并运行 Docker 的最简单方法是安装Docker Desktop。Docker Desktop 是一款应用程序，它提供了一个易于使用的图形用户界面以及在本地计算机上构建、测试和部署容器化应用程序所需的工具。它允许你管理容器、镜像和卷。它内置 Docker Engine、Docker CLI 和 Docker Compose。

此外，它还允许你使用 Docker 扩展，这可以帮助你实现工作流程和任务的自动化。Docker Desktop 可让你轻松与其他开发人员协作，并内置了强大的 Docker Hub 支持。

Docker Desktop 可在 Windows、Mac 和 Linux 上使用。

Docker 部署选项

使用 Docker 开发应用程序非常简单，容器可以部署到各种平台上。我们通常可以将它们分为以下几组：

1. 传统托管
2. 基础设施即服务（IaaS）
3. 平台即服务（PaaS）
4. 容器即服务（CaaS）

根据它们的抽象性，我们可以用金字塔图将它们形象化，就像这样：

让我们逐一分析。

Docker 和传统主机

正如你可能已经猜到的那样，Docker 容器可以很容易地部署到你自己的服务器上。要让 Docker 在你的服务器上运行，你必须

1. 安装Docker 引擎
2. 构建 Docker 映像（本地）或从容器注册表中提取。
3. 使用映像来启动容器。
4. 设置网络、卷、防火墙等。

如果希望进一步简化部署过程，可以使用Docker Compose。Docker Compose 允许您在单个文件中声明服务、网络和卷。此外，它还非常适合多容器 Docker 应用程序。

IaaS 上的 Docker

基础设施即服务（IaaS）是一种云计算服务模式，在虚拟化环境中提供服务器、网络、操作系统和存储等计算资源。这些云服务器通常通过高级应用程序接口（API）或高级仪表板提供给企业，让客户完全控制整个基础设施。

IaaS 上的 Docker 与使用自己的服务器并无太大区别。如果您选择这种方法，您必须遵循与传统托管类似的步骤。

一些 IaaS 提供商包括AWS、GCP 和Azure。

PaaS 上的 Docker

平台即服务（PaaS）是一种云计算服务模式，它为用户提供一个可以开发、管理和交付应用程序的云环境。除了提供计算机资源外，PaaS 还提供大量用于开发、定制和测试应用程序的预置工具。大多数 PaaS 供应商都允许您只需点击几下即可启动并运行应用程序！

支持 Docker 的 PaaS 平台进一步简化了部署过程。PaaS 供应商通常会提供很棒的工具，让你可以轻松部署 Docker 应用程序。

要了解有关PaaS的更多信息，请查阅什么是 PaaS–平台即服务？

CaaS 上的 Docker

容器即服务（CaaS）是一种平台即服务（PaaS），专门为运行和管理容器化应用程序提供平台。它旨在使在云中运行、管理和扩展 Docker 容器和微服务变得更加容易。

CaaS 是最容易使用的选择，因为它专门针对容器，抽象了底层基础设施，使开发人员无需管理底层服务器和网络。大多数 CaaS 提供商还提供扩展、负载平衡、自动故障转移、零时部署等功能！

CaaS 的例子包括Back4app Containers、AWS ECS、Azure ACI和Google GKE。

要了解有关 CaaS 的更多信息，请查看什么是 CaaS–容器即服务？

在 Back4app Containers 中部署 Docker 容器

在本文的这一部分，我们将编码、dockerize 并部署一个简单的Next.js应用程序到Back4app 容器。

什么是 Back4app Containers？

Back4app Containers 是一个免费的开源平台，用于在全球分布式容器上部署和扩展应用程序。它可以让您专注于您的软件，更快地发布软件，而无需担心 DevOps。该平台与 GitHub 紧密集成，内置 CI/CD 系统，可让您在几分钟内启动并运行应用程序！

为什么使用 Back4app 容器？

• 与 GitHub 完美集成
• 零停机部署
• 易于使用，提供免费级别
• 卓越的客户支持

项目介绍

我们将创建一个具有持久存储功能的简单 TODO 网络应用程序。该应用程序将允许用户添加、删除和标记已完成的任务。我们将使用Next.js、React和Zustand进行状态管理和状态持久化。最后，我们将对应用程序进行 docker 化，并将其部署到 Back4app 容器中。

最终产品将是这样的：

先决条件

• 使用 JavaScript ES6 的经验
• 基本了解 React 和 Next.js
• 使用 Git 和 GitHub 的能力

代码应用程序

项目初始化

让我们先创建一个新的 Next.js 项目。

引导 Next.js 项目的最简单方法是使用create-next-app实用程序。打开终端，运行以下命令

$ npx create-next-app@latest

√ What is your project named? ... nextjs-todo
√ Would you like to use TypeScript with this project? ... No
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use `src/` directory with this project? ... No
√ Would you like to use experimental `app/` directory with this project? ... No
√ What import alias would you like configured? ... @/*

Success! Created a new Next.js app in C:\Users\Nik\WebstormProjects\nextjs-todo.

接下来，运行服务器：

$ npm run dev

导航至http://localhost:3000，你应该会看到默认的 Next.js 登陆页面。

Material UI

我们可以利用Material UI（一个遵循Google Material Design 的 React 组件库）来简化用户界面的创建过程。该库提供了多种可直接使用的组件，使用户界面的创建变得简单高效。

你可以随意将 Material UI 换成不同的 UI 框架，如React Bootstrap或Ant Design。

要在项目中添加 Material UI，请运行

$ npm install @mui/material @emotion/react @emotion/styled

Material UI 默认使用 Roboto 字体。让我们用

$ npm install @fontsource/roboto

接下来，导航到_app.js，在文件顶部添加以下导入：

用户界面

我们的网络应用程序将有以下两个页面：

1. /将显示任务列表
2. /add将允许用户添加新任务

让我们从索引页开始。

为了使我们的代码更有条理，请在项目根目录下新建一个名为components 的目录。在该目录下新建一个名为Task.js的文件，内容如下：

接下来，利用index.js中新创建的组件来显示任务：

1. 我们使用 ReactuseState()钩子为任务创建状态。
2. 我们在任务数组中填充了一些虚拟数据。
3. 我们使用 MUI 组件和任务组件来显示任务（如果还没有任何任务，则会显示一条消息）。

运行开发服务器：

$ npm run dev

导航至http://localhost:3000，你会看到任务列表：

接下来，让我们创建一个用于添加任务的页面。

在页面目录下新建一个名为add.js的文件：

这段代码将显示一个简单的表单，允许用户添加新任务。

重新启动服务器并导航至/add，或点击屏幕右上方的 “添加任务 “按钮。您应该会看到类似下面的内容：

很好，我们的用户界面现在已经完成。下一步，我们将实现实际的逻辑和状态。

国家管理

为了处理全局状态，我们将使用Zustand— 一个适用于 React 应用程序的小型、快速、可扩展的状态管理库。

首先通过 npm 安装：

$ npm install zustand

接下来，我们必须创建一个商店。

为了让我们的代码更有条理，让我们为全局状态创建一个名为store的专用文件夹。在该文件夹中创建一个名为storage.js的文件，内容如下：

1. Zustandcreate()创建商店。
2. 为了将状态保存到localStorage，我们使用了persistence()中间件。
3. tasks是一个包含用户任务的数组。
4. addTask、deleteTask 和markTaskAsDone是操作任务数组的方法。

最后，我们要做的是查看所有需要全局状态的页面和组件，并将其绑定。

首先导航到index.js，然后像这样更改：

不要忘记在文件顶部添加导入：

import useGlobalStore from "@/store/storage";

接下来，导航至components/Task.js，然后像这样更改：

最后，导航至pages/add.js，让handleSubmit()提交任务：

同样，不要忘记进口：

import useGlobalStore from "@/store/storage";

很好，我们的网络应用程序现在使用 Zustand 处理全局存储，并通过localStorage 进行持久化。请随时重新运行应用程序，确保一切正常。

Dockerize 应用程序

以下步骤需要安装 Docker。安装 Docker 的最简单方法是下载Docker Desktop。

确认 Docker 正在运行：

$ docker --version

Docker version 20.10.22, build 3a2c30b

配置 Next.js

首先，转到next.config.js，像这样将输出设置为"独立"：

更改此设置将在下一次构建时创建一个独立版本的 Next.js 应用程序。独立应用程序无需安装node_modules即可部署。独立版本还内置了网络服务器。

Dockerfile

我们将使用Dockerfile 来实现应用程序的 docker 化。Dockerfile是一个纯文本文件，允许我们定义基础镜像、环境、环境变量、命令、网络设置、卷等等。

在项目根目录下创建一个 Dockerfile，内容如下：

此Dockerfile利用了多阶段构建的优势。多阶段构建让我们可以大大减小镜像大小，更快地构建镜像。我们创建了以下三个阶段：

1. 依赖项阶段会复制依赖项文件并安装依赖项。
2. 构建器阶段通过npm 复制依赖项并构建项目。
3. 运行阶段复制单机版构建，并通过单机版服务器提供服务。

最后，我们暴露了 Back4app Containers 用来映射应用程序的端口。

有关在 Next.js 中使用 Docker 的更多信息，请查看with-docker软件源。

.dockerignore

在 Docker 构建镜像之前，它会查找.dockerignore文件。通过.dockerignore文件，我们可以定义哪些文件不希望包含在镜像中。这可以大大减小镜像文件的大小。它的作用与.gitignore 文件类似。

在项目根目录下创建一个.dockerignore文件，内容如下：

请确保添加了您想排除的其他目录或文件。

构建并运行映像

接下来，让我们构建并标记我们的 Docker 镜像：

$ docker build -t nextjs-todo:1.0 .

如果你列出了你的图片，你应该会看到新的图片：

$ docker images

REPOSITORY        TAG       IMAGE ID       CREATED       SIZE
nextjs-todo       1.0       7bce66230eb1   2 hours ago   160MB

最后，使用镜像启动一个新的 Docker 容器：

$ docker run -it -p 3000:3000 -d nextjs-todo:1.0

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

你可以使用-d以分离模式启动 Docker 容器。这意味着容器在终端后台运行，不接收输入也不显示输出。

做得好，你的应用程序现在正在容器中运行！导航至http://localhost:3000，你就能看到你的 TODO 应用程序了。

GitHub

要将应用程序部署到 Back4app Containers，您必须将源代码上传到 GitHub 仓库。在 GitHub 上创建一个新仓库，添加远程代码，添加.gitignore 并提交代码。代码上传到 GitHub 后，进入下一步。

如果你只是想测试 Back4appContainers，请随意 forkback4app-containers-nextjsrepo 并部署它。

将应用程序部署到 Back4app 容器中

以下步骤需要您拥有 Back4app 帐户。如果您已经拥有该帐户，请登录，否则请注册免费帐户。

要使用 Back4app，我们首先需要创建一个应用程序。登录仪表板后，您将看到应用程序列表。点击 “创建新应用程序 “创建新应用程序。

接下来，选择 “容器即服务”。

如果还没有，请将您的 GitHub 连接到 Back4app 并导入您要部署的软件源。连接 GitHub 后，您的软件源将显示在表格中。

点击 “Select（选择）”，选择要部署的版本库。

接下来，Back4app 会要求你配置环境。选择一个应用程序名称，我选择nextjs-todo。其他一切都保持默认即可。

最后，点击 “创建应用程序”，自动创建应用程序并进行部署。

然后，您将被重定向到应用程序详细信息，在那里您可以看到部署日志。

等待几分钟，应用程序就会部署完成！您的应用程序现已在 Back4app Containers 上运行。要查看应用程序的运行情况，请单击左侧显示的绿色 URL。

结论

在这篇文章中，我们解释了什么是 Docker、它的好处以及如何将它集成到工作流程中。现在，您应该已经能够在Back4app 容器中编写、dockerize 和部署自己的 Next.js 应用程序了。

最终源代码可从back4app-containers-nextjsGitHub 代码库中获取。

常见问题