部署
Nuxt 应用程序可以部署在 Node.js 服务器上,为静态托管预渲染,或部署到无服务器或边缘(CDN)环境。
Node.js 服务器
了解 Nitro 的 Node.js 服务器预设,以部署到任何 Node 托管。
- 如果没有指定或自动检测,则为默认输出格式
- 仅加载所需块以渲染请求,以实现最佳冷启动时间
- 适用于将 Nuxt 应用程序部署到任何 Node.js 托管
入口点
当使用 Node 服务器预设运行 nuxt build
时,结果将是一个启动即用型 Node 服务器的入口点。
node .output/server/index.mjs
这将启动您的生产 Nuxt 服务器,默认情况下在端口 3000 上监听。
它遵守以下运行时环境变量
NITRO_PORT
或PORT
(默认为3000
)NITRO_HOST
或HOST
(默认为'0.0.0.0'
)NITRO_SSL_CERT
和NITRO_SSL_KEY
- 如果两者都存在,这将以 HTTPS 模式启动服务器。在绝大多数情况下,除了测试之外,不应使用此功能,并且 Nitro 服务器应在像 nginx 或 Cloudflare 这样的反向代理后面运行,由其终止 SSL。
PM2
PM2(Process Manager 2)是用于在您的服务器或 VM 上托管 Nuxt 应用程序的快速简便的解决方案。
要使用 pm2
,请使用 ecosystem.config.cjs
module.exports = {
apps: [
{
name: 'NuxtAppName',
port: '3000',
exec_mode: 'cluster',
instances: 'max',
script: './.output/server/index.mjs',
},
],
}
集群模式
您可以使用 NITRO_PRESET=node_cluster
来利用 Node.js 的多进程性能集群模块。
默认情况下,工作负载以轮询策略分配给工作进程。
了解更多
静态托管
有两种方法可以将 Nuxt 应用程序部署到任何静态托管服务
- 使用
ssr: true
的静态站点生成 (SSG) 在构建时预渲染应用程序的路由。(这是运行nuxt generate
时的默认行为。)它还将生成/200.html
和/404.html
单页应用回退页面,这些页面可以在客户端渲染动态路由或 404 错误(尽管您可能需要在静态主机上配置此功能)。 - 或者,您可以使用
ssr: false
(静态单页应用)预渲染您的站点。这将生成带有空<div id="__nuxt"></div>
的 HTML 页面,您的 Vue 应用程序通常会在此处渲染。您将失去预渲染站点的许多 SEO 优势,因此建议您使用<ClientOnly>
来包装您站点中无法在服务器端渲染的部分(如果有)。
仅客户端渲染
如果您不想预渲染路由,另一种使用静态托管的方法是在 nuxt.config
文件中将 ssr
属性设置为 false
。然后,nuxt generate
命令将输出 .output/public/index.html
入口点和 JavaScript 包,就像经典的客户端 Vue.js 应用程序一样。
export default defineNuxtConfig({
ssr: false,
})
托管服务提供商
Nuxt 可以部署到多个云提供商,只需少量配置
预设
除了 Node.js 服务器和静态托管服务,Nuxt 项目还可以通过几个经过充分测试的预设和最少的配置进行部署。
您可以在 nuxt.config.ts
文件中显式设置所需的预设
export default defineNuxtConfig({
nitro: {
preset: 'node-server',
},
})
... 或者在运行 nuxt build
时使用 NITRO_PRESET
环境变量
NITRO_PRESET=node-server nuxt build
🔎 查看Nitro 部署以获取所有可能的部署预设和提供商。
CDN 代理
在大多数情况下,Nuxt 可以使用非 Nuxt 生成或创建的第三方内容。但有时此类内容可能会导致问题,尤其是 Cloudflare 的“缩小和安全选项”。
因此,您应该确保在 Cloudflare 中取消选中/禁用以下选项。否则,不必要的重新渲染或水合错误可能会影响您的生产应用程序。
- 速度 > 优化 > 内容优化 > 禁用“Rocket Loader™”
- 速度 > 优化 > 图像优化 > 禁用“Mirage”
- 抓取防护 > 禁用“电子邮件地址混淆”
通过这些设置,您可以确保 Cloudflare 不会将可能导致意外副作用的脚本注入您的 Nuxt 应用程序。