Building a Scalable Web Application with Firebase Hosting, GKE, and Cloud Load Balancer on Google Cloud

INTRODUCTION

Building scalable and secure web applications has never been easier, thanks to the robust suite of services provided by Google Cloud Platform (GCP). Among these services, Firebase Hosting, Google Kubernetes Engine (GKE), and Cloud Load Balancer stand out for their performance, flexibility, and ease of use. In this blog, we'll explore how to leverage these technologies together to build a modern web application that delivers static and dynamic content efficiently.

Why Use Firebase Hosting, GKE, and Cloud Load Balancer?

Cloud CDN :

Cloud CDN (Content Delivery Network) in Google Cloud Platform (GCP) is a service that accelerates the delivery of your content to users by caching your static assets at locations closer to your end users, known as edge locations. This helps reduce latency, increase download speeds, and decrease load on your origin server, ultimately providing a better user experience.

Cloud Armor:

This is a security service that can be used in conjunction with Cloud Load Balancing and Cloud CDN to protect your applications from DDoS attacks and other security threats. It provides Web Application Firewall (WAF) functionality to ensure secure content delivery.

Firebase Hosting:

Firebase Hosting is a service aimed at front-end developers and offers fast and secure hosting for web apps and static content. It uses Google's CDN infrastructure under the hood and is especially optimized for modern web applications.

Cloud Load Balancing:

While not strictly a CDN, Cloud Load Balancing distributes incoming traffic across multiple backends (like virtual machines or storage buckets) to improve the performance, availability, and fault tolerance of your application. It also integrates with Cloud CDN to further optimize content delivery.

GKE

Perfect for handling dynamic content, such as processing user interactions, managing sessions, and running complex backend logic. GKE allows you to run containerized applications in a Kubernetes cluster, making it highly scalable

Step 1: Set Up Firebase Hosting for Static Content

Firebase Hosting is optimized for delivering static content like images, styles, and client-side scripts. It’s extremely fast and easy to deploy, plus it integrates seamlessly with Cloud CDN to cache content globally.

Steps to Set Up Firebase Hosting:

Initialize Firebase Hosting: If you haven't already, create a Firebase project and initialize Firebase Hosting:
```
 firebase init hosting
```
This command will guide you through the setup process and configure your project.
Deploy Static Files: Place your static assets (images, HTML, CSS, JavaScript) in the public/ folder. Once your assets are ready, deploy them to Firebase Hosting:
```
 firebase deploy --only hosting
```
Firebase will automatically distribute your files globally via Cloud CDN, ensuring low-latency access from anywhere in the world.

Step 2: Set Up GKE for Dynamic Content

While Firebase Hosting is great for static content, your application will likely need dynamic content like user-specific data (e.g., shopping carts, user profiles). This is where Google Kubernetes Engine (GKE) shines.

GKE is a fully managed Kubernetes service that allows you to deploy, manage, and scale containerized applications with ease.

Steps to Set Up GKE:

Create a GKE Cluster: First, create a Kubernetes cluster in Google Cloud:
```
 gcloud container clusters create my-cluster --zone us-central1-a
```
This command creates a Kubernetes cluster with the default settings.

Deploy Your Application: You can deploy your backend services (like APIs for handling user authentication, shopping cart management, etc.) as containers. For example, create a Kubernetes deployment (backend-deployment.yaml):

 apiVersion: apps/v1
 kind: Deployment
 metadata:
   name: backend-deployment
 spec:
   replicas: 3
   selector:
     matchLabels:
       app: backend
   template:
     metadata:
       labels:
         app: backend
     spec:
       containers:
       - name: backend
         image: gcr.io/[YOUR_PROJECT_ID]/backend-image
         ports:
         - containerPort: 8080

Expose the Application with Ingress: Kubernetes Ingress allows you to expose your services externally. Create an Ingress resource to expose your dynamic content (for example, API endpoints):

 apiVersion: networking.k8s.io/v1
 kind: Ingress
 metadata:
   name: backend-ingress
 spec:
   rules:
   - host: "www.yoursite.com"
     http:
       paths:
       - path: "/api/*"
         pathType: Prefix
         backend:
           service:
             name: backend-service
             port:
               number: 8080

This ensures that any request to /api/* will be routed to the backend service in GKE.

Step 3: Set Up Cloud Load Balancer

The Cloud Load Balancer is the heart of our architecture. It allows us to route incoming traffic to either Firebase Hosting or GKE, depending on whether the request is for static or dynamic content.

Steps to Set Up Cloud Load Balancer:

Create the Load Balancer: Go to the Google Cloud Console, navigate to Network Services > Load Balancing, and click Create Load Balancer. Choose HTTP(S) Load Balancer for global distribution.
Define Backend Services:
- Backend Service 1: This will handle requests for static content, routing them to Firebase Hosting. Since Firebase Hosting is directly integrated with Cloud CDN, you don’t have to worry about configuring caching manually.
- Backend Service 2: This will route requests for dynamic content (e.g., /api/*, /cart/*) to your GKE backend using the Ingress you created earlier.
Set Up URL Map: The URL map is a critical part of routing. It specifies how the load balancer decides which backend to send the request to based on the URL path.
- For static content, route requests to Firebase Hosting:
  - Example: /images/*, /styles/*, /js/* → Firebase Hosting
- For dynamic content, route requests to GKE:
  - Example: /api/*, /cart/* → GKE backend (via Ingress)

Here's how you can define the URL map:

    defaultRouteAction:
      service: gke-backend-service
    hostRules:
      - hosts: ["www.yoursite.com"]
        pathMatcher: static-paths

Frontend Configuration: Create a frontend configuration for the load balancer. This includes:
- A public IP address for your domain (e.g., www.yoursite.com).
- SSL certificates for HTTPS (either self-managed or Google-managed).
Cloud Armor (Optional): For added security, you can apply Cloud Armor to protect your application from DDoS attacks and other threats. You can set rules to block malicious traffic based on IP address, country, or other criteria.

Step 4: Testing and Monitoring

Once everything is set up, it’s time to test the entire system and monitor its performance.

Test Static Content: Access URLs like https://www.yoursite.com/images/product1.jpg or https://www.yoursite.com/css/styles.css. These should be served by Firebase Hosting, leveraging Cloud CDN for fast global access.
Test Dynamic Content: Try accessing https://www.yoursite.com/api/cart/add or https://www.yoursite.com/api/user/profile. These requests should be routed to the GKE backend for processing.
Monitor Traffic: Use Google Cloud Monitoring to check how traffic is being routed, how GKE is performing, and whether there are any bottlenecks.

Benefits of This Architecture

Scalability: Both Firebase Hosting and GKE scale automatically to handle changes in traffic volume. Firebase serves static files with low latency via Cloud CDN, while GKE automatically scales your backend services to handle spikes in dynamic content requests.
Global Availability: Firebase Hosting, backed by Cloud CDN, ensures that static content is delivered globally with low latency. Cloud Load Balancer ensures high availability by routing traffic to the nearest available backend.
Security: Cloud Armor can be used to protect against DDoS attacks, and SSL certificates ensure secure communication over HTTPS.