转到控制台

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

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

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

如需查看与 Firebase 托管集成的 Cloud Functions 的用例和示例,请访问我们的无服务器概览

将 Cloud Functions 与 Firebase 托管关联

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

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

第 1 步:设置 Cloud Functions

  1. 请确保:

    • 您安装了最新版本的 Firebase CLI(运行 npm install -g firebase-tools)。

    • 您已初始化 Firebase 托管。

    有关如何安装 CLI 和初始化托管的详细说明,请参阅托管入门指南

  2. 如果您已设置 Cloud Functions,可以继续执行第 2 步:创建 HTTP 函数

  3. 如果您尚未设置 Cloud Functions,请执行以下操作:

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

      firebase init functions
    2. 出现提示时,选择 JavaScript(本演示示例使用 JS)。

    3. 确保您的本地项目目录中包含 functions 目录。适用于 Cloud Functions 的代码位于此 functions 目录下。

第 2 步:为您的托管网站创建 HTTP 函数

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

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

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

    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 deploy

    现在,您可以在以下网址访问该函数:
    https://us-central1-projectID.cloudfunctions.net/bigben

访问 Cloud Functions 文档,详细了解 HTTP 请求。

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

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

通过重写规则,您可以将与特定模式匹配的请求定向到单个目标。例如,要定向您的托管网站上的页面 /bigben 收到的所有请求以执行 bigben 函数,请执行以下操作:

  1. 打开您的 firebase.json 文件

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

    "hosting": {
     // ...
    
     // Add the "rewrites" attribute within "hosting"
     "rewrites": [ {
       "source": "/bigben",
       "function": "bigben"
     } ]
    }
    
  3. 再次运行 firebase deploy 命令。

    现在,可以通过以下网址访问您的函数:

    • 您的 Firebase 子网域:projectID.web.app/bigbenprojectID.firebaseapp.com/bigben

    • 任何已关联的自定义网域custom-domain/bigben

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

使用 Web 框架

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

以下部分提供了一个将 Express.js 与 Firebase 托管和 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 下将 BONG 计数以 JSON 格式作为 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 应用作为 HTTP 函数导出:

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

在本地测试

您可以使用 Firebase CLI 在本地提供和运行 HTTP 函数,这样就能在将 Firebase 项目部署到生产环境之前先行查看并测试该项目。

  1. 确保 Firebase CLI 和 firebase-functions SDK 均为可用的最新版本。要更新二者,请在本地项目的 functions 目录中运行以下两个命令:

    npm install -g firebase-tools
    npm install --save firebase-functions@latest
  2. 通过从项目目录的根目录下运行以下命令,在本地提供您的 Firebase 项目。

    此命令会在本地托管的网址中模拟托管行为和函数。

    firebase serve
如果您使用 Cloud Functions 生成用于 Firebase 托管的动态内容,那么默认情况下,firebase serve 会使用您的本地 HTTP 函数作为托管代理。如需了解 Firebase 托管和 Cloud Functions 的更多配置选项,请参阅 Firebase CLI 参考

后续步骤