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

Question

我正在尝试使用一个 public 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>

行出现错误 "Failed to load resource"

入口-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

当为从“/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

上次我这样做时，我的注释有点不同。这是我看到的对我有用的唯一区别。

annotations:
    ingress.kubernetes.io/rewrite-target: /

Answer 2

我已经成功地在 Nginx Ingress controller 0.25.1 版本的类似用户案例中重现了这个问题：

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

可能会帮助您解决问题的一些顾虑：

仅供参考，自从 0.22.0 版本的 Nginx Ingress 发布以来，Rewrite annotations being propagated that are not compatible with previous configurations, read more here 中发生了一些重大变化。

如果您使用的是最新的 Ingress 控制器版本，那么您可能需要根据文档稍微改进原始 Ingress 定义：

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

之后，您可能能够到达应用程序端点，但是我在我的目标 URL 中添加了 Trailing slash，指示 Nginx 引擎正确地提供一些静态内容；看着你的 URL:

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

在源 Ingress 资源的此 discussion, you can even redirect all requests to a non trailing location, adjusting appropriate Configuration snippet 注释之后：

nginx.ingress.kubernetes.io/configuration-snippet: |
  rewrite ^(/speedymath)$ / permanent;

Answer 3

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

如@mk_sta所述，路径为path: /speedymath(/|$)(.*)和nginx.ingress.kubernetes.io/rewrite-target: /
为了处理 ReactJS 应用程序的上下文问题，更新了 package.json 以包含 "homepage": "."。这将更新所有链接和路径以从当前目录引用。

Answer 4

我也遇到了这个问题。这是因为您在入口中指定了路径（在您的情况下 speedymath），但反应应用程序将尝试访问根路径。

这可以通过在部署（或 pod）yaml 中添加一个环境变量 (PUBLIC_URL) 来解决像这样：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: myapp
  labels:
    app: myapp
spec:
  replicas: 1
  selector:
    matchLabels:
      app: myapp
  template:
    metadata:
      labels:
        app: myapp
    spec:
      containers:
      - name: myapp
        env:
        - name: PUBLIC_URL
          value: "/<MY_INGRESS_PATH>/"
        image: myapp/image:latest
        ports:
        - containerPort: 80

希望这对其他人有帮助！

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

ReactJS app displays whitescreen using Kubernetes Ingress

reactjs

kubernetes-ingress