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

搭配使用 Cloud Functions 和 Firebase 託管，即可產生及提供 動態內容或建構 REST API 做為微服務

Cloud Functions for Firebase 回應 HTTPS 要求您的程式碼會儲存在 Google 的雲端 會在代管環境中運作您不需要自行管理和調度資源 伺服器

針對與 Cloud Functions 整合的 Cloud Functions 應用實例和範例 Firebase 託管，請造訪我們的 無伺服器總覽。

將 Cloud Functions 連結至 Firebase 託管

本節提供將函式連線至 Firebase 託管。

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

步驟 1：設定 Cloud Functions

  1. 確認您的 Firebase CLI 是最新版本，且 初始化 Firebase 託管。

    如需安裝 CLI 和初始化的詳細操作說明 託管，請參閱 代管入門指南。

  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 的 HTTPS 函式 (名為 bigben) 要求，一天內每小時包含 BONG，就像時鐘一樣。

    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 本機模擬器套件。

    1. 在本機專案的根目錄中，執行下列指令 指令：

      firebase emulators:start

    2. 透過 CLI 傳回的本機網址存取函式， 範例： http://localhost:5001/PROJECT_ID/us-central1/bigben。

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

下一個步驟會逐步引導您在 Firebase 託管網址，這樣系統才能為 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 傳回網站的本機代管網址 (通常是 localhost:5000)，但在網址後面加上 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. 透過下列網址存取您的線上網站和功能：

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

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

使用網路架構

您可以使用網路架構，例如 Express.js，在 Cloud Functions 中執行以下操作 提供應用程式動態內容，以及編寫複雜的網頁應用程式。

下一節提供在 Firebase 託管和 Cloud Functions。

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

    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 中：

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

後續步驟