减小 Next.js 应用的 Docker 镜像大小

介绍

首先，我假设您知道 Docker 是什么，但如果您不知道：

Docker 是一个用于开发、交付和运行应用程序的开放平台。

你可以花时间了解它。

另一方面，NextJS 是一个灵活的 React 框架，它提供了构建模块，可用于创建快速的 Web 应用程序。

另一方面，NextJS 是一个灵活的 React 框架，它提供了构建模块，可用于创建快速的 Web 应用程序。

将您的应用程序容器化

在进行任何优化之前，我们必须先将应用程序容器化。假设我们的应用程序名称是my-space。从以下代码开始：

创建Dockerfile：

touch Dockerfile

忽略以下位置的不必要文件dockerignore：

node_modules
.next
.vscode
.gitignore
README.md
.dockerignore
.git

将其容器化：

这是应用容器化的最基本示例，现在让我们用以下命令构建它：

docker build -t my-space .

现在看看尺寸：

这也太夸张了吧，居然要2.42GB
！！

难以置信吧，我们无法发布这张图片，它太大了！

减小图像尺寸

使用高山

Node.js Docker 团队维护着一个node:alpine镜像标签及其变体，用于将特定版本的 Alpine Linux 发行版与 Node.js 运行时环境相匹配。原始版本的大小约为 1GB。

现在我们来看高山版本：

现在文件大小缩小到了1.65GB，少了800MB。这真是一个好的开始！

多阶段构建

对于任何努力优化 Dockerfile 并使其易于阅读和维护的人来说，多阶段构建都非常有用。

我们将创建两个阶段Dockerfile。我将其称为“builder和”。runner

这样我们就可以去除图像中不必要的文件：

我们将从该文件中选取文件builder，并将其移动到runner我们最终要使用的文件目录中：

*文件大小降至 1.36GB，减少了约 300MB，我们做得很好！
*

移除重复图层

您可以看到存在重复安装的情况。是的，我们为每个阶段都安装了两次依赖项。虽然这样做可以正常工作，项目大小也保持不变，但由于缓存和图层的存在，图像大小仍然很大。

node_modules因此，我们可以从构建阶段选择：

对于一个 NextJS 应用来说，现在的大小相当不错，不到 500MB。

但我们仍然可以让它更轻！

输出文件跟踪

在构建过程中，Next.js它会自动跟踪每个页面及其依赖项，以确定部署应用程序生产版本所需的所有文件。

此功能有助于大幅减小部署包的大小。以前，使用 Docker 部署时，需要安装软件包依赖项中的所有文件才能运行next start。从 Next.js 12 开始，您可以利用.next/目录中的输出文件跟踪功能，仅包含必要的文件。

在您的next.config.js文件中，启用独立输出

experimental: {
    outputStandalone: true,
  },

这将创建一个文件夹，.next/standalone然后可以单独部署该文件夹而无需安装node_modules。

*文件大小现在只有 176MB！对于大多数情况来说足够小了
！

结论

这只是一个简单的优化 Docker 镜像大小的示例，您可以深入研究 Docker 文档，找到最适合您应用程序的处理方法！