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

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

Cloud Functions for Firebase 可讓您自動執行後端程式碼，以回應 HTTPS 要求。您的程式碼會儲存在 Google 的雲端服務中，並且會在代管環境中執行。您不必管理及擴充自己的伺服器。

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

將 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說明文件。

下一個步驟將說明如何透過 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. 另一個端點則會以 JSON 格式，在 /api 下方傳回 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說明文件。

後續步驟