使用 Cloud Functions 提供动态内容和托管微服务

将 Cloud Functions 与 Firebase Hosting 搭配使用，可生成并提供动态内容，或者构建 REST API 作为微服务。

借助 Cloud Functions for Firebase，您可以在响应 HTTPS 请求时自动运行后端代码。您的代码存储在 Google 的云端，并在代管式环境中运行。您无需管理和扩缩自己的服务器。

如需查看与 Firebase Hosting 集成的 Cloud Functions 的使用场景和示例，请访问我们的无服务器概览。

将 Cloud Functions 连接到 Firebase Hosting

本部分提供了一个将函数与 Firebase Hosting 关联的分步演示示例。

请注意，为改善提供动态内容时的性能，您可以选择调整缓存设置。

第 1 步：设置 Cloud Functions

  1. 确保您安装了最新版本的 Firebase CLI 并已初始化 Firebase Hosting。

    如需详细了解如何安装 CLI 和初始化 Hosting，请参阅 Hosting 入门指南。

  2. 确保您已设置 Cloud Functions：

    • 如果您已设置 Cloud Functions，则可以继续执行第 2 步：创建和测试 HTTPS 函数。

    • 如果您尚未设置 Cloud Functions，请执行以下操作：

      1. 在项目的根目录中运行下列命令，以初始化 Cloud Functions：

        firebase init functions

      2. 出现提示时，选择 JavaScript（本演示示例使用 JS）。

      3. 检查您的本地项目目录中是否包含 functions 目录（由您刚刚运行的 Firebase 命令创建）。适用于 Cloud Functions 的代码位于此 functions 目录下。

第 2 步：为您的 Hosting 网站创建和测试 HTTPS 函数

  1. 在您惯用的编辑器中打开 /functions/index.js。

  2. 将文件的内容替换为以下代码。

    这些代码会创建一个 HTTPS 函数（名为 bigben），该函数每天每小时以 BONG 回复 HTTPS 请求，就像时钟一样。

    const functions = require('firebase-functions/v1');

exports.bigben = functions.https.onRequest((req, res) => {
  const hours = (new Date().getHours() % 12) + 1  // London is UTC + 1hr;
  res.status(200).send(`<!doctype html>
    <head>
      <title>Time</title>
    </head>
    <body>
      ${'BONG '.repeat(hours)}
    </body>
  </html>`);
});

  3. 使用 Firebase Local Emulator Suite 在本地测试您的函数。

    1. 从本地项目的根目录中，运行以下命令：

      firebase emulators:start

    2. 通过 CLI 返回的本地网址（例如 http://localhost:5001/PROJECT_ID/us-central1/bigben）访问函数。

如需详细了解 HTTPS 请求，请参阅 Cloud Functions 文档。

下一步向您介绍如何通过 Firebase Hosting 网址访问此 HTTPS 函数，以便它为 Firebase 托管的网站生成动态内容。

第 3 步：将 HTTPS 请求定向到您的函数

通过重写规则，您可以将与特定模式匹配的请求定向到单个目标。以下步骤展示了如何定向来自您 Hosting 网站上 ../bigben 路径的所有请求以执行 bigben 函数。

  1. 打开您的 firebase.json 文件。

  2. 在 hosting 部分下添加以下 rewrite 配置：

    "hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/bigben",
    "function": {
      "functionId": "bigben",
      "region": "us-central1"  // optional (see note below)
      "pinTag": true           // optional (see note below)
    }
  } ]
}

  3. 使用 Firebase 模拟器再次测试，确认您的重定向按预期方式执行。

    1. 从本地项目的根目录中，运行以下命令：

      firebase emulators:start

    2. 访问 CLI 返回的您网站的本地托管网址（通常为 localhost:5000），但在网址后面附加 bigben（例如 http://localhost:5000/bigben）

  4. 对函数及其针对网站的功能进行迭代。使用 Firebase 模拟器测试这些迭代。

为获得最佳性能，请选择以下某个区域，将您的函数与 Hosting 共置到该区域：

  • us-west1
  • us-central1
  • us-east1
  • europe-west1
  • asia-east1

如需详细了解重写规则，请访问 Hosting 配置页面。您还可以了解各种 Hosting 配置的响应的优先级顺序。

请注意，为改善提供动态内容时的性能，您可以选择调整缓存设置。

第 4 步：部署函数

如果函数在模拟器中是按预期方式执行的，您就可以继续使用实际项目资源来部署、测试和运行函数了。现在应考虑设置运行时选项，以便为生产环境中运行的函数控制扩缩行为。

  1. 从本地项目的根目录运行以下命令，将您的函数以及 Hosting 内容和配置部署到您的网站：

    firebase deploy --only functions,hosting

  2. 通过以下网址访问您的实际网站和函数：

    • 您的 Firebase 子网域：
      PROJECT_ID.web.app/bigben 和 PROJECT_ID.firebaseapp.com/bigben

    • 任何关联的自定义网域：
      CUSTOM_DOMAIN/bigben

使用 Web 框架

您可以在 Cloud Functions 中使用 Express.js 等 Web 框架，以便更轻松地提供应用的动态内容和编写复杂的 Web 应用。

以下部分提供了一个将 Express.js 与 Firebase Hosting 和 Cloud Functions 搭配使用的分步演示示例。

  1. 在 functions 目录中运行以下命令，在您的本地项目中安装 Express.js：

    npm install express --save

  2. 打开 /functions/index.js 文件，然后导入并初始化 Express.js：

    const functions = require('firebase-functions/v1');
const express = require('express');
const app = express();

  3. 添加以下两个端点：

    1. 添加第一个端点，以便在 / 处提供网站索引。

      app.get('/', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.send(`
    <!doctype html>
    <head>
      <title>Time</title>
      <link rel="stylesheet" href="/style.css">
      <script src="/script.js"></script>
    </head>
    <body>
      <p>In London, the clock strikes:
        <span id="bongs">${'BONG '.repeat(hours)}</span></p>
      <button onClick="refresh(this)">Refresh</button>
    </body>
  </html>`);
});

    2. 添加另一个端点作为 API，以便在 /api 下将 BONG 计数以 JSON 格式返回：

      app.get('/api', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.json({bongs: 'BONG '.repeat(hours)});
});

  4. 将 Express.js 应用作为 HTTPS 函数导出：

    exports.app = functions.https.onRequest(app);

  5. 在您的 firebase.json 文件中，将所有请求定向至 app 函数。此重写允许 Express.js 处理我们配置的不同子路径（在本示例中为 / 和 /api）。

    {
 "hosting": {
   // ...

   // Add the "rewrites" attribute within "hosting"
   "rewrites": [ {
     "source": "**",
     "function": "app"
   } ]
 }
}

添加中间件

继续我们的示例，现在您正在使用 Express.js，可以按常规方式添加 Express.js 中间件。例如，您可以在我们的端点上启用 CORS 请求。

  1. 运行以下命令，安装 cors 中间件：

    npm install --save cors

  2. 打开 /functions/index.js 文件，然后将 cors 添加到 Express.js 应用中，如下所示：

    const cors = require('cors')({origin: true});
app.use(cors);

如需详细了解如何将 Firebase 与 Express 应用和中间件模块结合使用，请参阅 Cloud Functions 文档。

后续步骤