为什么在 Kube.netes 集群中部署时无法通过入口在浏览器中打开 React web 应用程序

Question

I have a very simple React web app (using Argon Dashboard Pro Template) deployed in a Kube.netes cluster. The Docker image of it works locally as well as in the cluster when exposing it via nodeport. But exposing it via NGINX ingress doesn't work, although the ingress itself is tested for other services and applications which expose REST endpoints. The content of the web page is not built correctly, because some js files are not found, although this is the case when they are exposed via nodeport.

Kube.netes Deployment:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-deployment
  namespace: support
  labels:
    app: react
    stage: dev
spec:
  replicas: 1
  template:
    metadata:
      labels:
        app: react
    spec:
      containers:
        - name: react
          image: fmaus/react-test:argon
          ports:
            - containerPort: 3000
              name: react-port
          imagePullPolicy: Always
      restartPolicy: Always
  selector:
    matchLabels:
      app: react

Kube.netes Ingress

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: react-ingress
  namespace: support
  annotations:
    nginx.ingress.kubernetes.io/use-regex: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /$2
    nginx.ingress.kubernetes.io/configuration-snippet: |
      proxy_set_header Accept-Encoding "";
      more_set_headers "Content-Type: text/javascript; charset=UTF-8";
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
spec:
  ingressClassName: nginx
  rules:
  - http:
      paths:
      - path: /test(/|$)(.*)
        pathType: Prefix
        backend:
          service:
            name: react-service
            port:
              number: 3000

Kube.netes Service:

apiVersion: v1
kind: Service
metadata:
  name: "react-service"
  namespace: support
spec:
  selector:
    app: "react"
  ports:
    - port: 3000
  type: ClusterIP

This Code can also be found in my GitHub Repository: https://github.com/fmaus/react-kube.netes-test

To reproduce the problem, just apply these Kube.netes resources to a cluster and try to reach the web app through a browser via ingress (http://host/subpath). I have the resources deployed here: http://c105-164.cloud.gwdg.de:31600/test The error messages can be visited in the console of the browser (F12 when using Firefox):

Loading failed for the <script> with source “http://c105-164.cloud.gwdg.de:31600/static/js/bundle.js”. subpath:61:1
Loading failed for the <script> with source “http://c105-164.cloud.gwdg.de:31600/static/js/vendors~main.chunk.js”. subpath:61:1
Loading failed for the <script> with source “http://c105-164.cloud.gwdg.de:31600/static/js/main.chunk.js”.

I use Mozilla Firefox and the following NGINX ingress controller: https://kube.netes.github.io/ingress-nginx/

Answer 1

I think you have two issues in place here:

• You set the content type to javascript, so the html is not interpreted correctly by the browser. Fe http://c105-164.cloud.gwdg.de:31600/test/index.html is shown as source
• You need to make sure the resources are referenced including the sub path, or a 404 will result

For example

<script src="/static/js/bundle.js"></script><script src="/static/js/vendors~main.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>

Needs to load the bundle from /subpath/static/js/bundle.js since it is an absolute link.