如何使用单个命令在 Firebase 上托管 Nuxt.js 应用程序

介绍

结论

介绍

我希望复制一个在欧洲很流行的著名网站，在这个网站上人们与其他人分享他们发现的交易，以此来省钱（如果有人好奇的话，它是pepper.com（我并不是把它作为广告或其他什么））。

因此，我给自己设定了一个任务——学习 Nuxt.js，因为它是一个服务器端渲染 (SSR) 框架，它使用 Vue.js 封装了一个 Node.js 服务器，并渲染出可以被谷歌爬虫抓取的内容，以便在搜索巨头上进行索引和列出。

您可以在以下位置查看演示：

https://dealas-962d3.firebaseapp.com/

您可以在以下位置找到完整的存储库：

https://github.com/slushnys/dealas

我完成申请时面临的挑战

• 了解 SSR 的生命周期以及如何将数据注入页面以进行呈现和索引。
• 了解firebase功能。
• 了解如何将代码和功能托管到 Google Firebase 上的云端。

我学到了什么

异步数据

尽管在 nuxt.js 的文档（https://nuxtjs.org/guide/async-data）中非常清楚地说明了此方法是在渲染组件之前检索某些资源的数据。

this此外，根据文档，在那个时候您无权访问该方法：


You do不是have access of the component instance through这个inside asyncData because it is called before initiating the component.


我从惨痛经历中学到的另一件事是，用于检索信息的 asyncData 方法仅在page渲染时调用，而不是在常规组件中调用，在常规组件中您可能会尝试使用来自 api 的数据填充选择框。

Firebase 函数

对于这部分，你需要在全局 npm 包下安装 firebase，

npm i -g firebase-tools

之后不要忘记登录到 firebase

firebase login

我以前用python语言运行过 Google Cloud Functions，但从未学习如何在 Google Cloud Platform 中按需运行 JavaScript 函数。这种情况即将改变，因为我决心要实现网站部署自动化，这样就无需手动完成所有工作了。

// functions/index.js

const functions = require("firebase-functions");
const { Nuxt } = require("nuxt-start");

const nuxtConfig = require("./nuxt.config.js");

const config = {
  ...nuxtConfig,
  dev: false,
  debug: false,
  buildDir: ".nuxt",
  publicPath: "public"
};

const nuxt = new Nuxt(config);

let isReady = false;

async function handleRequest(req, res) {
  if (!isReady) {
    try {
      isReady = await nuxt.ready();
    } catch (error) {
      process.exit(1);
    }
  }
  await nuxt.render(req, res);
}

exports.ssrapp = functions.https.onRequest(handleRequest);

您可能会想，nuxt-start在 index.js 文件开头看到的包是什么？嗯，它是一个可以消除开销的包，可让您在生产中启动该包而无需太多依赖项。

最重要的是，我们不想渲染未完成的页面，因此在我们的请求处理程序函数中，handleRequest我们等待 nuxt 是否已准备就绪，并且仅在准备就绪时渲染完整的页面。

导出 ssrapp 对于我们的应用程序在云端运行至关重要，因为每个请求都将由handleRequest分配给我们的 google 函数onRequest事件监听器的函数处理。

但是等等...当 ssrapp 函数在云端时，谁会调用它，而谷歌云函数何时知道要调用哪个函数？

Firebase 配置

在本节中，我将讨论将 nuxt 部署到云端的学习要点，就我而言，这也是我最大的痛点，导致我的应用程序无法正常工作。首先，让我们看一下我的./firebase.json配置文件。

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "source": "functions",
    "predeploy": [
    "rm -rf functions/.nuxt && npm --prefix src run build && mkdir -p functions/.nuxt/dist && cp -r src/.nuxt/dist/ functions/.nuxt/dist && cp src/nuxt.config.js functions/"
    ]
  },
  "hosting": {
    "predeploy": [
      "rm -rf public/* && mkdir -p public/nuxt && cp -r functions/.nuxt/dist/client/ public/nuxt && cp -a src/static/. public/"
    ],
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "ssrapp"
      }
    ]
  }
}

这里有针对不同服务的不同配置，正如您从这本字典的键中看到的那样，它包括 - firestore、functions 和 hosting。

Firestore键的值包含您可以为 Firestore 实时数据库设置的规则。这应该包含您的配置，以禁止用户出于恶意目的读取您的数据库。

函数键的值包含 predeploy 命令，这正是我遇到的最大麻烦，因为我之前从其他教程中借鉴了这个配置，并尝试将其应用到我的用例中。这导致我的应用程序在部署时崩溃，并且无法正确渲染。

托管密钥的值包括预部署脚本，该脚本获取文件并将其上传到 Firebase 托管，并将源函数重写为我们在 index.js 文件中定义的函数ssrapp。

我部署失败的原因：其实很简单，但我花了很长时间才弄清楚。我将nuxt.config.jsbuildDir 的默认值 .nuxt/ 覆盖为../nuxt/。这导致我在构建一些第三方库（尤其是 Vuetify）时出错。我真心希望这能为那些想在 Firebase 上部署网站的人节省时间。

在我最终部署我的应用程序后，我还没有花太多时间来弄清楚为什么使用 nuxt 的自定义构建目录进行部署没有成功，因此我不会考虑这个问题。

结论

创建 Nuxt.js Web 应用程序是一次有趣的经历，它是一款功能强大的工具，几乎可以满足任何开发需求，从小型网站到更大型、更高效的应用程序发布到生产环境。Firebase 还提供了非常灵活的实时数据库事件，您的应用程序可以在特定操作发生时按需监听。

你在尝试使用 Nuxt 或 Firebase 时遇到了哪些挑战？请在评论区留言告诉我。

奖金

我已经尝试过 TypeScript，因此我重构了存储库，使其拥有 nuxt 的 TypeScript 实现和新的 Vue 3 Composition-API，并将其包含在ikelti.vue文件中，如果有人有兴趣了解它们如何集成，我会继续接收一些反馈。