部署
Nuxt 应用程序可以部署在 Node.js 服务器上、预渲染用于静态托管,或者部署到无服务器(Serverless)或边缘(Edge/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) 是一种在您的服务器或虚拟机上托管 Nuxt 应用程序的快捷简便解决方案。
要使用 pm2,请使用 ecosystem.config.cjs
module.exports = {
apps: [
{
name: 'NuxtAppName',
port: '3000',
exec_mode: 'cluster',
instances: 'max',
script: './.output/server/index.mjs',
},
],
}
集群模式 (Cluster Mode)
您可以使用 NITRO_PRESET=node_cluster 来利用 Node.js 的多进程性能。cluster模块。
默认情况下,工作负载会通过轮询(round robin)策略分发给各个工作进程。
了解更多
静态托管
有两种方法可以将 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 文件中明确设置所需的预设。
// @errors: 2353
export default defineNuxtConfig({
nitro: {
preset: 'node-server',
},
})
……或者在运行 nuxt build 时使用 NITRO_PRESET 环境变量。
NITRO_PRESET=node-server nuxt build
🔎 查看Nitro 部署获取所有可能的部署预设和提供商。
CDN 代理
在大多数情况下,Nuxt 可以与非 Nuxt 生成或创建的第三方内容协同工作。但有时这些内容会导致问题,尤其是 Cloudflare 的“Minification(压缩)和 Security(安全)选项”。
因此,您应确保在 Cloudflare 中取消勾选/禁用以下选项。否则,不必要的重新渲染或水合(hydration)错误可能会影响您的生产应用程序。
- Speed > Settings > Content Optimization > 禁用 "Rocket Loader™"
- Security > Settings > 禁用 "Email Address Obfuscation"
通过这些设置,您可以确保 Cloudflare 不会向您的 Nuxt 应用程序注入可能导致意外副作用的脚本。