K
Q

ReactJS app displays whitescreen using Kubernetes Ingress

10/14/2019

I am trying to get hands around ingress routing to deploy multiple ReactJS application using one public ip address. Using SpeedyMath app available at https://github.com/pankajladhar/speedy-math.git with below routing file trying to access this app as http://myapps.centralus.cloudapp.azure.com/speedymath displays a white screen. From browser logs what i see is http://myapps.centralus.cloudapp.azure.com/static/js/bundle.js net::ERR_ABORTED 404 (Not Found). I notice index.html getting loaded but errors "Failed to load resource" at line <script type="text/javascript" src="/static/js/bundle.js"></script></body>

ingress-routing.yml:

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: myapps-ingress
  annotations:
    nginx.org/server-snippet: "proxy_ssl_verify off;"
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
  - http:
      paths:
      - path: /speedymath
        backend:
          serviceName: speedymath-service
          servicePort: 80

The same application loads properly when the routing file is updated for path from "/speedymath" to "/". But this does not help me in building different routing rules based on incoming url

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: myapps-ingress
  annotations:
    nginx.org/server-snippet: "proxy_ssl_verify off;"
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
  - http:
      paths:
      - path: /
        backend:
          serviceName: speedymath-service
          servicePort: 80

Appreciate your help here

-- Revanth
kubernetes-ingress
reactjs

Similar Questions

Gitlab - Job with "docker in docker" service results in "Cannot connect to the Docker daemon"
Passing Connection String As Environment Variable in yaml file
Deriving FROM existing Dockerfile + setting USER to non-root
Envoy Proxy on Kubernetes gives 503
Docker for Windows stuck at “Kubernetes is Starting”
Prometheus rate function output to whole number
Drop or rename scrape_config label
kubernetes securitycontext runAsNonRoot Not working

3 Answers

10/14/2019

The last time I did this my annotation was a bit different. That's the only difference I see between what worked for me.

annotations:
    ingress.kubernetes.io/rewrite-target: /
-- Jake Luby
Source: StackOverflow
10/15/2019

I've managed to reproduce the issue in the similar user case with Nginx Ingress controller 0.25.1 version:

$ kubectl exec -it $(kubectl get po -l component=controller|awk '{print $1}'| sed '1d') -- /nginx-ingress-controller

A few concerns that might help you to resolve a problem:

FYI, since 0.22.0 version of Nginx Ingress was announced, some significant changes in Rewrite annotations being propagated that are not compatible with previous configurations, read more here.

If you are using more latest Ingress controller release, then you would probably need to slightly improve the origin Ingress definition, according to the documentation:

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: myapps-ingress
  annotations:
    nginx.org/server-snippet: "proxy_ssl_verify off;"
    nginx.ingress.kubernetes.io/rewrite-target: /$2
spec:
  rules:
  - http:
      paths:
      - path: /speedymath(/|$)(.*)
        backend:
          serviceName: speedymath-service
          servicePort: 80

Afterwards, you might be able to reach the application endpoint, however I have added Trailing slash in my target URL, instructing Nginx engine to properly serve some static content; looking at your URL:

http://myapps.centralus.cloudapp.azure.com/speedymath/

Following this discussion, you can even redirect all requests to a non trailing location, adjusting appropriate Configuration snippet annotation to the source Ingress resource:

nginx.ingress.kubernetes.io/configuration-snippet: |
  rewrite ^(/speedymath)$ $1/ permanent;
-- mk_sta
Source: StackOverflow
10/17/2019

My issue got resolved with couple of things:

  1. As @mk_sta stated, path as path: /speedymath(/|$)(.*) and nginx.ingress.kubernetes.io/rewrite-target: /$2

  2. To handle the context issue with ReactJS app, updated package.json to include "homepage": ".". This will update all links and paths to refer from current directory.

-- Revanth
Source: StackOverflow