Firebase Summit で発表されたすべての情報をご覧ください。Firebase を使用してアプリ開発を加速し、自信を持ってアプリを実行する方法を紹介しています。詳細

Cloud Functionsを使用して、動的コンテンツを提供し、マイクロサービスをホストします

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

Cloud Functions と Firebase Hosting を組み合わせて、動的コンテンツを生成して提供したり、REST API をマイクロサービスとして構築したりします。

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

Firebase Hosting と統合された Cloud Functions の使用例とサンプルについては、サーバーレスの概要をご覧ください。

Cloud Functions を Firebase Hosting に接続する

このセクションでは、関数を Firebase Hosting に接続するためのウォークスルーの例を示します。

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

ステップ 1: Cloud Functions をセットアップする

  1. Firebase CLI の最新バージョンがあり、Firebase Hosting が初期化されていることを確認してください。

    CLI のインストールとホスティングの初期化の詳細な手順については、ホスティングの入門ガイドを参照してください。

  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:ホスティング サイトの HTTPS 関数を作成してテストする

  1. お気に入りのエディターで/functions/index.jsを開きます。

  2. ファイルの内容を次のコードに置き換えます。

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

    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. Firebase Local Emulator Suiteを使用して、関数をローカルでテストします。

    1. ローカル プロジェクト ディレクトリのルートから、次のコマンドを実行します。

      firebase emulators:start

    2. CLI によって返されたローカル URL (例: http://localhost:5001/ PROJECT_ID /us-central1/bigbenを介して関数にアクセスします。

HTTPS リクエストの詳細については、 Cloud Functions のドキュメントをご覧ください。

次のステップでは、Firebase Hosting URL からこの HTTPS 関数にアクセスして、Firebase でホストされているサイトの動的コンテンツを生成できるようにする方法について説明します。

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

書き換えルールを使用すると、特定のパターンに一致するリクエストを 1 つの宛先に送信できます。次の手順では、ホスティング サイトのパス../bigbenからのすべてのリクエストを転送してbigben関数を実行する方法を示します。

  1. firebase.jsonファイルを開きます。

  2. hostingセクションの下に次のrewrite構成を追加します。

    "hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/bigben",
    "function": "bigben",
    "region": "us-central1"  // optional (see note below)
  } ]
}

  3. Firebase エミュレーターで再度テストして、リダイレクトが期待どおりに機能することを確認します。

    1. ローカル プロジェクト ディレクトリのルートから、次のコマンドを実行します。

      firebase emulators:start

    2. CLI によって返されたローカルでホストされているサイトの URL (通常はlocalhost:5000 ) にアクセスしますが、次のように URL にbigbenを追加します: http://localhost:5000/bigben

  4. サイトの関数とその機能を繰り返します。 Firebase エミュレータを使用して、これらの反復をテストします。

書き換えルールの詳細については、ホスティング構成ページをご覧ください。また、さまざまな 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

Web フレームワークを使用する

Express.jsなどの Web フレームワークを Cloud Functions で使用して、アプリの動的コンテンツを提供し、複雑な Web アプリをより簡単に作成できます。

次のセクションでは、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');
const express = require('express');
const app = express();

  3. 次の 2 つのエンドポイントを追加します。

    1. /で Web サイトのインデックスを提供する最初のエンドポイントを追加します。

      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カウントを JSON 形式の API として/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ファイルを開き、次のように Express.js アプリにcorsを追加します。

    const cors = require('cors')({origin: true});
app.use(cors);

Express アプリとミドルウェア モジュールで Firebase を使用する方法の詳細については、 Cloud Functions のドキュメントを参照してください。

次のステップ