Kubernetes Ingress: Deploying Frontend & Backend With Subdomains

Hey guys! Ever wondered how to deploy a modern web application on Kubernetes, with both your frontend and backend chilling under the same Ingress umbrella? It's a common scenario, especially when you're rocking a setup like a React TypeScript frontend and a FastAPI Python backend. Each wants its own subdomain, but you don't want to juggle a million Ingress resources. Let's dive deep into how to make this happen, step by step, with all the juicy details you need to succeed.

Understanding the Challenge: Why One Ingress?

First off, why bother with a single Ingress? Why not just create separate Ingress resources for your frontend and backend? Well, there are a few compelling reasons. For starters, it simplifies your infrastructure. Managing fewer resources is almost always a win. It also reduces complexity when it comes to things like SSL certificate management and overall configuration. Imagine having to update SSL certs in one place instead of many – sounds good, right? Plus, it can be more efficient in terms of resource utilization. You're essentially consolidating your routing logic into a single point, which can be easier to reason about and maintain.

The main challenge here lies in configuring your Ingress to correctly route traffic based on the subdomain. You need to tell your Ingress controller (like Nginx Ingress Controller or Traefik) that requests to frontend.yourdomain.com should go to your frontend service and requests to backend.yourdomain.com should go to your backend service. This involves setting up the right rules and annotations in your Ingress manifest. Think of it as a traffic cop directing cars to the right lanes – but for your web application! We'll break down exactly how to do this, so you can avoid the common pitfalls and get your app up and running smoothly.

Prerequisites: Setting the Stage

Before we jump into the code, let's make sure we've got our ducks in a row. You'll need a few things in place to follow along:

1. A Kubernetes Cluster: This is the foundation of our deployment. You can use a local cluster like Minikube or kind, or a cloud-based cluster like Google Kubernetes Engine (GKE), Amazon Elastic Kubernetes Service (EKS), or Azure Kubernetes Service (AKS). The choice is yours, but make sure you have kubectl configured to talk to your cluster.
2. An Ingress Controller: This is the magic that makes Ingress work. Popular choices include Nginx Ingress Controller and Traefik. We'll assume you're using Nginx Ingress Controller for this guide, but the principles are similar for other controllers. You'll need to have it installed and configured in your cluster. If you're not sure how to do this, the official documentation for your chosen controller is your best friend.
3. Your Frontend and Backend Applications: You should have your React TypeScript frontend and FastAPI Python backend containerized and ready to deploy. This means you have Dockerfiles for each, and you've built the images and pushed them to a container registry (like Docker Hub, Google Container Registry, or Amazon Elastic Container Registry). If you haven't done this yet, now's the time!
4. A Domain Name and DNS Configuration: You'll need a domain name (like yourdomain.com) and the ability to configure DNS records. You'll need to point the subdomains frontend.yourdomain.com and backend.yourdomain.com to the external IP address of your Ingress controller. This is how the outside world will find your services.

With these prerequisites in place, you're ready to start deploying your application. Let's get to the fun part!

Step-by-Step Deployment Guide

Okay, let's get down to the nitty-gritty. We'll walk through each step, providing code snippets and explanations along the way. By the end of this, you'll have your frontend and backend deployed and accessible through a single Ingress.

1. Deploying Your Backend

First up, the backend. We'll start by creating a Kubernetes Deployment and Service for your FastAPI application. This will ensure that your backend is running and accessible within the cluster.

Deployment

Create a file named backend-deployment.yaml with the following content:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend
  labels:
    app: backend
spec:
  replicas: 2 # Adjust as needed
  selector:
    matchLabels:
      app: backend
  template:
    metadata:
      labels:
        app: backend
    spec:
      containers:
        - name: backend
          image: your-docker-registry/your-backend-image:latest # Replace with your image
          ports:
            - containerPort: 8000 # Or whatever port your backend uses
          env:
            # Add any environment variables your backend needs here
            - name: SOME_ENV_VAR
              value: