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 앱에서 Redis용 Memorystore에 연결

Redis 또는 Memcached와 같은 캐싱 시스템은 일반적으로 앱의 빠른 데이터 캐싱 레이어를 빌드하는 데 사용됩니다. 이 예에서는 Firebase App Hosting 백엔드와 동일한 Google Cloud 프로젝트에서 Memorystore for Redis를 설정하고 직접 VPC 이그레스를 사용하여 연결하는 방법을 보여줍니다.

0단계: Redis용 Memorystore 인스턴스 만들기

Google Cloud 콘솔에서 Redis용 Memorystore 페이지로 이동합니다.
- Firebase App Hosting에 사용 중인 프로젝트와 동일한 프로젝트가 선택되어 있는지 확인합니다.
- 이 페이지에 액세스할 수 없는 경우 프로젝트에 결제가 사용 설정되어 있고 Memorystore API가 사용 설정되어 있는지 확인합니다.
인스턴스 만들기를 선택합니다.
원하는 설정으로 새 인스턴스를 구성합니다. 다음은 사용할 수 있는 몇 가지 값의 예입니다.
- 인스턴스 ID 아래에 my-redis-cache을 입력합니다.
- 표시 이름 아래에 Redis cache를 입력합니다.
- 등급 선택기에서 기본을 선택합니다. 기본 등급은 복제본 노드를 사용하여 데이터를 백업하는 표준 등급이 아닌 독립형 Redis 노드를 지정합니다.
- 리전 선택기에서 App Hosting 백엔드의 리전을 선택합니다. 백엔드의 리전과 일치하도록 이 값을 설정해야 합니다.
- 영역 선택기에서 any를 선택합니다.
- 용량에 5를 입력합니다. 이렇게 하면 인스턴스 용량이 5GB로 설정됩니다.
- 버전에서 5.0를 선택합니다 (권장).
- 승인된 네트워크 선택기에서 기본값을 선택합니다.

1단계: `apphosting.yaml`를 VPC 네트워크 ID로 업데이트

Google Cloud Console에서 VPC 네트워크 페이지로 이동합니다.
Memorystore for Redis 인스턴스의 VPC 네트워크 ID를 찾습니다 (일반적으로 default임).

VPC 네트워크 ID를 사용하여 apphosting.yaml에서 직접 VPC 이그레스 구성을 설정합니다.

runConfig:
  vpcAccess:
    egress: PRIVATE_RANGES_ONLY # Default value
  networkInterfaces:
    - network: my-network-id

2단계: 앱을 Redis로 연결하는 환경 변수 추가

Google Cloud 콘솔의 Redis용 Memorystore 인스턴스 '연결' 탭에서 연결 정보 (호스트 및 포트)를 찾습니다.
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 사용

redis npm 패키지를 설치합니다.

npm install redis@latest

코드에서 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의 로컬 설치를 사용하여 로컬에서 개발할 수 있습니다.

로컬 머신에 Redis 설치
apphosting.emulators.yaml를 만들거나 수정하여 로컬 인스턴스를 참조합니다.
```
env:
  - variable: REDISHOST
    value: 127.0.0.1
```