获取我们在 Firebase 峰会上发布的所有信息,了解 Firebase 可如何帮助您加快应用开发速度并满怀信心地运行应用。了解详情

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

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

将 Cloud Functions 与 Firebase 托管配对,以生成和提供动态内容或将 REST API 构建为微服务。

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

有关与 Firebase 托管集成的 Cloud Functions 的用例和示例,请访问我们的无服务器概述

将 Cloud Functions 连接到 Firebase 托管

本部分提供了将函数连接到 Firebase 托管的演练示例。

请注意,为了提高提供动态内容的性能,您可以选择调整缓存设置

第 1 步:设置云功能

  1. 确保您拥有最新版本的 Firebase CLI 并且您已初始化 Firebase 托管。

    有关安装 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 步:为您的托管站点创建和测试 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 返回的本地 URL 访问该函数,例如: http://localhost:5001/ PROJECT_ID /us-central1/bigben

访问Cloud Functions 文档以了解有关 HTTPS 请求的更多信息。

下一步将引导您了解如何从 Firebase 托管 URL访问此 HTTPS 功能,以便它可以为您的 Firebase 托管网站生成动态内容。

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

使用重写规则,您可以将匹配特定模式的请求定向到单个目标。以下步骤向您展示如何引导来自主机站点上路径../bigben的所有请求以执行bigben功能。

  1. 打开你的firebase.json文件

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

    "hosting": {
      // ...
    
      // Add the "rewrites" attribute within "hosting"
      "rewrites": [ {
        "source": "/bigben",
        "function": "bigben",
        "region": "us-central1"  // optional (see note below)
      } ]
    }
    
  3. 通过使用 Firebase 模拟器再次测试,确认您的重定向按预期工作。

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

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

  4. 迭代您的功能及其对您网站的功能。使用 Firebase 模拟器来测试这些迭代。

有关重写规则的更多详细信息,请访问托管配置页面。您还可以了解各种托管配置的响应优先顺序

请注意,为了提高提供动态内容的性能,您可以选择调整缓存设置

第 4 步:部署您的功能

一旦您的功能在模拟器中按需要运行,您就可以继续使用真实的项目资源来部署、测试和运行它。这是考虑设置运行时选项以控制生产中运行的函数的缩放行为的好时机。

  1. 通过从本地项目目录的根目录运行以下命令,将您的功能以及托管内容和配置部署到您的站点:

    firebase deploy --only functions,hosting
  2. 通过以下 URL 访问您的实时站点和您的功能:

    • 您的 Firebase 子域:
      PROJECT_ID .web.app/bigbenPROJECT_ID .firebaseapp.com/bigben

    • 任何连接的自定义域
      CUSTOM_DOMAIN /bigben

使用网络框架

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

以下部分提供了将 Express.js 与 Firebase 托管和云函数一起使用的演练示例。

  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. 另一个端点以 JSON 格式将BONG计数作为 API 返回/api

      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 应用和中间件模块结合使用的更多信息。

下一步