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 コンテナから）にのみ使用できます。

apphosting.yaml で構成する

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

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

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

Redis や Memcached などのキャッシュ システムは、アプリ用の高速データ キャッシュ レイヤを構築するためによく使用されます。この例では、Firebase App Hosting バックエンドと同じ Google Cloud プロジェクトに Memorystore for Redis を設定し、Direct 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 に設定されます。
    • [バージョン] で 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