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 をセットアップする
Firebase CLI の最新バージョンがあり、Firebase Hosting が初期化されていることを確認してください。
CLI のインストールとホスティングの初期化の詳細な手順については、ホスティングの入門ガイドを参照してください。
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
を開きます。ファイルの内容を次のコードに置き換えます。
このコードは、時計のように 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>`); });
Firebase Local Emulator Suiteを使用して、関数をローカルでテストします。
ローカル プロジェクト ディレクトリのルートから、次のコマンドを実行します。
firebase emulators:start
CLI によって返されたローカル URL (例:
を介して関数にアクセスします。http://localhost:5001/ PROJECT_ID /us-central1/bigben
HTTPS リクエストの詳細については、 Cloud Functions のドキュメントをご覧ください。
次のステップでは、Firebase Hosting URL からこの HTTPS 関数にアクセスして、Firebase でホストされているサイトの動的コンテンツを生成できるようにする方法について説明します。
ステップ 3: HTTPS リクエストを関数に送信する
書き換えルールを使用すると、特定のパターンに一致するリクエストを 1 つの宛先に送信できます。次の手順では、ホスティング サイトのパス../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) } ] }
Firebase エミュレーターで再度テストして、リダイレクトが期待どおりに機能することを確認します。
ローカル プロジェクト ディレクトリのルートから、次のコマンドを実行します。
firebase emulators:start
CLI によって返されたローカルでホストされているサイトの URL (通常は
localhost:5000
) にアクセスしますが、次のように URL にbigben
を追加します:http://localhost:5000/bigben
サイトの関数とその機能を繰り返します。 Firebase エミュレータを使用して、これらの反復をテストします。
書き換えルールの詳細については、ホスティング構成ページをご覧ください。また、さまざまな Hosting 構成に対する応答の優先順位についても学ぶことができます。
動的コンテンツの提供のパフォーマンスを向上させるために、必要に応じてキャッシュ設定を調整できます。
ステップ 4:関数をデプロイする
関数がエミュレーターで目的どおりに動作したら、実際のプロジェクト リソースを使用してデプロイ、テスト、および実行に進むことができます。これは、ランタイム オプションを設定して、運用環境で実行されている関数のスケーリング動作を制御することを検討する良い機会です。
ローカル プロジェクト ディレクトリのルートから次のコマンドを実行して、関数と Hosting のコンテンツおよび構成をサイトにデプロイします。
firebase deploy --only functions,hosting
次の 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 を使用するためのウォークスルーの例を示します。
functions
ディレクトリから次のコマンドを実行して、ローカル プロジェクトに Express.js をインストールします。npm install express --save
/functions/index.js
ファイルを開き、Express.js をインポートして初期化します。const functions = require('firebase-functions'); const express = require('express'); const app = express();
次の 2 つのエンドポイントを追加します。
/
で 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>`); });
また、
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)}); });
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
ファイルを開き、次のように Express.js アプリにcors
を追加します。const cors = require('cors')({origin: true}); app.use(cors);
Express アプリとミドルウェア モジュールで Firebase を使用する方法の詳細については、 Cloud Functions のドキュメントを参照してください。
次のステップ
グローバル CDN で動的コンテンツのキャッシュを設定します。
Firebase Admin SDKを使用して、他の Firebase サービスとやり取りします。