使用 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": {
      "functionId": "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 應用和中間件模組結合使用的更多資訊。

下一步