Check out what’s new from Firebase at Google I/O 2022. Learn more

使用 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"
  } ]
}

  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 託管和雲函數一起使用的演練示例。

  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 應用和中間件模塊結合使用的更多信息。

下一步