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 컨테이너)에만 사용할 수 있습니다.

VPC 네트워크에 연결하는 방법 선택

  • VPC 직접 연결 이그레스: 더 간단하고 빠르며 저렴합니다. 컨테이너당 하나의 IP 주소를 사용합니다. 대부분의 사용 사례에 권장됩니다.
  • 서버리스 커넥터: 더 큰 애플리케이션의 IP 주소를 풀링합니다. 기본 VM에 대한 결제가 필요합니다. 가격 책정 세부정보는 VPC 가격 책정 페이지 의 '서버리스 VPC 액세스'를 참고하세요.

apphosting.yaml에서 구성

apphosting.yaml 파일에서 vpcAccess 매핑을 사용하여 액세스를 구성합니다. 정규화된 네트워크/커넥터 이름 또는 ID를 사용합니다. ID를 사용하면 서로 다른 커넥터/네트워크를 사용하여 스테이징 환경과 프로덕션 환경 간에 이식할 수 있습니다.

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

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

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

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

  1. Google Cloud 콘솔에서 VPC 네트워크 페이지로 이동합니다.Google Cloud
  2. Memorystore for Redis 인스턴스의 VPC 네트워크 ID를 찾습니다 (일반적으로 default임).
  3. VPC 네트워크 ID를 사용하여 apphosting.yaml에서 직접 VPC 이그레스 구성을 설정합니다.

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

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

  1. Google Cloud 콘솔의 Google CloudMemorystore for Redis 인스턴스에 있는 "연결" 탭에서 연결 정보 (호스트 및 포트)를 찾습니다.
  2. REDISPORTREDISHOST 환경 변수를 사용하여 Redis에 연결합니다. Google Cloud 콘솔의 호스트 및 포트 값을 사용하여 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