K8s AKS React Routing Issue: Not Routing from SVC IP but Works Fine from Localhost IP

Are you tired of dealing with pesky routing issues in your Kubernetes (K8s) deployment on Azure Kubernetes Service (AKS)? Specifically, are you experiencing the frustration of your React application not routing correctly from the Service IP, but somehow magically working fine when accessed via localhost IP? Well, worry no more, my friend! This article is here to guide you through the troubleshooting process and provide a comprehensive solution to this thorny problem.

Understanding the Issue

Before we dive into the solution, let’s take a step back and understand the root cause of this issue. When you deploy your React application on AKS, it’s natural to expect it to be accessible via the Service IP. However, in some cases, the routing might not work as expected, and you’ll find yourself stuck with a 404 error or a blank page.

The problem lies in the way React applications handle routing. When you access your application via localhost IP, the browser is able to resolve the routes correctly because it’s running on the same machine. However, when you try to access it via the Service IP, the routing mechanism gets confused, and the requests are not forwarded to the correct endpoint.

Reproducing the Issue

To better understand the issue, let’s reproduce it in a controlled environment. Here’s an example of a simple React application that demonstrates this problem:

// app.js
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={() => <h1>Home Page</h1>} />
        <Route path="/about" exact component={() => <h1>About Page</h1>} />
        <Route path="*" component={() => <h1>Not Found</h1>} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

Deploy this application on AKS, and then try accessing it via the Service IP. You’ll notice that the routing doesn’t work as expected, and you’ll be stuck with a 404 error or a blank page.

Solving the Issue

The solution to this problem involves a combination of configuring the React application, the Service, and the Ingress Controller. Let’s break it down into manageable chunks:

Step 1: Configure the React Application

In your React application, you need to specify the base URL for the router. Update your `app.js` file to include the following code:

// app.js
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter basename="/app">
      <Switch>
        <Route path="/" exact component={() => <h1>Home Page</h1>} />
        <Route path="/about" exact component={() => <h1>About Page</h1>} />
        <Route path="*" component={() => <h1>Not Found</h1>} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

In this example, we’ve added the `basename` prop to the `BrowserRouter` component and set it to `/app`. This tells the router to use `/app` as the base URL for all routes.

Step 2: Configure the Service

Next, you need to update the Service configuration to include the correct port and path. Here’s an example of a Service YAML file:

apiVersion: v1
kind: Service
metadata:
  name: react-app-svc
spec:
  selector:
    app: react-app
  ports:
  - name: http
    port: 80
    targetPort: 3000
  type: ClusterIP

In this example, we’ve specified the port as 80 and the target port as 3000, which is the default port for a React application.

Step 3: Configure the Ingress Controller

Finally, you need to configure the Ingress Controller to route traffic to the correct endpoint. Here’s an example of an Ingress YAML file:

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: react-app-ingress
spec:
  rules:
  - host: &
lt;your-domain>
    http:
      paths:
      - path: /
        backend:
          serviceName: react-app-svc
          servicePort: 80

In this example, we’ve specified the host as `` and the path as `/`. We’ve also referenced the `react-app-svc` Service and port 80 as the backend.

Conclusion

And that’s it! By following these steps, you should now be able to access your React application via the Service IP without any routing issues. Remember to update your React application, Service, and Ingress Controller configurations to reflect the changes.

By understanding the root cause of the issue and applying the correct solutions, you can overcome this common problem and provide a seamless user experience for your React application on AKS.

Keyword	Description
K8s	Kubernetes, a container orchestration system
AKS	Azure Kubernetes Service, a managed container service
React	A JavaScript library for building user interfaces
SVC IP	Service IP, the IP address of a Kubernetes Service
Localhost IP	The IP address of the local machine (127.0.0.1)
Ingress Controller	A Kubernetes resource that manages incoming HTTP requests

Got questions or need further assistance? Feel free to ask in the comments section below!

• Official Kubernetes Documentation: https://kubernetes.io/docs/home/
• Official React Documentation: https://reactjs.org/docs/getting-started.html
• Azure Kubernetes Service (AKS) Documentation: https://docs.microsoft.com/en-us/azure/aks/

Happy coding, and may the routing be with you!

Frequently Asked Questions

Get rid of the frustration and confusion around Kubernetes (k8s) AKS React routing issues!