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

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

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

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

將雲功能連接到 Firebase 託管

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

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

步驟一：設置雲函數

  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)
    "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 模擬器來測試這些迭代。

為了獲得最佳性能，請選擇以下區域之一，將您的功能與託管並置：

  • us-west1
  • us-central1
  • us-east1
  • europe-west1
  • asia-east1

有關重寫規則的更多詳細信息，請訪問託管配置頁面。您還可以了解各種託管配置的響應優先級順序。

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

第 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 中使用 Web 框架（例如Express.js ）來提供應用程序的動態內容並更輕鬆地編寫複雜的 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 應用程序導出為 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 應用和中間件模塊結合使用的更多信息。

下一步