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

Cloud FunctionsFirebase Hosting 配对,以生成并提供您的 动态内容或构建 REST API 作为微服务。

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

例如,与以下产品集成的 Cloud Functions 的使用场景和示例: Firebase Hosting,请访问我们的 无服务器概览

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 命令创建)。这个 functions 目录是 Cloud Functions 的代码所在的目录。

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

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

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

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

    const functions = require('firebase-functions');
    
    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)访问函数。

访问 Cloud Functions 文档 详细了解 HTTPS 请求

下一步将向您介绍如何Firebase Hosting网址,以便为您的 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/bigbenPROJECT_ID.firebaseapp.com/bigben

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

使用 Web 框架

您可以使用 Web 框架,例如 Express.js,从 Cloud Functions 更改为 从而更轻松地提供应用的动态内容和编写复杂的 Web 应用。

以下部分提供了一个将 Express.js 与 Firebase HostingCloud Functions

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

    npm install express --save
  2. 打开 /functions/index.js 文件,然后导入并初始化 Express.js:

    const functions = require('firebase-functions');
    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);
    

访问 Cloud Functions 文档 详细了解如何将 Firebase 与 Express 应用和中间件模块搭配使用。

后续步骤