NextJS 的独立部署

NextJS 的独立部署

如何以独立方式部署 NextJS 应用程序

由 Fernando van Loenhout 为 Competa IT 撰写。

独立部署是在 NextJS 12.2 中部署 NextJS 应用程序的一种新方式。此模式具有旧部署方法的一些优点，即它具有减小的 node_modules 文件夹大小，并将静态文件与动态文件分开以供可选的 CDN 托管。

配置

这种输出模式可以通过修改你的 NextJS 配置文件来激活（ next.config.js ) 并添加以下内容：

 …  
 /** @type {import('next').NextConfig} */  
 模块.exports = {  
 …  
 输出：'独立'，  
 }

请注意，这种工作方式需要sharp包，您需要通过安装它 npm 安装尖锐 ，否则一旦部署网站，图像将无法正常工作。

完成此操作后，您可以构建应用程序： npm 运行构建

输出

观察 .next 文件夹中的以下文件：

仔细观察表明，与以前的版本相比，独立文件夹是新添加的。让我们打开这个文件夹，看看里面有什么：

这基本上是一个缩小尺寸的 NextJS 服务器，它只包含它的动态部分。观察表明 node_modules 仅占项目 node_modules 的 5% 左右，这在尺寸上是显着减小的（在我们有限的测试中）

静态文件

如果您尝试使用 node 运行 server.js，您将看到服务器启动。但是，您会看到它显示了您网站的损坏版本，并且控制台显示了一些 404 错误。这是因为独立服务器只提供动态部分。

要解决此问题，请创建一个空的新目录，然后执行以下步骤

1. 将项目中的 public 复制到新文件夹中的 public
2. 将项目中的 .next/static 复制到新文件夹中的 .next/static
3. 将 .next/standalone 复制到新文件夹的根目录中

请注意，如果您在 NextJS 之前使用 NGINX，您还可以将其配置为从前 2 个步骤提供静态文件，以提高性能。

在您的新文件夹中打开一个终端，然后运行 ​​node server.js，这将启动一个服务器，该服务器以最小的占用空间为您的应用程序提供服务。这样做的好处是，如果您使用 docker 进行构建，最终的 docker 容器现在要小得多。 可以在 NextJS 的官方存储库中看到在 docker 中进行此设置的示例 .

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38262/15122111