webpack react ingress-nginx kubernetes shows Bad Gateway

Question

All the deployments are running, all the pods are healthy. ingress-nginx is running. when I run kubectl get ing :

NAME          CLASS    HOSTS       ADDRESS        PORTS   AGE
ingress-srv   <none>   myapp.com   192.168.49.2   80      13m

I set the hosts file for ingress.

this is the ingress-srv.yml

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress-srv
  annotations:
    kubernetes.io/ingress.class: "nginx"
    nginx.ingress.kubernetes.io/use-regex: "true"
spec:
  defaultBackend:
    service:
      name: nginx-ingress-default-backend
      port:
        number: 80

  rules:
    - host: myapp.com
      http:
        paths:
          - path: /posts
            pathType: Exact
            backend:
              service:
                name: query-srv
                port:
                  number: 4002
          - path: /?(.*)
            pathType: Exact // I tried "Prefix"
            backend:
              service:
                name: client-srv
                port:
                  number: 8080

the issue ingress api is not routing correctly. and react app is set up with webpack-dev-server. it's port is set to 8080. this is client-depl.yml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: client-depl
spec:
  replicas: 1
  selector:
    matchLabels:
      app: client
  template:
    metadata:
      labels:
        app: client
    spec:
      containers:
        - name: client
          image: kali/client
---
apiVersion: v1
kind: Service
metadata:
  name: client-srv
spec:
  selector:
    app: client
  ports:
    - name: client
      protocol: TCP
      port: 8080
      targetPort: 8080

webpack config for client:

module.exports = {
  mode: "development",
  entry: ["regenerator-runtime/runtime", "./index.js"],
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "main-bundle.js",
    publicPath: "/",
  },
  module: {
    rules: [{ test: /\.js$/, loader: "babel-loader", exclude: /node_modules/ }],
  },
  devtool: "eval-cheap-source-map",
  devServer: {
    historyApiFallback: true,
    contentBase: path.resolve(__dirname, "public"),
    overlay: true,
  },
};

Answer 1

First a word a caution: The webpack dev server is not intended to be used to serve the react app in production. You might want to investigate an alternative like nginx.

You get an error of BadGateway from your ingress. That means that the ingress recognizes the configuration, but can not reach the real service. Usually this is caused by a problem of the port mapping, but since you stated that you run the dev server with port 8080 and configured that in the kubernetes services as well, it should be fine.

I noticed that your deployment does not declare the port, this should be fixed:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: client-depl
spec:
  replicas: 1
  selector:
    matchLabels:
      app: client
  template:
    metadata:
      labels:
        app: client
    spec:
      containers:
        - name: client
          image: kali/client
          ports:
          - containerPort: 8080

But there is one more thing to consider when listening for connections beside the port: The network interface to use. The webpack dev server is preconfigured to listen only on the loopback (localhost) interface and to not be available externally. It is a dev server after all.

This can be changed using a different listen address, either in the webpack configuration or on the command line:

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0'
  }
};

CLI: webpack serve --host 0.0.0.0

Answer 2

Because you are using pathType: Exact in your ingress definiton and exact expects that exact path like https://<url>//?(.*). You need to change it to pathType: Prefix ıf you are willing to use prefix /?(.*) to match and route with urls such as http://<url>/<sample>

Also you can check path types in official documentation