將 Cloud Functions 與 Firebase Hosting 配對,以產生和提供動態內容或將 REST API 建置為微服務。
Cloud Functions for Firebase可讓您自動執行後端程式碼以回應 HTTPS 請求。您的程式碼儲存在 Google 的雲端並在託管環境中運行。無需管理和擴展您自己的伺服器。
有關與 Firebase 託管整合的 Cloud Functions 的用例和範例,請造訪我們的無伺服器概述。
將雲端功能連接到 Firebase 託管
本部分提供了將函數連接到 Firebase 託管的演練範例。
請注意,為了提高提供動態內容的效能,您可以選擇調整快取設定。
步驟一:設定雲函數
確保您擁有最新版本的 Firebase CLI 並且已初始化 Firebase 託管。
有關安裝 CLI 和初始化 Hosting 的詳細說明,請參閱Hosting 入門指南。
確保您已設定 Cloud Functions:
如果您已設定 Cloud Functions,則可以繼續步驟 2:建立並測試 HTTPS 函數。
如果您尚未設定 Cloud Functions:
透過從專案目錄的根目錄執行以下命令來初始化 Cloud Functions:
firebase init functions
出現提示時,選擇 JavaScript(本演練範例使用 JS)。
檢查本機專案目錄中是否有一個
functions
目錄(由您剛剛執行的 Firebase 指令建立)。此functions
目錄是 Cloud Functions 程式碼所在的位置。
步驟 2:為您的託管網站建立並測試 HTTPS 功能
在您喜歡的編輯器中開啟
/functions/index.js
。將文件的內容替換為以下程式碼。
此程式碼建立一個 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>`); });
使用Firebase Local Emulator Suite在本地測試您的功能。
從本機專案目錄的根目錄中,執行以下命令:
firebase emulators:start
透過 CLI 傳回的本機 URL 存取函數,例如:
。http://localhost:5001/ PROJECT_ID /us-central1/bigben
請造訪Cloud Functions 文件以了解有關 HTTPS 請求的更多資訊。
下一步將引導您了解如何從 Firebase 託管 URL存取此 HTTPS 函數,以便它可以為您的 Firebase 託管網站產生動態內容。
步驟 3:將 HTTPS 請求定向到您的函數
透過重寫規則,您可以將與特定模式相符的請求定向到單一目標。以下步驟向您展示如何引導來自託管網站上的路徑../bigben
的所有請求來執行bigben
功能。
打開您的
firebase.json
檔案。在
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) } } ] }
透過使用 Firebase 模擬器再次測試,確認您的重定向按預期工作。
從本機專案目錄的根目錄中,執行以下命令:
firebase emulators:start
造訪 CLI 傳回的網站的本機託管 URL(通常
localhost:5000
),但在 URL 後面附加bigben
,如下所示:http://localhost:5000/bigben
迭代您的函數及其在您網站上的功能。使用 Firebase 模擬器來測試這些迭代。
如果
hosting.rewrites
配置的function
區塊中省略了region
,Firebase CLI 會嘗試從函數的原始程式碼自動偵測區域,如果未指定,則預設為us-central1
。如果函數的原始程式碼不可用,CLI 會嘗試從已部署的函數中偵測區域。如果函數位於多個區域,則 CLI 要求在hosting.rewrites
配置中指定region
。
pinTag
功能僅在 Cloud Functions for Firebase(第二代)中可用。透過此功能,您可以確保用於產生網站動態內容的每個功能與您的靜態託管資源和託管配置保持同步。此外,此功能還可讓您在託管預覽頻道上預覽函數的重寫。如果您將
"pinTag": true
新增至hosting.rewrites
配置的function
區塊中,那麼「固定」功能將與您的靜態託管資源和配置一起部署,即使在執行時也是如此。如果您回滾網站的某個版本,「固定」功能也會回滾。
firebase deploy --only hosting 此功能依賴Cloud Run 標籤,每個服務的標籤限制為 1000 個,每個區域的標籤限制為 2000 個。這意味著經過數百次部署後,網站的最舊版本可能會停止運作。
為了獲得最佳效能,請選擇以下區域之一,將您的功能與託管並置:
-
us-west1
-
us-central1
-
us-east1
-
europe-west1
-
asia-east1
有關重寫規則的更多詳細信息,請訪問託管配置頁面。您也可以了解各種託管配置的回應優先順序。
請注意,為了提高提供動態內容的效能,您可以選擇調整快取設定。
第 4 步:部署您的函數
一旦您的函數在模擬器中按預期工作,您就可以使用真實的專案資源繼續部署、測試和運行它。現在是考慮設定運行時選項來控制生產中運行的函數的擴展行為的好時機。
透過從本機專案目錄的根目錄執行以下命令,將您的函數以及託管內容和配置部署到您的網站:
firebase deploy --only functions,hosting
透過以下 URL 存取您的即時網站和功能:
您的 Firebase 子網域:
PROJECT_ID .web.app/bigben
和PROJECT_ID .firebaseapp.com/bigben
任何連接的自訂域:
CUSTOM_DOMAIN /bigben
使用網路框架
您可以在 Cloud Functions 中使用 Web 框架(例如Express.js )來提供應用程式的動態內容並更輕鬆地編寫複雜的 Web 應用程式。
以下部分提供了將 Express.js 與 Firebase 託管和 Cloud Functions 結合使用的演練範例。
透過從
functions
目錄執行以下命令,在本機專案中安裝 Express.js:npm install express --save
開啟
/functions/index.js
文件,然後導入並初始化 Express.js:const functions = require('firebase-functions'); const express = require('express'); const app = express();
新增以下兩個端點:
新增第一個端點以服務我們網站
/
的索引。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>`); });
另一個端點以 API 形式傳回
BONG
計數,採用 JSON 格式,位於/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)}); });
將 Express.js 應用程式匯出為 HTTPS 函數:
exports.app = functions.https.onRequest(app);
在
firebase.json
檔案中,將所有請求定向到app
程式函數。此重寫允許 Express.js 提供我們配置的不同子路徑(在本例中為/
和/api
)。{ "hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "**", "function": "app" } ] } }
新增中介軟體
繼續我們的範例,現在您正在使用 Express.js,您可以以典型方式新增Express.js 中間件。例如,您可以在我們的端點上啟用CORS請求。
透過執行以下命令安裝
cors
中間件:npm install --save cors
開啟
/functions/index.js
文件,然後將cors
新增至 Express.js 應用程式中,如下所示:const cors = require('cors')({origin: true}); app.use(cors);
請造訪Cloud Functions 文檔,以了解有關將 Firebase 與 Express 應用和中間件模組結合使用的更多資訊。
下一步
在全球 CDN 上為您的動態內容設定快取。
使用Firebase Admin SDK與其他 Firebase 服務互動。