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

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

VPC 存取權僅在執行階段 (從 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。
    • 在「顯示名稱」下方輸入 Redis cache。
    • 在層級選取器下方選擇「Basic」。基本級會指定獨立的 Redis 節點，標準級則使用備用節點備份資料。
    • 從「地區」選取器中選擇後端的地區。App Hosting請務必將這個值設為與後端區域相符。
    • 從區域選取器中選擇「any」。
    • 在「Capacity」(容量) 下方輸入 5。這會將執行個體容量設為 5 GB。
    • 選取「版本」下方的 5.0 (建議)。
    • 從「授權網路」選取器中選擇「預設」。

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

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

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

    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。在 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 覆寫值。您可以在這裡將 REDISHOST 的值變更為指向 localhost，以便使用本機安裝的 Redis 在本機開發。

  1. 在本機電腦上安裝 Redis

  2. 建立或編輯 apphosting.emulators.yaml，以參照本機執行個體：

    env:
  - variable: REDISHOST
    value: 127.0.0.1