透過 Cloud Functions 提供動態內容和託管微服務

將「Cloud Functions」與「Firebase Hosting」配對，即可產生及提供 動態內容或建構 REST API 做為微服務

Cloud Functions for Firebase 可讓您自動依據 HTTPS 要求執行後端程式碼。您的程式碼會儲存在 Google 的雲端 會在代管環境中運作您不需要自行管理和調度資源 伺服器

如需 Cloud Functions 與 Firebase Hosting 整合的用途範例和範例，請參閱無伺服器總覽。

將 Cloud Functions 連結至 Firebase Hosting

本節提供逐步操作範例，說明如何將函式連結至 Firebase Hosting。

請注意，為了提高提供動態內容的成效， 視需要調整快取設定。

步驟 1：設定 Cloud Functions

  1. 請確認您使用的是最新版的 Firebase CLI，且已初始化 Firebase Hosting。

    如需安裝 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：為 Hosting 網站建立並測試 HTTPS 函式

  1. 使用您偏好的編輯器開啟「/functions/index.js」。

  2. 將檔案內容替換成以下程式碼。

    這段程式碼會建立 HTTPS 函式 (名為 bigben)，用來回應 HTTPS 要求，並在一天中的每個小時傳送 BONG，就像時鐘一樣。

    const functions = require('firebase-functions/v1');

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 傳回的本機網址存取函式，例如 http://localhost:5001/PROJECT_ID/us-central1/bigben。

請參閱 Cloud Functions 說明文件 ，進一步瞭解 HTTPS 要求。

下一個步驟會逐步引導您在 Firebase Hosting 網址，藉此為 Firebase 代管的網站。

步驟 3：將 HTTPS 要求導向您的函式

您可以使用重寫規則，將符合特定模式的請求導向至單一目的地。下列步驟顯示 以及如何在 Hosting 上導向來自 ../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 傳回網站的本機代管網址 (通常是 localhost:5000)，但在網址後面加上 bigben，例如： http://localhost:5000/bigben

  4. 針對網站的函式和功能進行疊代。使用 用來測試這些疊代的 Firebase 模擬器。

為獲得最佳效能，請將函式與 Hosting 並置 請選擇下列其中一個地區：

  • us-west1
  • us-central1
  • us-east1
  • europe-west1
  • asia-east1
，瞭解如何調查及移除這項存取權。

請造訪 Hosting 設定頁面，進一步瞭解重寫規則的詳細資料。你可以 還可以查看 回應的優先順序 適用於各種 Hosting 設定。

請注意，為了提高提供動態內容的成效， 視需要調整快取設定。

步驟 4：部署函式

讓函式在模擬器中正常運作後，即可繼續 使用「實際」專案資源部署、測試及執行應用程式。這是 建議將執行階段選項設為 控管資源調度行為 適用於在實際工作環境中執行的函式

  1. 將函式、Hosting 內容和設定部署至您的 從本機專案的根目錄執行下列指令 目錄：

    firebase deploy --only functions,hosting

  2. 請透過下列網址存取您的實際網站和函式：

    • 您的 Firebase 子網域：
      「PROJECT_ID.web.app/bigben」和 PROJECT_ID.firebaseapp.com/bigben

    • 任何已連結的自訂網域：
      CUSTOM_DOMAIN/bigben

，瞭解如何調查及移除這項存取權。

使用網路架構

您可以在 Cloud Functions 中使用 Express.js 等網頁架構，為應用程式提供動態內容，並更輕鬆地編寫複雜的網頁應用程式。

以下章節將提供 Express.js 與 Firebase Hosting 和 Cloud Functions 搭配使用的逐步操作說明範例。

  1. 執行下列指令，在本機專案中安裝 Express.js 從 functions 目錄：

    npm install express --save

  2. 開啟 /functions/index.js 檔案，然後匯入並初始化 Express.js：

    const functions = require('firebase-functions/v1');
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 下以 JSON 格式傳回 BONG 計數值：

      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 應用程式和中介軟體模組搭配使用。

後續步驟