Firebase App Hosting を VPC ネットワークに接続する

Firebase App Hosting バックエンドは、Virtual Private Cloud (VPC) ネットワークに接続できます。これにより、 Firebase App Hosting バックエンドは、Cloud SQL、Spanner、Cloud Memorystore、 Compute Engine、Kubernetes 内部マイクロサービスなど、 パブリック IP アドレスを使用してアクセスできないバックエンド サービスにアクセスできます。

VPC アクセスは、ビルド時(Cloud Build)ではなく、ランタイム時(Cloud Run コンテナから)のみ使用できます。

VPC ネットワークへの接続方法を選択する

  • ダイレクト VPC 下り(外向き): シンプルで高速、低コスト。コンテナごとに 1 つの IP アドレスを使用します。 ほとんどのユースケースで推奨されます。
  • サーバーレス コネクタ: 大規模なアプリケーションの IP アドレスをプールします。基盤となる VM の料金が発生します。料金の詳細については、 VPC の料金ページ の「サーバーレス VPC アクセス」をご覧ください。

apphosting.yaml で構成する

apphosting.yaml ファイルの vpcAccess マッピングを使用してアクセスを構成します。完全修飾ネットワーク名またはコネクタ名、あるいは ID を使用します。ID を使用すると、異なるコネクタ/ネットワークを使用して、ステージング環境と本番環境の間で移植できます。

ダイレクト VPC 下り(外向き)の構成(apphosting.yaml):

runConfig:
  vpcAccess:
    egress: PRIVATE_RANGES_ONLY # Default value
    networkInterfaces:
      # Specify at least one of network and/or subnetwork
      - network: my-network-id
        subnetwork: my-subnetwork-id

サーバーレス コネクタの構成(apphosting.yaml):

runConfig:
  vpcAccess:
    egress: ALL_TRAFFIC
    connector: connector-id

例: Next.js アプリから Memorystore for Redis に接続する

Redis や Memcached などのキャッシュ システムは、アプリの高速データ キャッシュ レイヤを構築するために一般的に使用されます。この例では、 Memorystore for Redis を同じ Google Cloud プロジェクトに設定し、Firebase App Hosting バックエンドと ダイレクト VPC 下り(外向き) を使用して接続する方法を示します。

ステップ 0: Memorystore for Redis インスタンスを作成する

  1. Google Cloud コンソールで [Memorystore for Redis] ページに移動します。Google Cloud
    • Firebase App Hosting に使用しているのと同じプロジェクトが 選択されていることを確認します。
    • このページにアクセスできない場合は、プロジェクトで課金が有効になっていることと、Memorystore APIを有効にしていることを確認してください。
  2. [インスタンスを作成] を選択します。
  3. 新しいインスタンスを好みの設定で構成します。使用できる値の例を次に示します。
    • [インスタンス ID] に「my-redis-cache」と入力します。
    • [表示名] に「Redis cache」と入力します。
    • [階層] セレクタで [基本] を選択します。レプリカ ノードを使用してデータをバックアップする標準階層とは異なり、基本階層ではスタンドアロンの Redis ノードを指定します。
    • App Hosting[**リージョン**] セレクタで、バックエンドのリージョンを選択します。この値は、バックエンドのリージョンと一致するように設定してください。
    • ゾーン セレクタから [任意] を選択します。
    • [容量] に「5」と入力します。これにより、インスタンス容量が 5 GB に設定されます。
    • [バージョン] で 5.0 を選択します(推奨)。
    • [承認済みネットワーク] セレクタで [デフォルト] を選択します。

ステップ 1: VPC ネットワーク ID で apphosting.yaml を更新する

  1. [VPC ネットワーク] ページに移動します。 コンソールで Google Cloud
  2. Memorystore for Redis インスタンスの VPC ネットワーク ID を確認します(通常は default です)。
  3. VPC ネットワーク ID を使用して、apphosting.yaml でダイレクト VPC 下り(外向き)の構成を設定します。

    runConfig:
      vpcAccess:
        egress: PRIVATE_RANGES_ONLY # Default value
      networkInterfaces:
        - network: my-network-id
    

ステップ 2: アプリを Redis に転送する環境変数を追加する

  1. コンソールの Memorystore for Redis インスタンスの [接続] タブで接続情報(ホストとポート)を確認します。Google Cloud
  2. REDISPORT 環境変数と REDISHOST 環境変数を使用して Redis に接続します。Google Cloud コンソールのホストとポートの値を使用して、apphosting.yaml でこれらの値を設定します。Google Cloud

    env:
      # Sample only. Use actual values provided by Memorystore
      - variable: REDISPORT
        value: 6379
      - variable: REDISHOST
        value: 10.127.16.3
    

ステップ 3: アプリから Redis を使用する

  1. redis npm パッケージをインストールします。

    npm install redis@latest

  2. コードから Redis キャッシュにアクセスします。前のステップで構成した環境変数を使用します。たとえば、Next.js ルート ハンドラでキャッシュから読み取る方法は次のとおりです。

    • src/lib/redis.js

      import { createClient } from "redis";
      
      // Set these environment variables in apphosting.yaml
      const REDISHOST = process.env.REDISHOST;
      const REDISPORT = process.env.REDISPORT;
      
      let redisClient;
      
      export async function getClient(req, res) {
        // Only connect if a connection isn't already available
        if (!redisClient) {
          redisClient = await createClient(REDISPORT, REDISHOST)
            .on("error", (err) => console.error("Redis Client Error", err))
            .connect();
        }
      
        return redisClient;
      }
      
    • src/app/counter/route.js

      import { getClient } from "@/lib/redis.js";
      
      export async function GET(request) {
        const redisClient = await getClient();
        const count = await redisClient.get("counter");
      
        return Response.json({ count });
      }
      
      export async function POST(request) {
        const redisClient = await getClient();
        const count = await redisClient.incr("counter");
      
        return Response.json({ count });
      }
      

ステップ 4(省略可): ローカル開発用にアプリを構成する

Firebase App Hosting エミュレータは、 apphosting.emulator.yaml を使用して値をオーバーライドできます。ここでは、Redis のローカル インストールを使用してローカルで開発できるように、REDISHOST の値を localhost に変更できます。

  1. ローカルマシンに Redis をインストールする
  2. ローカル インスタンスを参照するように apphosting.emulators.yaml を作成または編集します。

    env:
      - variable: REDISHOST
        value: 127.0.0.1