Issue with Google Cloud Load Balancer and Firebase...

firebase_user · 03-04-2025 09:50 PM

I'm facing a challenge with deploying a Next.js SSR project on Firebase Hosting after introducing a load balancer, and I’d love to hear your insights or suggestions.

Background:

I have a Next.js project with server-side rendering (no index.html, as expected with SSR). Initially, I hosted it successfully on Firebase Hosting by rewriting requests to a Cloud Run service. My original firebase.json configuration looked like this:
json

{
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"run": {
"serviceId": "(myserviceid)",
"region": "europe-west3"
}
}
]
}
}

This setup worked perfectly—requests to the Firebase Hosting URL were routed to my Cloud Run service, and the app rendered as expected.

The Problem:

Recently, we introduced a load balancer in front of the Cloud Run service for better traffic management, and now we have a load balancer URL (https://<IPADDRESS>/). I updated my firebase.json to route requests to this new URL, as follows:

json

{
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "/_next/static/*",
"destination": "/_next/static/$1"
},
{
"source": "**",
"destination": "http://(IPADDRESS)/$1"
}
]
}
}

Since this change, visiting the Firebase Hosting URL results in a "Page Not Found" error, stating that no index.html was found. I understand this might be because Firebase Hosting expects static files by default, but I’m unsure how to correctly route SSR requests to the load balancer while maintaining Firebase Hosting’s benefits.

What I’m Looking For:
Any insights into why this configuration isn’t working with the load balancer.

Suggestions on how to properly route SSR traffic from Firebase Hosting to a load balancer URL for a Next.js app.

If anyone has successfully set up a similar stack (Next.js SSR + Firebase Hosting + Load Balancer), I’d love to hear about your setup.

Thanks in advance for any help! I’ll keep experimenting and share any solutions I find.

ronnelg

Hi @firebase_user,

Welcome to Google Cloud Community!

You don’t need a load balancer for Firebase Hosting, you can just leverage the CDN by configuring caching of your dynamic content on a global CDN. The use of CDN can dramatically decrease latency and improve overall performance. Have a read on this blog regarding Firebase Hosting and Cloud Run cache for your reference.

Since you are working with Next.js, what I suggest is to use Firebase App Hosting. It streamlines the development and deployment of dynamic applications that use server-side rendering.

Was this helpful? If so, please accept this answer as “Solution”. If you need additional assistance, reply here within 2 business days and I’ll be happy to help.

firebase_user

Thank you for the suggestion!

I appreciate you highlighting Firebase Hosting's CDN capabilities and Firebase App Hosting. I'll definitely keep those options in mind for future projects.

However, in this particular case, we have specific reasons for using a load balancer in front of our Cloud Run service.

These include:

Advanced Traffic Management: We need features like [Specific features of your load balancer, e.g., request routing based on headers, advanced health checking, traffic splitting for A/B testing, DDoS protection, etc.]. Firebase Hosting's CDN doesn't provide this level of control.

Centralized Management: We're using the load balancer to manage traffic across multiple Cloud Run services or other backends, providing a single point of control for our infrastructure.

Existing Infrastructure: The load balancer is already part of our existing infrastructure and is integrated with other services. We want to leverage this existing investment and avoid introducing new components if possible. Therefore, our goal is to get Firebase Hosting to correctly route requests to our existing load balancer URL. As mentioned earlier, we're running into a "Page Not Found" error when we update the `firebase.json` file to point to the load balancer. Given our need for a load balancer, could you provide insights into why the following `firebase.json` configuration isn't working as expected? json

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/_next/static/*",
        "destination": "/_next/static/$1"
      },
      {
        "source": "**",
        "destination": "http://(IPADDRESS)/$1"
      }
    ]
  }
}

Is there anything inherently incompatible with using rewrites in Firebase Hosting to redirect to a load balancer URL?

Are there any specific header requirements or configurations on the load balancer side that we need to be aware of when routing traffic from Firebase Hosting?

Are there any known issues or limitations with Firebase Hosting's rewrites that might be causing this behavior?

Have a great day! 🙂

firebase_user

@ronnelg Hi, any updates on above?

danvr1997

@firebase_user Did you find a solution? I'm facing the same issue

Issue with Google Cloud Load Balancer and Firebase Web App Deployment