この記事は Firebase Hosting エンジニア、Michael Bleigh による The Firebase Blog の記事 "Serving dynamic content with Cloud Functions on Firebase Hosting" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。


3 年前、Firebase Hosting がリリースされ、デベロッパーが高速で魅力的なウェブ コンテンツをより簡単に提供できるようになりました。2 か月前には、Cloud Functions for Firebase のベータ版がリリースされ、デベロッパーがサーバーやインフラについて心配せずに、カスタム バックエンド ロジックを記述できるようになりました。先日の Google I/O では、Firebase Hosting と Cloud Functions を組み合わせて、世界規模の拡張性とパフォーマンスを備えた Progressive Web Apps を作成できる柔軟なツールセットとして使う方法を紹介しました。

プロジェクトの firebase.json 設定ファイルに rewrite を追加すると、HTTPS Cloud Function を Firebase Hosting アプリに接続できます。 
{
  "hosting": {
    "rewrites": [
      {"source": "/function/**", "function":"myFunction"}
    ]
  }
}

接続後は、一致するリクエストがスムーズに Cloud Function に渡されます（上記の例では、myFunction という名前の機能が呼ばれます）。このわずか 1 行の変更だけで、Firebase Hosting ユーザーは以下のようなすばらしい新機能を使えるようになります。
  1. サーバーサイド レンダリング: 今までは、Firebase Hosting は静的なコンテンツしか提供できませんでしたが、Express などの業界標準ライブラリを使ってダイナミック コンテンツを提供できるようになります。超高速なグローバル CDN キャッシュが活用できる点は変わりません。
  2. カスタム API: Cloud Functions と Firebase Hosting を組み合わせると、独自のドメインにカスタム API エンドポイントを作成して、クロスオリジン リクエストの負荷を避けることができます。さらに、数行のコードを追加すると、Firebase Auth でエンドポイントを認証することもできます。
  3. ユーザー生成ウェブ コンテンツ: Firebase Hosting で初めてデプロイ不要で AMP、Twitter Cards などに対応したコンテンツを生成できるようになりました。これで、Firebase Hosting アプリはこれまで以上にコンテンツ共有や検索が容易になります。

Cloud Functions ユーザーは、SSL で保護されたカスタム ドメインで機能を実行できるようになり、不必要な実行を防ぐ強力なキャッシュも利用できます。

ご自分の Firebase プロジェクトの Firebase Hosting で Cloud Functions を使う方法については、ドキュメントをご覧ください。I/O セッション「Firebase Hosting で高速なウェブ体験を開発する」もご覧ください。

Reviewed by Khanh LeViet - Developer Relations Team