Catch up on everthing we announced at this year's Firebase Summit. Learn more

使用 Cloud Functions 提供動態內容和託管微服務

將 Cloud Functions 與 Firebase 託管配對以生成和提供動態內容或將 REST API 構建為微服務。

對於火力地堡雲功能可以自動運行在後台響應代碼HTTPS請求。您的代碼存儲在 Google 的雲中並在託管環境中運行。無需管理和擴展您自己的服務器。

例如使用情況和樣品與火力地堡主機集成雲功能,請訪問我們的無服務器的概述

將 Cloud Functions 連接到 Firebase 託管

本部分提供了將函數連接到 Firebase 託管的演練示例。

請注意,以提高動態內容服務,您可以根據需要調整你的性能緩存設置

第1步:建立雲功能

  1. 確保您擁有最新版本的 Firebase CLI 並且您已初始化 Firebase 託管。

    有關安裝CLI和初始化主機的詳細說明,請參閱使用入門指南託管

  2. 確保您已設置 Cloud Functions:

    • 如果您已經設置了雲功能,可以繼續進行第2步:創建並測試HTTPS功能

    • 如果你還沒有建立雲功能:

      1. 通過從項目目錄的根目錄運行以下命令來初始化 Cloud Functions:

        firebase init functions
      2. 出現提示時,選擇 JavaScript(本演練示例使用 JS)。

      3. 檢查是否有一個functions在您的本地項目目錄目錄(您剛剛運行的火力地堡命令創建)。此functions目錄是雲功能的代碼存在。

第2步:創建並測試HTTPS功能,為您的託管網站

  1. 打開/functions/index.js在你喜歡的編輯器。

  2. 用以下代碼替換文件的內容。

    此代碼創建一個HTTPS功能(名為bigben ),其答复與HTTPS請求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. 本地測試使用的功能火力地堡本地模擬器套房

    1. 從本地項目目錄的根目錄,運行以下命令:

      firebase emulators:start
    2. :通過由CLI返回的本地URL,例如訪問功能http://localhost:5001/ PROJECT_ID /us-central1/bigben

訪問雲計算功能的文檔,以了解更多有關HTTPS請求。

下一步將引導您如何從火力地堡主機URL訪問此HTTPS功能,以便它可以為您的火力地堡主辦的網站動態內容。

第3步:直接HTTPS請求的功能

隨著重寫規則,您可以直接匹配特定的模式,單個目標的請求。下列步驟顯示了如何直接從路徑的所有請求../bigben您託管網站執行bigben功能。

  1. 打開firebase.json文件

  2. 添加以下rewrite下的配置hosting部分:

    "hosting": {
      // ...
    
      // Add the "rewrites" attribute within "hosting"
      "rewrites": [ {
        "source": "/bigben",
        "function": "bigben"
      } ]
    }
    
  3. 通過使用 Firebase 模擬器再次測試,確認您的重定向按預期工作。

    1. 從本地項目目錄的根目錄,運行以下命令:

      firebase emulators:start
    2. 訪問您網站的本地託管的URL由CLI返回的(通常是localhost:5000 ),但將網址bigben ,像這樣: http://localhost:5000/bigben

  4. 為您的網站迭代您的函數及其功能。使用 Firebase 模擬器來測試這些迭代。

訪問主機配置頁有關重寫規則的詳細信息。您還可以了解的響應優先順序為各種虛擬主機配置。

請注意,以提高動態內容服務,您可以根據需要調整你的性能緩存設置

第4步:部署您的功能

一旦你的功能是在模擬器工作根據需要,可以繼續部署,測試,並與真正的項目資源運行它。這是考慮設置運行選項,以一個良好的時間控制縮放行為在生產環境中運行的功能。

  1. 通過從本地項目目錄的根目錄運行以下命令,將您的功能以及託管內容和配置部署到您的站點:

    firebase deploy --only functions,hosting
  2. 通過以下 URL 訪問您的實時站點和函數:

    • 您的 Firebase 子域:
      PROJECT_ID .web.app/bigbenPROJECT_ID .firebaseapp.com/bigben

    • 任何連接的自定義域
      CUSTOM_DOMAIN /bigben

使用網絡框架

您可以使用Web框架,如Express.js ,在雲計算的功能,以滿足您的應用程序的動態內容,更輕鬆地編寫複雜的Web應用程序。

以下部分提供了將 Express.js 與 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. 而另一個端點返回BONG算作一個API,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)});
      });
      
  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);
    

訪問雲計算功能的文檔,以了解更多關於使用火力地堡與快速的應用程序和中間件模塊。

下一步