0

I have a Mongo, Express, React Node app that is currently deployed in a microk8s pod. I am trying to setup Ingress for the app. The express server is setup to serve the react with express.static like below

  app.use(express.static('DemoApp/build'));

  app.get('*', function(req, res, next) {
    res.sendFile(path.resolve(__dirname, 'DemoApp', 'build', 'index.html'));
  });

Everything works fine when I navigate to the ip:port of the kubernetes cluster and even everything works fine when I navigate to the FQDN for the ingress host but as soon as I add a path to the ingress then the app only shows a white screen. One note, my kubernetes node and workstations are all running inside an internal private network. I am not trying to expose anything outside of that. I have tried to follow the step provided in this post (ReactJS app displays whitescreen using Kubernetes Ingress) but it has not fixed the issue. I have the built in ingress controller enabled for microk8s.

Below is the YAML I am using for ingress that doesnt work

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: demo-ingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$1
  namespace: default
spec:
  rules:
  - host: apps.sst.com
    http:
      paths:
      - path: /demo(/|$)(.*)
        backend:
          serviceName: mern-demo
          servicePort: 4000

Here is the YAML for ingress that does work

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: demo-ingress
  annotations:
  namespace: default
spec:
  rules:
  - host: apps.sst.com
    http:
      paths:
      - path:
        backend:
          serviceName: mern-demo
          servicePort: 4000

One other note is that my app is using react router. Based on further research I am wondering if this affects things at all.

Any help would be greatly appreciated. Thanks

Jacob Peterson
  • 15
  • 3
  • How are you connecting to Ingress? How did you deploy `Nginx Ingress` I assume you did it as you are using `rewrite` which is not supported by default `Ingress`? Did you try to add second annotatin `kubernetes.io/ingress.class: "nginx"`? If you would like to connect to the ingres from outside of the cluster (browser, etc) you should use `http://127.0.0.1/mern-demo` – PjoterS Aug 26 '20 at 13:17
  • I deployed Ingress by using the command microk8s enable ingress. When I check microk8s status I see that ingress is enabled. Is there something more that I need to do besides that in the built-in microk8s ingress to enable rewrite? I have bind9 setup on my server with a A name that points to my node ip address with apps.sst.com. If I dont add any paths to the ingress configuration. I can navigate to apps.sst.com from an external workstation and I get the react app. I have now also tried adding "homepage": "." to the package.json for my react app but that didnt change anything. – Jacob Peterson Aug 26 '20 at 13:39
  • I will try adding that second annotation and see if that changes anything – Jacob Peterson Aug 26 '20 at 13:44
  • No change from adding the second annotation. If I try to go to apps.sst.com/demo on my external workstation (on the same private network) I get and error in the browser console: GET http://apps.sst.com/styles.css net::ERR_ABORTED 404 (Not Found) – Jacob Peterson Aug 26 '20 at 13:55

1 Answers1

0

rewrite-target annotation which was used in your YAML

  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$1

works only for Nginx Ingress. As you are using your default ingress it will not work. You would need to install it manually as it is mentioned here.

Now depends on your env if it's local or cloud you would need to configure MetalLB. For more details you can check this thread.

There was also similar StackOverflow question regarding Nginx Ingress issue on MicroK8s, you can read about it in this SO thread.

However, do you need to use rewrite? You cannot use multiple paths and default backend? Something like this:

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: my-ingress
spec:
  backend:
    serviceName: hello-world
    servicePort: 60000
  rules:
  - http:
      paths:
      - path: /world
        backend:
          serviceName: hello-world
          servicePort: 60000
      - path: /kube
        backend:
          serviceName: hello-kubernetes
          servicePort: 80
PjoterS
  • 12,841
  • 1
  • 22
  • 54
  • I tried it without rewrite and was getting the same white page. I did however fix the issue by using the mircok8s built in ambassador ingress. For some reason that worked fine as long as I specified the homepage in the package.json for the react client. – Jacob Peterson Sep 14 '20 at 16:59
  • I am actually still having one problem with my ingress setup. If I refresh the page then the app will not reload because it defaults back to the root path without the ingress path appended to the URL. I have tried declaring basename="/ingresspath" in the BrowserRouter tag for react router but that doesn't seem to have any effect. – Jacob Peterson Sep 16 '20 at 13:56