如何最小化部署Next.js非静态应用？

7uhlpewt 于 2023-05-28 发布在其他

关注(0)|答案(1)|浏览(174)

Next.JS文档和其他教程描述如何部署非静态应用程序（即一个你用npm run start运行的）似乎在应用程序中留下了很多不必要的东西。他们说只要运行npm run build，然后运行npm run start，恭喜，你就完成了！
这对我来说很奇怪，因为当Webpack等其他系统创建可部署版本时，它要小得多。minimal我的意思是它不包含

node_modules中的devDependencies
未缩小的源文件（我的是TypeScript）
其他杂七杂八的东西，比如React Storybook故事，等等。

在我的例子中，这些额外的东西加起来有几百兆字节。
我得到了一个部分解，看起来像这样：
1.运行npm run build
1.创建一个新文件夹，并将node_modules、.next、static、package.json和其他一些东西复制到其中

cd添加到新文件夹，然后运行npm prune --production删除dev依赖项
这基本上是可行的，但我并不完全满意。首先，node_modules仍然包含许多不需要的东西。在Webpack产品中，由于树抖动，这些内容将被忽略。另一方面，我有几个其他应用程序特定的文件夹，我必须记住复制。
为什么这么难？有没有更好的办法？

next.js

来源：https://stackoverflow.com/questions/59782255/how-can-i-make-a-minimal-deployment-of-a-next-js-non-static-app

1条答案

按热度按时间

f1tvaqid1#

更新

在nextjs@13.x.x中，独立输出变得稳定（https：//nextjs.org/docs/app/api-reference/next-config-js/output#automatically-copying-traced-files），现在next.config.js将：

module.exports = {
  output: 'standalone',
};

版本12的旧答案

从next@12.x.x开始，您可以创建一个独立的构建，删除所有不必要的依赖项（包大小减少了70%-80%）。要使用它，您只需在next.config.js中设置它（如此处所述https：//nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files-experimental）

module.exports = {
  experimental: {
    outputStandalone: true,
  }
}

运行next build
这将在.next/standalone处创建一个文件夹
然后，必须使用在.next/standalone文件夹node .next/standalone/server.js中生成的server.js文件，而不是next start

Docker环境

如果你在docker环境中，你也应该复制static文件夹

...
COPY ./next.config.js ./
COPY ./public ./public
COPY ./package.json ./package.json
COPY --chown=nextjs:nodejs ./.next/standalone ./
COPY --chown=nextjs:nodejs /.next/static ./.next/static
....

EXPOSE 3000

CMD ["node", "server.js"]

赞(0）回复(0）举报 2023-05-28

我来回答

如何最小化部署Next.js非静态应用？

1条答案

更新

版本12的旧答案

Docker环境

相关问题

热门标签

最新问答