Catch up on highlights from Firebase at Google I/O 2023. Learn more

使用 Cloud Functions 提供動態內容和託管微服務

將 Cloud Functions 與 Firebase Hosting 配對以生成和提供您的動態內容或將 REST API 構建為微服務。

Cloud Functions for Firebase可讓您自動運行後端代碼以響應 HTTPS 請求。您的代碼存儲在 Google 的雲中，並在託管環境中運行。無需管理和擴展您自己的服務器。

有關與 Firebase 託管集成的 Cloud Functions 的示例用例和示例，請訪問我們的無服務器概述。

將雲功能連接到 Firebase 託管

本部分提供了一個將函數連接到 Firebase 託管的演練示例。

請注意，要提高提供動態內容的性能，您可以選擇調整緩存設置。

第 1 步：設置 Cloud Functions

  1. 確保您擁有最新版本的 Firebase CLI 並已初始化 Firebase 託管。

    有關安裝 CLI 和初始化託管的詳細說明，請參閱託管入門指南。

  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)
    "pinTag": true           // 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/bigben和PROJECT_ID .firebaseapp.com/bigben

    • 任何連接的自定義​​域：
      CUSTOM_DOMAIN /bigben

使用網絡框架

您可以在 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. 另一個端點以 JSON 格式在/api下將BONG計數作為 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 應用程序和中間件模塊結合使用的更多信息。

下一步