Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

使用 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. 检查您的本地项目目录(由您刚刚运行的 Firebase 命令创建)中是否包含 functions 目录。适用于 Cloud Functions 的代码位于此 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 网址访问此 HTTPS 函数,以便它为 Firebase 托管的网站生成动态内容。

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

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

  1. 打开您的 firebase.json 文件

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

    "hosting": {
      // ...
    
      // Add the "rewrites" attribute within "hosting"
      "rewrites": [ {
        "source": "/bigben",
        "function": "bigben"
      } ]
    }
    
  3. 使用 Firebase 模拟器再次测试,确认您的重定向按预期方式执行。

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

      firebase emulators:start
    2. 访问 CLI 返回的您网站的本地托管网址(通常为 localhost:5000),但在网址后面附加 bigben,如下所示:http://localhost:5000/bigben

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

如需详细了解重写规则,请访问 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 框架

您可以在 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');
    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 应用和中间件模块结合使用。

后续步骤