部署 Nuxt 应用

除了代码检查和格式化之外，应用程序部署也是 Web 开发工作流程的一部分。我们需要将我们的应用程序部署到远程的某个服务器或主机上，以便公众可以公开访问该应用程序。Nuxt 自带我们可以用来部署应用程序的内置命令。它们如下：

  • nuxt

  • nuxt build

  • nuxt start

  • nuxt generate

你现在已经熟悉在终端上使用 nuxt 命令：

$ npm run dev

如果你打开使用 create-nuxt-app 脚手架工具安装项目时 Nuxt 生成的 package.json 文件，你可以看到这些命令已预先配置在 "scripts" 代码段中，如下所示：

// package.json
"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

你可以使用以下 Node.js 命令行在终端上启动该命令：

$ npm run <命令>

nuxt 命令用于在 localhost:3000 的开发服务器上进行热重载开发，而其他命令则用于生产部署。让我们在下一节中看看如何使用它们来部署你的 Nuxt 应用程序。

你也可以将 --help 等常用参数与任何这些命令一起使用。如果你想了解更多信息，请访问 https://nuxtjs.org/guide/commandslist-of-commands。

部署 Nuxt 通用服务端渲染应用

我们希望通过学习前面的所有章节，你已经知道你一直在开发 Nuxt 通用服务器端渲染 (SSR) 应用程序。SSR 应用程序是一种在服务器端渲染应用程序内容的应用程序。这种应用程序需要特定的服务器来运行你的应用程序，例如 Node.js 和 Apache 服务器，而像你一直在使用 Nuxt 创建的通用 SSR 应用程序则在服务器端和客户端都运行。这种应用程序也需要特定的服务器。一个 Nuxt 通用 SSR 应用程序只需在终端上使用两个命令即可部署。让我们看看你如何在以下步骤中完成它：

  1. 通过 npm 启动 nuxt build 命令，使用 webpack 构建应用程序并缩小 JavaScript 和 CSS：

    $ npm run build

    你应该得到以下构建结果：

    > [你的应用名称]@[你的应用名称] start /var/path/to/你的应用
> nuxt build
ℹ 生产构建
ℹ 为服务器端和客户端打包
ℹ 目标：server
✓ 构建器已初始化
✓ Nuxt 文件已生成
...
...

  2. 通过 npm 启动 nuxt start 命令，在生产模式下启动服务器：

    $ npm run start

    你应该得到以下启动状态：

    > [你的应用名称]@[你的应用名称] start /var/path/to/你的应用
> nuxt start
Nuxt.js @ v2.14.0
> 环境：production
> 渲染：server-side
> 目标：server
内存使用：28.8 MB (RSS: 88.6 MB)

部署一个 Nuxt 通用 SSR 应用程序只需要这两行命令。这简直是小菜一碟，不是吗？但是，如果你没有 Node.js 服务器来托管你的应用程序，或者出于任何原因你只想将你的应用程序部署为静态站点，你可以从 Nuxt 通用 SSR 应用程序生成它。让我们在下一节中了解如何实现这一点。

部署 Nuxt 静态生成（预渲染）应用

要从 Nuxt 通用 SSR 应用程序生成 Nuxt 静态生成的应用程序，我们将使用我们在前面章节中为此练习创建的示例网站。你可以在我们的 GitHub 仓库中的 /chapter-14/deployment/sample-website/ 中找到此示例。让我们开始执行以下步骤：

  1. 确保你的 package.json 文件中包含以下 "generate" 运行脚本：

    "scripts": {
  "generate": "nuxt generate"
}

  2. 将 Nuxt 配置文件中的 target 项目更改为 static：

    // nuxt.config.js
export default {
  target: 'static'
}

  3. 通过配置 Nuxt 配置文件的 generate 选项来生成 404 页面：

    // nuxt.config.js
export default {
  generate: {
    fallback: true
  }
}

    Nuxt 不会生成你的自定义 404 页面，也不会生成其默认页面。如果想在你的静态应用程序中包含此页面，可以在配置文件中的 generate 选项中设置 fallback: true。

  4. 通过 npm 启动 nuxt generate 命令来构建应用程序并为每个路由生成一个 HTML 文件：

    $ npm run generate

    Nuxt 有一个爬虫，它可以扫描链接并自动为你生成动态路由及其异步内容（使用 asyncData 和 fetch 方法渲染的数据）。因此，你应该获得应用程序的每个路由，如下所示：

    ℹ Generating output directory: dist/
