Connect Firebase App Hosting to a VPC network

Your Firebase App Hosting backend can connect to a Virtual Private Cloud (VPC) network. This allows your Firebase App Hosting backend to access backend services not accessible using public IP addresses, such as Cloud SQL, Spanner, Cloud Memorystore, Compute Engine , or Kubernetes internal microservices.

VPC access is only available at runtime (from your Cloud Run container), not at build time ( Cloud Build ).

Choose how to connect to a VPC network

Direct VPC Egress : Simpler, faster, and less expensive. Uses one IP address per container. Recommended for most use cases.
Serverless Connectors : Pools IP addresses for larger applications. Requires payment for the underlying VM. See "Serverless VPC Access" in the VPC pricing page for pricing details.

Configure in `apphosting.yaml`

Use the vpcAccess mapping in your apphosting.yaml file to configure access. Use either a fully qualified network/connector name or an ID. Using IDs allows for portability between staging and production environments with different connectors/networks.

Direct VPC Egress Configuration ( `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

Serverless Connector Configuration ( `apphosting.yaml` ):

  runConfig 
 : 
  
 vpcAccess 
 : 
  
 egress 
 : 
  
 ALL_TRAFFIC 
  
 connector 
 : 
  
 connector-id

Example: connect to Memorystore for Redis from a Next.js app

Caching systems like Redis or Memcached are commonly used to build a fast data caching layer for an app. This example shows you how to set up Memorystore for Redis in the same Google Cloud project as your Firebase App Hosting backend and connect to it using Direct VPC egress .

Step 0: Create a Memorystore for Redis instance

Go to the Memorystore for Redis page in the Google Cloud console.
- Make sure the same project you're using for Firebase App Hosting is selected.
- If you can't access this page, make sure billing is enabled for your project and that you've enabled the Memorystore API .
Select Create Instance.
Configure the new instance with your preferred settings. Here are some example values you can use:
- Enter my-redis-cache under Instance ID.
- Enter Redis cache under Display name.
- Choose Basicunder the tier selector. Basic tier designates a standalone Redis node, as opposed to standard tier, which uses a replica node to backup your data.
- Choose your App Hosting backend's region from the Regionselector. Be sure to set this value to match the region of your backend.
- Choose anyfrom the zone selector.
- Enter 5 under Capacity. This sets your instance capacity to 5 GB.
- Select 5.0 under Version(recommended).
- Choose defaultfrom the Authorized networkselector.

Step 1: Update `apphosting.yaml` with your VPC network ID

Visit the VPC networks page in the Google Cloud console.
Find the VPC network ID for your Memorystore for Redis instance (it will often be default ).

Set direct VPC egress configuration in apphosting.yaml using the VPC network ID:

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

Step 2: Add environment variables that direct your app to Redis

Find connection information (host and port) in the "Connections" tab of your Memorystore for Redis instance in the Google Cloud console.

Connect to Redis with REDISPORT and REDISHOST environment variables. Set these in apphosting.yaml using the host and port values from the Google Cloud console:

  env 
 : 
  
 # Sample only. Use actual values provided by Memorystore 
  
 - 
  
 variable 
 : 
  
 REDISPORT 
  
 value 
 : 
  
 6379 
  
 - 
  
 variable 
 : 
  
 REDISHOST 
  
 value 
 : 
  
 10.127.16.3

Step 3: Use redis from your app

Install the redis npm package:

npm install redis@latest

Access your redis cache from your code. Use the environment variables configured in the previous step. For example, here's how you might read from a cache in a Next.js route handler:

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 
  
 }); 
 }

Step 4 (optional): Configure your app for local development

The Firebase App Hosting emulator can override values using apphosting.emulator.yaml . Here, you can change the value of REDISHOST to point to the localhost so that you can develop locally using a local installation of Redis.

Install Redis on your local machine

Create or edit apphosting.emulators.yaml to reference your local instance:

  env 
 : 
  
 - 
  
 variable 
 : 
  
 REDISHOST 
  
 value 
 : 
  
 127.0.0.1