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 バックエンドのリージョンを選択します。この値は、バックエンドのリージョンと一致するように設定してください。
    • ゾーンセレクタから [any] を選択します。
    • [容量] に 5 と入力します。これにより、インスタンス容量が 5 GB に設定されます。
    • [バージョン] で 7.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({
      socket: {
        host: REDISHOST,
        port: Number(REDISPORT),
      },
    })
      .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.emulator.yaml を作成または編集して、ローカル インスタンスを参照します。

    env:
  - variable: REDISHOST
    value: 127.0.0.1