Cloud Functions を使用した動的コンテンツの配信とマイクロサービスのホスティング

Cloud FunctionsFirebase Hosting をペアにして、 REST API をマイクロサービスとして構築することもできます。

Cloud Functions for Firebase を使用すると、バックエンドを自動的に実行できる 返すことができます。コードは Google のクラウドに保存され、マネージド環境で実行されます。独自のサーバーを管理およびスケーリングする必要はありません。

以下と統合した Cloud Functions のユースケースとサンプルは、 Firebase Hosting 様、 サーバーレスの概要をご覧ください。

Cloud FunctionsFirebase 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. ファイルの内容を次のコードで置き換えます。

    このコードは、1 時間ごとに BONG で HTTPS リクエストに応答する HTTPS 関数(bigben)を作成します。

    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 から返されたローカル URL(例: http://localhost:5001/PROJECT_ID/us-central1/bigben)で関数にアクセスします。

Cloud Functions のドキュメントを確認する をご覧ください。

次のステップでは、この HTTPS 関数に Firebase Hosting URL を設定する必要があります。これにより、ご自身のサイトの動的コンテンツを生成できるようになります。 Firebase でホストされているサイト。

ステップ 3: 関数に HTTPS リクエストを送信する

rewrite ルールを使用して、特定のパターンに一致するリクエストを単一の宛先に向けることができます。次の手順では、 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 によって返される、ローカルでホストされるサイトの URL(通常は localhost:5000)にアクセスします。ただし、http://localhost:5000/bigben のように URL に bigben を追加します。

  4. そのサイトの関数と機能をイテレーションします。Firebase エミュレータを使用して、このイテレーションをテストします。

最高のパフォーマンスを得るには、次の方法で Hosting と関数を同じ場所に配置します。 次のいずれかのリージョンを選択します。

  • us-west1
  • us-central1
  • us-east1
  • europe-west1
  • asia-east1
で確認できます。

Hosting の設定ページに移動: リライトルールの詳細をご覧ください。Google Chat では また、Terraform ワークフローの 回答の優先順位 Hosting 構成をサポートします。

動的コンテンツの配信パフォーマンスを向上させるために、必要に応じてキャッシュ設定を調整できます。

ステップ 4: 関数をデプロイする

エミュレータで関数が意図したとおりに動作するようになったら、実際のプロジェクト リソースを使用してデプロイ、テスト、実行に進むことができます。この段階で、本番環境で実行されている関数のスケーリング動作を制御するためのランタイム オプションの設定を検討することをおすすめします。

  1. 関数、Hosting の内容、構成を ローカル プロジェクトのルートから次のコマンドを実行して、 ディレクトリ:

    firebase deploy --only functions,hosting
  2. 次の URL で公開サイトと関数にアクセスします。

    • Firebase のサブドメイン:
      PROJECT_ID.web.app/bigbenPROJECT_ID.firebaseapp.com/bigben

    • 接続されたカスタム ドメイン:
      CUSTOM_DOMAIN/bigben

で確認できます。

ウェブ フレームワークを使用する

Google Cloud などのウェブ フレームワークを使用して、 Express.js: Cloud Functions で、 アプリの動的コンテンツを配信したり、複雑なウェブアプリをより簡単に作成したりできます。

次のセクションでは、Firebase HostingCloud Functions で Express.js を使用する例を示します。

  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. 次の 2 つのエンドポイントを追加します。

    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. 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)});
      });
      
  4. Express.js アプリを HTTPS 関数としてエクスポートします。

    exports.app = functions.https.onRequest(app);
  5. firebase.json ファイルで、すべてのリクエストを app 関数に送信します。この rewrite により、構成済みの別のサブパス(この例では //api)を Express.js で処理できるようになります。

    {
     "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 のドキュメントを確認する をご覧ください。

次のステップ