Serving Kubernetes Backend and Firebase Hosting Frontend from the Same Domain Name

Serving Kubernetes Backend and Firebase Hosting Frontend from the Same Domain Name

In the world of web development, it’s common to have your backend and frontend hosted on different platforms. This can lead to complications when you want to serve both from the same domain name. In this blog post, we’ll guide you through the process of serving a Kubernetes backend and a Firebase hosting frontend from the same domain name.

Prerequisites

Before we start, ensure you have the following:

• A domain name
• A Firebase project
• A Kubernetes cluster
• Basic knowledge of Kubernetes and Firebase

Step 1: Setting Up Firebase Hosting

Firebase Hosting provides fast and secure hosting for your web app. It’s backed by a global content delivery network (CDN), making it a great choice for serving static and dynamic content to users worldwide.

To set up Firebase Hosting, follow these steps:

1. Navigate to the Firebase console and create a new project.
2. In the project dashboard, click on ‘Hosting’ in the left-hand menu.
3. Click on ‘Get Started’ and follow the instructions to install Firebase CLI and initialize your project.
4. Deploy your frontend application using the firebase deploy command.

At this point, your frontend is hosted on Firebase, but it’s not yet connected to your domain name.

Step 2: Configuring Your Domain Name with Firebase

To connect your domain name with Firebase, follow these steps:

1. In the Firebase console, go to the Hosting section of your project.
2. Click on ‘Add custom domain’.
3. Enter your domain name and follow the instructions to verify ownership.
4. Once verified, Firebase will provide you with a set of DNS records. Add these records to your domain name provider’s DNS settings.

After DNS propagation, your domain name will point to your Firebase hosted frontend.

Step 3: Setting Up Kubernetes Backend

Kubernetes is a powerful system for managing containerized applications. It’s perfect for deploying, scaling, and managing your backend services.

To set up your Kubernetes backend, follow these steps:

1. Create a Kubernetes cluster in your preferred environment.
2. Deploy your backend application to the Kubernetes cluster.
3. Expose your backend service using a Kubernetes Ingress.

At this point, your backend is running on Kubernetes, but it’s not yet accessible from your domain name.

Step 4: Configuring Your Domain Name with Kubernetes

To connect your domain name with your Kubernetes backend, you’ll need to use a reverse proxy. A popular choice for this is Nginx.

Here’s how to set it up:

1. Install Nginx Ingress Controller in your Kubernetes cluster.
2. Create an Ingress resource that routes traffic from a subdomain (e.g., api.yourdomain.com) to your backend service.

Now, your backend service is accessible from api.yourdomain.com.

Step 5: Unifying Firebase and Kubernetes Under the Same Domain

To serve both Firebase and Kubernetes from the same domain, you’ll need to set up a reverse proxy on Firebase.

1. In your Firebase project, install the firebase-tools package.
2. Create a firebase.json file with rewrite rules that route API requests to your Kubernetes backend.

Here’s an example of what your firebase.json might look like:

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "/api/**",
        "run": {
          "serviceId": "api",
          "region": "us-central1"
        }
      }
    ]
  }
}

In this example, any request to yourdomain.com/api will be routed to your Kubernetes backend.

Conclusion

By following these steps, you can serve a Kubernetes backend and a Firebase hosting frontend from the same domain name. This setup allows you to leverage the strengths of both platforms, providing a robust and scalable solution for your web applications.

Remember, this is a high-level guide. Depending on your specific use case and environment, you might need to adjust some steps. Always refer to the official Firebase and Kubernetes documentation for the most accurate and up-to-date information.

Happy coding!

About Saturn Cloud

Saturn Cloud is your all-in-one solution for data science & ML development, deployment, and data pipelines in the cloud. Spin up a notebook with 4TB of RAM, add a GPU, connect to a distributed cluster of workers, and more. Join today and get 150 hours of free compute per month.