【Nuxt3系列十五】部署

zapt
194 阅读3分钟

本文学习如何部署Nuxt程序到任何地方

一个 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）是一个快速且简单的解决方案，用于在服务器或虚拟机上托管你的 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 集群模块的多进程性能。 默认情况下，工作负载会通过轮询策略分配给各个工作进程。

静态托管

  1. 使用 ssr: true 的静态站点生成 (SSG)，在构建时预渲染应用的路由。（这是运行 nuxi generate 时的默认行为。）它还会生成 /200.html 和 /404.html 单页应用回退页面，可以在客户端渲染动态路由或 404 错误（尽管你可能需要在静态主机上进行配置）。
  2. 或者，你可以使用 ssr: false（静态单页应用）预渲染你的站点。这会产生带有空 <div id="__nuxt"></div> 的 HTML 页面，通常这里会渲染你的 Vue 应用。这样会导致失去许多预渲染带来的 SEO 好处，因此建议使用 <ClientOnly> 包裹那些不能服务器端渲染的部分（如果有）。

仅客户端渲染

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

export default defineNuxtConfig({
  ssr: false
})

云托管

详情可以看支持的厂商列表

预设

除了 Node.js 服务器和静态托管服务之外，Nuxt 项目还可以使用几个经过良好测试的预设进行部署，并且只需要少量的配置。 你可以在 nuxt.config.ts 文件中明确设置所需的预设：

export default defineNuxtConfig({
  nitro: {
    preset: 'node-server'
  }
})

或者使用环境变量

NITRO_PRESET=node-server nuxt build

CDN代理

在大多数情况下，Nuxt 可以与第三方内容协同工作，这些内容并非由 Nuxt 自身生成或创建。但有时这类内容可能会导致问题，特别是 Cloudflare 的“压缩和安全选项”。 因此，你应该确保在 Cloudflare 中禁用了以下选项。否则，不必要的重新渲染或水合错误可能会影响你的生产应用。

  • 速度 > 优化 > 内容优化 > 自动压缩：取消选中 JavaScript、CSS 和 HTML
  • 速度 > 优化 > 内容优化 > 禁用 “Rocket Loader™”
  • 速度 > 优化 > 图像优化 > 禁用 “Mirage”
  • Scrape Shield > 禁用 “电子邮件地址混淆”

通过这些设置，你可以确保 Cloudflare 不会在你的 Nuxt 应用中注入可能导致不希望的副作用的脚本。

avatar
文章
阅读
粉丝