部署 Docker 应用程序终极指南
Docker 彻底改变了软件的开发、测试和部署方式。它消除了软件部署中的许多常见问题,如兼容性问题以及开发环境和生产环境之间的环境差异。
在本文中,我们将探讨将 Docker 容器部署到生产环境的过程。我们将讨论容器、Docker、使用 Docker 的好处及其部署选项。最后,我们将演示如何构建、dockerize 和部署Next.js应用程序到Back4app 容器— 完全免费!
Contents
什么是集装箱?
容器是一个独立的可执行文件包,其中包含运行应用程序所需的一切。其中包括代码、运行时、库、环境变量和配置文件。容器的最大优点是可以部署到任何地方,而且体积小、速度快、效率高。
使用容器的好处
使用容器能让您的企业受益匪浅。它既能帮助开发人员,也能帮助 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 开发应用程序非常简单,容器可以部署到各种平台上。我们通常可以将它们分为以下几组:
- 传统托管
- 基础设施即服务(IaaS)
- 平台即服务(PaaS)
- 容器即服务(CaaS)
根据它们的抽象性,我们可以用金字塔图将它们形象化,就像这样:
让我们逐一分析。
Docker 和传统主机
正如你可能已经猜到的那样,Docker 容器可以很容易地部署到你自己的服务器上。要让 Docker 在你的服务器上运行,你必须
- 安装Docker 引擎
- 构建 Docker 映像(本地)或从容器注册表中提取。
- 使用映像来启动容器。
- 设置网络、卷、防火墙等。
如果希望进一步简化部署过程,可以使用Docker Compose。Docker Compose 允许您在单个文件中声明服务、网络和卷。此外,它还非常适合多容器 Docker 应用程序。
IaaS 上的 Docker
基础设施即服务(IaaS)是一种云计算服务模式,在虚拟化环境中提供服务器、网络、操作系统和存储等计算资源。这些云服务器通常通过高级应用程序接口(API)或高级仪表板提供给企业,让客户完全控制整个基础设施。
IaaS 上的 Docker 与使用自己的服务器并无太大区别。如果您选择这种方法,您必须遵循与传统托管类似的步骤。
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,在文件顶部添加以下导入:
用户界面
我们的网络应用程序将有以下两个页面:
/
将显示任务列表/add
将允许用户添加新任务
让我们从索引页开始。
为了使我们的代码更有条理,请在项目根目录下新建一个名为components 的目录。在该目录下新建一个名为Task.js的文件,内容如下:
接下来,利用index.js中新创建的组件来显示任务:
- 我们使用 React
useState()
钩子为任务创建状态。 - 我们在
任务
数组中填充了一些虚拟数据。 - 我们使用 MUI 组件和
任务
组件来显示任务(如果还没有任何任务,则会显示一条消息)。
运行开发服务器:
$ npm run dev
导航至http://localhost:3000,你会看到任务列表:
接下来,让我们创建一个用于添加任务的页面。
在页面目录下新建一个名为add.js的文件:
这段代码将显示一个简单的表单,允许用户添加新任务。
重新启动服务器并导航至/add
,或点击屏幕右上方的 “添加任务 “按钮。您应该会看到类似下面的内容:
很好,我们的用户界面现在已经完成。下一步,我们将实现实际的逻辑和状态。
国家管理
为了处理全局状态,我们将使用Zustand— 一个适用于 React 应用程序的小型、快速、可扩展的状态管理库。
首先通过 npm 安装:
$ npm install zustand
接下来,我们必须创建一个商店。
为了让我们的代码更有条理,让我们为全局状态创建一个名为store的专用文件夹。在该文件夹中创建一个名为storage.js的文件,内容如下:
- Zustand
create()
创建商店。 - 为了将状态保存到
localStorage
,我们使用了persistence()
中间件。 tasks
是一个包含用户任务的数组。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利用了多阶段构建的优势。多阶段构建让我们可以大大减小镜像大小,更快地构建镜像。我们创建了以下三个阶段:
依赖项
阶段会复制依赖项文件并安装依赖项。构建器
阶段通过npm
复制依赖项并构建项目。运行
阶段复制单机版构建,并通过单机版服务器提供服务。
最后,我们暴露了 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,我们首先需要创建一个应用程序。登录仪表板后,您将看到应用程序列表。点击 “创建新应用程序 “创建新应用程序。
接下来,选择 “容器即服务”。
如果还没有,请将您的 GitHub 连接到 Back4app 并导入您要部署的软件源。连接 GitHub 后,您的软件源将显示在表格中。
点击 “Select(选择)”,选择要部署的版本库。
接下来,Back4app 会要求你配置环境。选择一个应用程序名称,我选择nextjs-todo
。其他一切都保持默认即可。
最后,点击 “创建应用程序”,自动创建应用程序并进行部署。
然后,您将被重定向到应用程序详细信息,在那里您可以看到部署日志。
等待几分钟,应用程序就会部署完成!您的应用程序现已在 Back4app Containers 上运行。要查看应用程序的运行情况,请单击左侧显示的绿色 URL。
结论
在这篇文章中,我们解释了什么是 Docker、它的好处以及如何将它集成到工作流程中。现在,您应该已经能够在Back4app 容器中编写、dockerize 和部署自己的 Next.js 应用程序了。
最终源代码可从back4app-containers-nextjsGitHub 代码库中获取。
常见问题
什么是 Docker?
Docker 是一个基于 Linux 的开源工具,允许开发人员在轻量级容器中创建、部署和运行应用程序。
使用 Docker 有哪些好处?
除了容器化技术本身的所有优点外,Docker 还具有以下优势:
– 轻量级
– 版本控制
– 提高协作效率
– 可扩展性
Docker 的部署选项有哪些?
– IaaS(AWS、GCP、Azure)
– PaaS(Heroku、Google App Engine、Azure App Service)
– CaaS(Back4app Containers、AWS ECS、Azure ACI)
如何将 Docker 容器部署到 Back4app Containers?
1. 编写应用程序代码
2. 使用 Dockerfile 对应用程序进行容器化
3. 构建镜像并在本地测试
4. 将源代码推送到 GitHub
5. 将你的 GitHub 账户与 Back4app 账户连接
6. 选择代码库并进行部署