將 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 可在具有不同連接器/網路的測試和正式環境之間移植。

直連虛擬私有雲輸出設定 (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，並使用直接虛擬私有雲輸出連線至該專案。

步驟 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 節點，而標準級別則會使用副本節點備份資料。
    • 從「Region」(區域) 選取器中選擇 App Hosting 後端的區域。請務必將這個值設為與後端區域相符。
    • 在可用區選取器中選擇「any」(任何)。
    • 在「Capacity」(容量) 下方輸入 5。這會將執行個體容量設為 5 GB。
    • 在「Version」(版本) 下方選取 7.0 (或預設建議版本)。
    • 在「Authorized network」(授權網路) 選取器中，選擇「default」(預設)。

步驟 1：將 apphosting.yaml 更新為虛擬私有雲網路 ID

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

  3. 使用虛擬私有雲網路 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({
      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