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

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

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

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

Cloud Functions を Firebase 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/bigben と PROJECT_ID.firebaseapp.com/bigben

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

で確認できます。

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

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

次のセクションでは、Firebase Hosting と Cloud 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 のドキュメントを確認する をご覧ください。

次のステップ