將 Firebase App Hosting 連結至虛擬私有雲網路

Firebase App Hosting 後端可連線至虛擬私有雲 (VPC) 網路。這可讓 Firebase App Hosting 後端存取無法透過公用 IP 位址存取的後端服務，例如 Cloud SQL、Spanner、Cloud Memorystore、Compute Engine 或 Kubernetes 內部微服務。

虛擬私有雲存取權僅適用於執行階段 (來自 Cloud Run 容器)，不適用於建構階段 (Cloud Build)。

在 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，並使用 直接 VPC 出口連線至該專案。

步驟 0：建立 Memorystore for Redis 執行個體

  1. 前往 Google Cloud 控制台的「Memorystore for Redis」頁面。
    • 請確認您選取的專案與 Firebase App Hosting 使用的專案相同。
    • 如果無法存取這個頁面，請確認專案已啟用帳單功能，且您已啟用 Memorystore API。
  2. 選取「建立執行個體」。
  3. 根據偏好的設定，設定新的執行個體。以下列舉一些可用的值範例：
    • 在「Instance ID」(執行個體 ID) 下方輸入 my-redis-cache。
    • 在「Display name」下方輸入 Redis cache。
    • 在等級選取器下方選擇「Basic」(基本)。基本級會指定獨立的 Redis 節點，而非標準級，後者會使用備用節點來備份資料。
    • 從「Region」選取器中選擇 App Hosting 後端的地區。請務必將這個值設為後端的區域。
    • 在區域選取器中選擇「任何」。
    • 在「Capacity」(容量) 下方輸入 5。這樣做可將執行個體容量設為 5 GB。
    • 選取「Version」下方的 5.0 (建議)。
    • 在「授權網路」選取器中選擇「預設」。

步驟 1：使用 VPC 網路 ID 更新 apphosting.yaml

  1. 前往 Google Cloud 控制台的「VPC 網路」頁面。
  2. 找出 Memorystore for Redis 執行個體的 VPC 網路 ID (通常為 default)。

  3. 使用 VPC 網路 ID 在 apphosting.yaml 中設定直接虛擬私有雲輸出設定：

    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 的值變更為指向本機主機，以便在本機使用本機安裝的 Redis 進行開發。

  1. 在本機機器上安裝 Redis

  2. 建立或編輯 apphosting.emulators.yaml，以參照本機例項：

    env:
  - variable: REDISHOST
    value: 127.0.0.1