ReactJS 应用程序使用 Kubernetes Ingress 显示白屏

Question

我正在尝试使用入口路由来使用一个公共 IP 地址部署多个 ReactJS 应用程序。使用https://github.com/pankajladhar/speedy-math.git以下路由文件提供的 SpeedyMath 应用程序尝试访问此应用程序，因为http://myapps.centralus.cloudapp.azure.com/speedymath显示白屏。从浏览器日志中我看到的是http://myapps.centralus.cloudapp.azure.com/static/js/bundle.js net::ERR_ABORTED 404 (Not Found). 我注意到 index.html 已加载但错误“无法加载资源”在行<script type="text/javascript" src="/static/js/bundle.js"></script></body>

入口路由.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

当路由文件更新为从“/speedymath”到“/”的路径时，相同的应用程序会正确加载。但这并不能帮助我根据传入的 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

在这里感谢您的帮助

Answer 1

我的问题通过以下几件事得到解决：

1. 正如 @mk_sta 所说，路径为path: /speedymath(/|$)(.*)和nginx.ingress.kubernetes.io/rewrite-target: /$2

2. 为了处理 ReactJS 应用程序的上下文问题，更新了 package.json 以包含"homepage": ".". 这将更新所有链接和路径以从当前目录引用。