ℹ Generating pages with full static mode
✓ Generated route "/contact"
✓ Generated route "/work-nested"
✓ Generated route "/about"
✓ Generated route "/work"
✓ Generated route "/"
✓ Generated route "/work-nested/work-sample-4"
✓ Generated route "/work-nested/work-sample-1"
✓ Generated route "/work-nested/work-sample-3"
✓ Generated route "/work-nested/work-sample-2"
✓ Generated route "/work/work-sample-1"
✓ Generated route "/work/work-sample-4"
✓ Generated route "/work/work-sample-2"
✓ Generated route "/work/work-sample-3"
✓ Client-side fallback created: 404.html
i Ready to run nuxt serve or deploy dist/ directory

    请注意，对于爬虫无法检测到的路由，你仍然需要使用 generate.routes。

  5. 如果你查看项目根目录，你应该会找到一个 Nuxt 生成的 /dist/ 文件夹，其中包含将应用程序部署到静态托管服务器所需的一切。但在那之前，你可以通过终端上的 nuxt serve 命令从 /dist/ 目录测试你的生产静态应用程序：

    $ npm run start

    你应该在终端上看到以下输出：

    Nuxt.js @ v2.14.0> Environment: production
Nuxt.js @ v2.14.0> Rendering: server-side
Nuxt.js @ v2.14.0> Target: static
Listening: http://localhost:3000/
ℹ Serving static application from dist/

  6. 现在你可以将浏览器指向 localhost:3000，你会看到该应用程序就像 SSR 一样运行，但实际上它是一个静态生成的应用程序。

我们将在下一章回到此配置，以部署 Nuxt 单页应用程序 (SPA)。你可以看到，进行这种类型的部署只需要做少量的工作，而且完全值得，因为“静态”部署你的应用程序有很多好处，例如，你可以将你的静态文件托管在静态托管服务器上，这比 Node.js 服务器相对便宜。我们将在下一章向你展示如何在像 GitHub Pages 这样的服务器上提供你的静态站点。尽管 “静态” 部署 Nuxt 通用 SSR 应用程序有很多好处，但你必须考虑到以下注意事项：

  • 提供给 asyncData 和 fetch 方法的 Nuxt 上下文将丢失来自 Node.js 的 HTTP req 和 res 对象。

  • nuxtServerInit action 在 store 中将不可用。

因此，如果你的 Nuxt 应用程序严重依赖上述列表中的这些项，那么将你的 Nuxt 通用 SSR 应用程序生成为静态文件可能不是一个好主意，因为它们是服务器端功能。但是，我们可以使用客户端 cookie 在客户端模拟 nuxtServerInit action，我们也会在下一章中向你展示。但现在，让我们继续下一节，了解你可以选择哪些类型的托管服务器来托管你的 Nuxt 应用程序。

如果你想了解更多关于 generate 属性/选项以及你可以使用此属性配置的其他选项（例如 fallback 和 routes 选项），请访问 https://nuxtjs.org/api/configuration-generate。

在虚拟专用服务器上托管 Nuxt 通用 SSR 应用

在托管 Node.js 应用程序时，虚拟专用服务器 (VPS) 和专用服务器是更好的选择，因为你将完全自由地为你的应用程序设置 Node.js 环境。并且每当 Node.js 发布新版本时，你也应该更新你的环境。只有使用 VPS 服务器，你才能随时根据需要升级和调整你的环境。

如果你正在寻找 Linux 服务器并希望从头开始安装所需的基础设施，那么像 Linode 或 Vultr 这样的 VPS 提供商会提供价格合理的 VPS 托管服务。这些 VPS 提供商为你提供的是一个安装了你偏好的 Linux 发行版（例如 Ubuntu）的空虚拟机。构建满足你需求的基础设施的过程与你在本地机器上全新安装 Linux 发行版后安装 Node.js、MongoDB、MySQL 等的过程相同。有关这些 VPS 提供商的更多信息，请访问以下链接：

在你拥有满足你需求的 Node.js 环境和基础设施之后，你可以将你的 Nuxt 应用程序上传到这类主机，然后通过这些托管提供商提供的安全外壳 (SSH) 功能在终端上非常轻松地构建和启动应用程序：

$ npm run build
$ npm run start

那么共享主机服务器呢？让我们在下一节中看看你有哪些选择。

