Ingress in Kubernetes: A Guide for React Apps
1 What is Ingress in Kubernetes?
Ingress is a Kubernetes resource that manages external access to services within a clus-
ter, typically via HTTP or HTTPS. It provides a way to define routing rules for incoming
traffic, directing it to the appropriate services based on factors like URL paths or host-
names. For a React app, Ingress is essential for exposing both the frontend and backend
services under a single domain, such as [Link].
• Purpose: Ingress consolidates multiple services under one IP address, supports
load balancing, SSL termination, and name-based virtual hosting, making it ideal
for scalable web applications like those built with React.
Think of Ingress as a traffic manager that ensures requests reach the right part of
your app efficiently.
2 Key Concepts in Ingress
2.1 Ingress Controller
An Ingress Controller is a pod running in your Kubernetes cluster that interprets and
enforces the rules defined in Ingress resources. Without it, Ingress rules remain inactive.
• Examples: Popular Ingress Controllers include NGINX, Traefik, and HAProxy.
• Relevance to React: For a React app, the Ingress Controller routes traffic to the
frontend or backend based on your configuration.
2.2 Ingress Resource
The Ingress Resource is a YAML file where you specify how traffic should be routed
to your services. It defines rules based on hostnames, paths, or other conditions.
• React Example: You might route [Link]/ to the React frontend and
[Link]/api to a backend API.
2.3 Service
A Service is a Kubernetes abstraction that groups a set of pods and provides a stable
endpoint for them. Ingress uses Services to forward traffic to the correct pods.
• How it Fits: Your React frontend and backend API each run as Services, which
Ingress connects to the outside world.
1
3 How Ingress Works: The Workflow
Heres the step-by-step process of how Ingress handles traffic:
1. External Request: A user visits [Link].
2. Ingress Controller: The controller receives the request and checks the Ingress
rules.
3. Routing: Based on the rules, it directs the request to the appropriate Service (e.g.,
frontend or backend).
4. Service to Pods: The Service forwards the request to a pod running your app.
5. Response: The pod processes the request and sends a response back to the user.
For a React app, this means [Link]/ serves the frontend, while [Link]/api
hits the backend API.
4 Setting Up Ingress for a React App: A Practical Example
Lets set up Ingress for a React app with a frontend and a [Link] backend API, both
running in Kubernetes.
4.1 Scenario
• Frontend: A React app served at [Link]/.
• Backend: A [Link] API served at [Link]/api.
4.2 Steps
1. Deploy the Services:
• Create a Service for the React frontend (frontend-service).
• Create a Service for the backend API (backend-service).
2. Install an Ingress Controller:
• Use the NGINX Ingress Controller, installable via Helm or kubectl.
3. Create the Ingress Resource:
• Define routing rules in a YAML file.
Below is the Ingress YAML file for this setup:
1 apiVersion : networking . k8s . io / v1
2 kind : Ingress
3 metadata :
4 name : react - app - ingress
5 spec :
6 rules :
2
7 - host : example . com
8 http :
9 paths :
10 - path : /
11 pathType : Prefix
12 backend :
13 service :
14 name : frontend - service
15 port :
16 number : 80
17 - path : / api
18 pathType : Prefix
19 backend :
20 service :
21 name : backend - service
22 port :
23 number : 8080
4.3 Explanation of the YAML
• host: [Link]: Routes traffic for this domain.
• path: /: Sends requests to the React frontend Service on port 80.
• path: /api: Sends requests to the backend API Service on port 8080.
• pathType: Prefix: Matches paths starting with the specified value.
4. Apply the Ingress:
• Run kubectl apply -f [Link] to activate the rules.
5. Test the Setup:
• Visit [Link]/ to see the React app and [Link]/api to access the
API.
5 Important Features of Ingress
5.1 Load Balancing
Ingress distributes traffic across multiple pods, ensuring your React app remains respon-
sive under load.
5.2 SSL Termination
Secure your app with HTTPS by adding SSL certificates to the Ingress resource.
• Example: Add a tls section to the YAML with your certificate details.
3
5.3 Path Rewriting
Modify URL paths before they reach your services, useful for aligning with app expecta-
tions.
• React Use Case: Rewrite /api to / if your backend doesnt expect the /api prefix.
5.4 Multiple Domains
Host multiple domains or subdomains in one Ingress resource, such as [Link]
and [Link].
6 Benefits of Using Ingress
• Single Entry Point: Manage all services under one domain or IP.
• Simplified Networking: Reduce complexity compared to multiple load balancers.
• Scalability: Add new services easily without changing external access.
• Security: Centralize SSL and access control.
