部署 Deployment

部署在 Node.js 服务器上，为静态托管和无服务器或边缘环境预渲染。

Nuxt 应用程序可以部署在 Node.js 服务器上，为静态托管预渲染，或者部署到无服务器或边缘 (CDN) 环境。

如果您正在寻找支持 Nuxt 3 的云提供商列表，请参阅下面的列表。

Node.js 服务器

使用 Nitro 发现 Node.js 服务器预设以部署在任何节点托管上。

  • 默认输出格式如果没有指定或自动检测
  • 仅加载所需的块以呈现最佳冷启动时间的请求
  • 用于将 Nuxt 应用程序部署到任何 Node.js 托管

入口点

当使用 Node 服务器预设运行 nuxt build 时，结果将是一个启动准备运行的 Node 服务器的入口点。

bash
node .output/server/index.mjs

示例

bash
$ node .output/server/index.mjs
Listening on http://localhost:3000

在运行时配置默认值

此预设将遵循以下运行时环境变量：

  • NITRO_PORT 或 PORT(默认为 3000)
  • NITRO_HOST 或 HOST(默认为 '0.0.0.0')
  • NITRO_SSL_CERT 和 NITRO_SSL_KEY - 如果两者都存在，这将以 HTTPS 模式启动服务器。 在绝大多数情况下，这不应该用于测试以外的用途，并且 Nitro 服务器应该在终止 SSL 的反向代理(如 nginx 或 Cloudflare)后面运行。

使用PM2

要使用 pm2，请使用 ecosystem.config.js：

ecosystem.config.js
js
module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      port: '3000',
      exec_mode: 'cluster',
      instances: 'max',
      script: './.output/server/index.mjs'
    }
  ]
}

使用集群模式

您可以使用 NITRO_PRESET=node_cluster 以利用 Node.js 集群 模块的多进程性能。

默认情况下，工作负载通过循环策略分配给工作人员。

了解更多

相关阅读：节点服务器预设的 Nitro 文档

静态主机

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

  • 使用 ssr: true 的静态站点生成 (SSG) 在构建时预呈现应用程序的路由。 (这是运行 nuxi generate 时的默认行为。)它还会生成 /200.html 和 /404.html 单页应用回退页面，可以在客户端呈现动态路由或 404 错误( 尽管您可能需要在静态主机上配置它)。
  • 或者，您可以使用 ssr: false(静态单页应用程序)预呈现您的网站。 这将生成带有空 <div id="__nuxt"></div> 的 HTML 页面，您的 Vue 应用程序通常会在其中呈现。 您将失去预呈现网站的许多好处，因此建议改用“”来包装网站中无法通过服务器呈现的部分(如果有)。

基于抓取的预渲染

使用 nuxi generate 命令 构建您的应用程序。 对于每个页面，Nuxt 使用爬虫生成相应的 HTML 和有效负载文件。 构建的文件将在 .output/public 目录中生成。

bash
npx nuxi generate

手动预渲染

您可以手动指定 Nitro 将在构建期间获取和预渲染的路由。

nuxt.config.ts|js
ts
defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/user/1', '/user/2']
    }
  }
})

仅客户端渲染

如果您不想预渲染您的路由，另一种使用静态托管的方法是在 nuxt.config 文件中将 ssr 属性设置为 false。 然后，nuxi generate 命令将输出一个 .output/public/index.html 入口点和 JavaScript 包，就像经典的客户端 Vue.js 应用程序一样。

nuxt.config.ts|js
ts
defineNuxtConfig({
  ssr: false
})

预设

除了 Node.js 服务器和静态托管服务之外，Nuxt 3 项目还可以通过几个经过良好测试的预设和最少的配置进行部署。

您可以在 nuxt.config 文件中明确设置所需的预设：

nuxt.config.js|ts
js
export default {
  nitro: {
    preset: 'node-server'
  }
}

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

bash
NITRO_PRESET=node-server nuxt build

🔎 检查 Nitro 部署 以获取所有可能的部署预设和提供程序。

支持的托管服务提供商

Nuxt 3 可以通过最少的配置部署到多个云提供商：

CDN Proxy

在大多数情况下，Nuxt 可以使用非 Nuxt 本身生成或创建的第三方内容。 但有时此类内容会导致问题，尤其是 Cloudflare 的“缩小和安全选项”。

因此，您应该确保在 Cloudflare 中未选中/禁用以下选项。 否则，不必要的重新渲染或混合错误可能会影响您的生产应用程序。

  1. 速度 >优化>自动缩小：取消勾选JavaScript、CSS和HTML
  2. 速度 >优化>禁用“Rocket Loader™”
  3. 速度 >优化>禁用“幻影”
  4. Scrape Shield > 禁用“电子邮件地址混淆”
  5. Scrape Shield > 禁用“服务器端排除”

通过这些设置，您可以确保 Cloudflare 不会将脚本注入您的 Nuxt 应用程序，这可能会导致不必要的副作用。

上一篇
层结构 Layers
下一篇
Testing 测试