在共享主机服务器上托管 Nuxt 通用 SSR 应用

请记住，并非所有主机都对 Node.js 友好，与 PHP 的共享主机服务器相比，Node.js 的共享主机服务器相对较少。但所有共享主机服务器都是一样的——你通常能做的受到严格限制，而且你必须遵守提供商设定的严格规则。你可以查看以下共享主机服务器提供商：

在共享主机服务器上，例如 Reclaim Hosting，你很可能无法运行 Nuxt 命令来启动你的应用程序。相反，你需要向服务器提供一个应用程序启动文件，该文件必须命名为 app.js 并放置在你的项目根目录中。

如果你想选择 Reclaim Hosting，你可以使用他们的测试环境 https://stateu.org/ 来了解它的工作方式。但请记住，高级设置是不可能的。好消息是，Nuxt 提供了一个 Node.js 模块 nuxt-start，可以在这样的共享主机服务器上以生产模式启动 Nuxt 应用程序。让我们在以下步骤中了解如何操作：

  1. 通过 npm 在本地安装 nuxt-start：

    $ npm i nuxt-start

  2. 在你的项目根目录中创建一个 app.js 文件，其中包含以下代码以启动 Nuxt 应用程序：

    // app.js
const { Nuxt } = require('nuxt-start')
const config = require('./nuxt.config.js')
const nuxt = new Nuxt(config)
const { host, port } = nuxt.options.server
nuxt.listen(port, host)

    或者，你可以使用 Express 或 Koa 来启动你的 Nuxt 应用程序。以下示例假设你正在使用 Express：

    // app.js
const express = require('express')
const { Nuxt } = require('nuxt')
const app = express()
let config = require('./nuxt.config.js')
const nuxt = new Nuxt(config)
const { host, port } = nuxt.options.server
app.use(nuxt.render)
app.listen(port, host)

    在这段代码中，我们导入了 express 和 nuxt 模块以及 nuxt.config.js 文件，然后将 Nuxt 应用程序用作中间件。如果你使用的是 Koa，情况也是一样的——你只需要将 Nuxt 用作中间件。

  3. 将包含此 app.js 文件的 Nuxt 应用程序上传到服务器，并按照主机的说明通过 npm 安装应用程序依赖项，然后运行 app.js 来启动你的应用程序。

这就是你需要做的全部工作。这些共享主机服务器存在一些限制。在这些服务器上，你对 Node.js 环境的控制较少。但是，如果你遵循服务器提供商设定的严格规则，你可以让你的通用 SSR Nuxt 应用程序启动并运行。

你可以在我们的 GitHub 仓库中的 /chapter-14/deployment/shared-hosting/reclaimhosting.com/ 中找到上述示例代码和其他代码，用于在 Reclaim Hosting 上托管 Nuxt 通用 SSR 应用程序。

有关 nuxt-start 的更多信息，请访问 https://www.npmjs.com/package/nuxt-start。

你可以看到它并不完美，并且存在局限性，但如果你正在寻找共享主机，这是合理的。如果这对你来说并不理想，那么最后一个选择是选择静态站点托管服务器，我们将在下一节中看到。

在静态站点托管服务器上托管 Nuxt 静态生成应用

使用此选项，你将不得不放弃 Nuxt 的服务器端功能。但好消息是，有很多流行的主机可以托管静态生成的 Nuxt 应用程序，你几乎可以在任何在线主机上快速地提供它。让我们在以下步骤中了解如何操作：

  1. 在 Nuxt 配置文件中将服务器目标更改为 static，如下所示：

    // nuxt.config.js
export default {
  target: 'static'
}

  2. 通过 npm 在本地启动 nuxt generate 命令，为你的 Nuxt 应用程序生成静态文件：

    $ npm run generate

  3. 将 Nuxt 生成的 /dist/ 文件夹中的所有内容上传到主机。

以下列表详细介绍了你可以选择的主机。所有这些主机的部署过程在 Nuxt 网站上都有详细记录。你应该查看 Nuxt 常见问题解答 https://nuxtjs.org/faq 以查看部署示例，并了解如何将静态生成的 Nuxt 应用程序部署到以下任何特定主机：

我们将在下一章指导你完成在 GitHub Pages 上部署 Nuxt SPA 应用程序的过程。但现在，本章关于格式化、代码检查和部署 Nuxt 通用 SSR 应用程序的内容到此结束。让我们总结一下你在本章中学到的内容。