Deployment

Nuxt 应用可以部署在 Node.js 服务器上、预渲染为静态托管，或部署到 serverless 或边缘（CDN）环境。

Node.js 服务器（Node.js Server）

借助 Nitro 的 Node.js server preset 发现如何部署到任何 Node 托管。

• 如果未指定或自动检测，则为默认输出格式
  
• 仅加载渲染请求所需的 chunk，以获得最佳的冷启动时间
  
• 适用于将 Nuxt 应用部署到任何 Node.js 托管

入口点（Entry Point）

当使用 Node server preset 运行 nuxt build 时，结果会是一个用于启动可运行 Node 服务器的入口点。

NODE_ENV=production 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',
      env: {
        NODE_ENV: 'production',
      },
    },
  ],
}

集群模式（Cluster Mode）

你可以使用 NITRO_PRESET=node_cluster 来利用 Node.js cluster 模块实现多进程性能。

默认情况下，工作负载会通过 round robin（轮询）策略分发给各个 worker。

了解更多（Learn More）

静态托管（Static Hosting）

有两种方式可以将 Nuxt 应用部署到任何静态托管服务：

• 使用 ssr: true 的静态站点生成（SSG）会在构建时预渲染应用的路由。（这是运行 nuxt generate 时的默认行为。）它还会生成 /200.html 和 /404.html 单页应用回退页面，可以在客户端渲染动态路由或 404 错误（不过你可能需要在静态主机上对此进行配置）。请参阅 什么是 200.html 和 404.html？。
• 或者，你可以使用 ssr: false（静态单页应用）预渲染你的站点。这将生成带有空 <div id="__nuxt"></div> 的 HTML 页面，你的 Vue 应用本应渲染在那里。你将失去预渲染站点的许多 SEO 优势，因此建议改用 <ClientOnly> 来包裹你站点中无法被服务端渲染的部分（如果有的话）。

预渲染的路由还会输出 _payload.json 文件，其中包含构建时捕获的数据，Nuxt 会在客户端导航期间复用它们。阅读更多关于 payload 提取 的内容。

静态回退页面（Static Fallback Pages）

Nuxt 可以为静态主机生成两个回退页面：

• 200.html 是单页应用回退页面。当你希望客户端路由处理 URL 时，配置你的主机为未匹配的路由提供它。
• 404.html 是未找到回退页面。配置你的主机为应当保留 404 状态的路由提供它。

nuxt generate 和 nuxt build --prerender 会自动生成这些文件。如果你使用 nuxt build 配合 route rules 来预渲染选定的路由，请显式添加回退页面：

export default defineNuxtConfig({
  routeRules: {
    '/200.html': { prerender: true },
  },
})

某些提供商使用 200.html，某些使用 404.html，某些允许你同时配置两者。部署后请查看你的托管提供商的静态回退或重写设置。

仅客户端渲染（Client-side Only Rendering）

如果你不想预渲染你的路由，使用静态托管的另一种方式是将 nuxt.config 文件中的 ssr 属性设为 false。nuxt generate 命令随后会输出一个 .output/public/index.html 入口点以及 JavaScript bundle，就像一个经典的客户端 Vue.js 应用。

export default defineNuxtConfig({
  ssr: false,
})

托管提供商（Hosting Providers）

Nuxt 只需最少的配置即可部署到多个云提供商：

Presets

除了 Node.js 服务器和静态托管服务，Nuxt 项目还可以通过多个经过充分测试的 preset 以及最少的配置进行部署。

你可以在 nuxt.config.ts 文件中显式设置所需的 preset：

// @errors: 2353
export default defineNuxtConfig({
  nitro: {
    preset: 'node-server',
  },
})

...或者在运行 nuxt build 时使用 NITRO_PRESET 环境变量：

NITRO_PRESET=node-server nuxt build

🔎 查看 Nitro 部署文档 获取所有可能的部署 preset 和提供商。

CDN 代理（CDN Proxy）

在大多数情况下，Nuxt 可以处理不是由 Nuxt 自身生成或创建的第三方内容。但有时这类内容会引发问题，尤其是 Cloudflare 的「Minification and Security Options（压缩与安全选项）」。

因此，你应该确保在 Cloudflare 中取消勾选/禁用以下选项。否则，不必要的重新渲染或 hydration 错误可能会影响你的生产应用。

1. Speed > Settings > Content Optimization > 禁用「Rocket Loader™」
2. Security > Settings > 禁用「Email Address Obfuscation」

使用这些设置，你可以确保 Cloudflare 不会向你的 Nuxt 应用注入可能导致不良副作用的脚本。