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

【问题标题】：ReactJS app displays whitescreen using Kubernetes IngressReactJS 应用程序使用 Kubernetes Ingress 显示白屏
【发布时间】：2019-10-14 19:40:16
【问题描述】：

我正在尝试处理入口路由以使用一个公共 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

在这里感谢您的帮助

【问题讨论】：

stackoverflow.com/help/someone-answers

标签： reactjs kubernetes-ingress

【解决方案1】：

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

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

【讨论】：

能否详细说明"homepage"。我面临着完全相同的问题。
我试过你的方法，但没有奏效！我仍然需要附加 / 才能访问该应用
@deepdive 在您的应用程序的 package.json 中具有“homepage”属性，您正在设置环境变量“PUBLIC_URL”，您有很多方法可以做到这一点。如果你把“。”它将采用相对路径。这解决了我的部分问题，但不是全部。

【解决方案2】：

我已经设法在 Nginx Ingress controller 0.25.1 版本的类似用户案例中重现了该问题：

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

可能会帮助您解决问题的几个问题：

仅供参考，自从 0.22.0 版本的 Nginx Ingress 发布以来，Rewrite 注释的一些重大变化正在传播，与以前的配置不兼容，阅读更多 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: /$2
spec:
  rules:
  - http:
      paths:
      - path: /speedymath(/|$)(.*)
        backend:
          serviceName: speedymath-service
          servicePort: 80

之后，您也许可以到达应用程序端点，但是我在目标 URL 中添加了Trailing slash，指示 Nginx 引擎正确提供一些静态内容；查看您的网址：

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

按照这个discussion，您甚至可以将所有请求重定向到一个非尾随位置，调整适当的Configuration snippet 注释到源Ingress 资源：

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

【讨论】：

在 sn-p 上尝试使用正则表达式作为路径和尾部斜杠作为 url，reactapp 仍然是相同的空白屏幕
我的想法是，当使用入口路径时，reactJS 应用程序如何失去加载元素的上下文，在入口文件中提及路径是否会改变应用程序上的任何内容？比如在为页面构建 html 或将文件拉到浏览器时更改目录并查看错误的位置？
Ingress 控制器从 Ingress 读取输入并将重写规则添加到嵌套的 Nginx Pod，例如：rewrite "(?i)/speedymath(/|$)(.*)" /$2 break;，因此不应更改源应用程序的根路径。
这对我来说是一个相当新的领域，请您详细说明并帮助理解。 $2 持有什么来重写，这个参数的值是从针对路径提到的正则表达式中得到的吗？我对“nginx.ingress.kubernetes.io/rewrite-target:”的理解是，当 url 被定向到入口资源进行路由时，这个注释将决定它应该在目标主机上重定向到哪里，请纠正我。任何可以找到路径和重写之间关系的参考资料都会有很大帮助。
您可以找到here 一个很好的重写功能示例，利用捕获组的使用。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

这可以通过在部署（或 pod）yaml 中添加一个环境变量 (PUBLIC_URL) 来解决，该变量分配有您在入口指定的相同路径（在您的情况下为 \speedymath\），如下所示：

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

希望这可以帮助其他人！

【讨论】：