Firebase

Firebase 函数

要使用更新且推荐的 Firebase 函数版本，请将 firebase.gen 选项设置为 2

export default defineNuxtConfig({
  nitro: {
    firebase: {
      gen: 2
    }
  }
})

如果您已经部署了网站版本，并且想要升级到第二代，请查看 Firebase 文档中的迁移过程。 特别是，CLI 会要求您删除现有函数，然后再部署新函数。

项目设置

您可能更喜欢使用 Firebase CLI 设置您的项目，它将为您获取项目 ID，添加所需的依赖项（见上文），甚至可以通过 GitHub Actions 设置自动部署（仅适用于托管）。了解如何安装 Firebase CLI。

1. 安装最新版本的 Firebase CLI。
   终端

   npm install -g firebase-tools@latest
   

2. 初始化您的 Firebase 项目
   终端

   firebase login
   firebase init hosting
   

完成后，将以下内容添加到您的 firebase.json 以启用 Cloud Functions 中的服务器端渲染

{
  "functions": { "source": ".output/server" },
  "hosting": [
    {
      "site": "<your_project_id>",
      "public": ".output/public",
      "cleanUrls": true,
      "rewrites": [{ "source": "**", "function": "server" }]
    }
  ]
}

本地预览

如果您需要在不部署的情况下测试内容，可以预览您网站的本地版本。

npm run build -- --preset=firebase
firebase emulators:start

构建和部署

通过运行 Nitro 构建，然后运行 firebase deploy 命令，部署到 Firebase Hosting。

npm run build -- --preset=firebase
firebase deploy

选项

您可以在 nuxt.config.ts 文件中设置 firebase 函数的选项

export default defineNuxtConfig({
  nitro: {
    firebase: {
      gen: 2,
      httpsOptions: {
        region: 'europe-west1',
        maxInstances: 3,
      },
    },
  },
});

运行时 Node.js 版本

您可以在配置中设置自定义的 Node.js 版本

export default defineNuxtConfig({
  nitro: {
    firebase: {
      nodeVersion: '18' // Can be '16' or '18' or '20'
    },
  },
});

Firebase 工具使用 package.json 中的 engines.node 版本来确定您的函数使用哪个 Node 版本。 Nuxt 会使用配置的 Node.js 版本自动写入 .output/server/package.json。

您可能还需要向 firebase.json 文件添加一个 runtime 键

{
  "functions": {
    "source": ".output/server",
    "runtime": "nodejs20"
  }
}

如果您的 firebase 项目有其他云函数

您可能会收到警告，当您部署 Nuxt 项目时，其他云函数将被删除。 这是因为 nitro 会将您的整个项目部署到 firebase 函数。如果您只想部署您的 Nuxt 项目，您可以使用 --only 标志

firebase deploy --only functions:server,hosting

在生产环境中使用 Cookie

当 Firebase Hosting 与 Cloud Functions 或 Cloud Run 一起使用时，Cookie 通常会从传入请求中剥离，以实现高效的 CDN 缓存行为。只有特别命名的 __session Cookie 才能传递到您的应用程序。

使用环境变量

要为您的 Firebase 函数设置环境变量，您需要将 .env 文件复制到 .output/server 目录。您可以通过向 package.json 添加一个 postbuild 脚本来实现，该脚本将在构建命令之后自动运行

{
  "scripts": {
    "postbuild": "cp .env .output/server/.env"
  }
}