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

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

VPC 存取權僅在執行階段 (從 Cloud Run 容器) 提供，而非在建構階段 (Cloud Build) 提供。

選擇連線至虛擬私有雲網路的方式

• 直接虛擬私有雲輸出：更簡單、快速且便宜。每個容器使用一個 IP 位址。 適用於大部分用途。
• 無伺服器連接器：為較大型的應用程式集區 IP 位址。必須支付基礎 VM 的費用。如需定價詳情，請參閱 VPC 定價頁面中的「無伺服器虛擬私有雲存取」。

在 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，並使用直接 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