透過 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。

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

接下來，我們將逐步說明如何從 Firebase Hosting 網址存取這個 HTTPS 函式，讓函式為 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. 在 functions 目錄中執行下列指令，即可在本機專案中安裝 Express.js：

    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 計數傳回為 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);

如要進一步瞭解如何搭配使用 Firebase、Express 應用程式和中介軟體模組，請參閱 Cloud Functions 說明文件。

後續步驟