將 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": "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 服務交互。