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

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

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

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

  1. Google Cloud コンソールの VPC ネットワーク ページにアクセスします。
  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. Google Cloud コンソールの Memorystore for Redis インスタンスの [接続] タブで、接続情報（ホストとポート）を確認します。

  2. REDISPORT と REDISHOST 環境変数を使用して Redis に接続します。Google Cloud コンソールのホストとポートの値を使用して、apphosting.yaml でこれらの値を設定します。

    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 を使用して値をオーバーライドできます。ここで、REDISHOST の値を localhost を指すように変更して、Redis のローカル インストールを使用してローカルで開発できるようにします。

  1. ローカルマシンに Redis をインストールする

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

    env:
  - variable: REDISHOST
    value: 127.0.0.1