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

IT技术 reactjs kubernetes-ingress
2021-05-04 19:46:41

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

在此感谢您的帮助

4个回答

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

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

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

我已经设法在类似的用户案例中使用Nginx Ingress 控制器 0.25.1版本重现了这个问题

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

一些可能有助于您解决问题的问题:

仅供参考,自0.22.0Nginx Ingress 版本发布以来正在传播的重写注释中的一些重大更改与以前的配置不兼容,请在此处阅读更多内容

如果您使用的是最新的 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 中添加了尾部斜杠,指示 Nginx 引擎正确提供一些静态内容;查看您的网址:

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

在此讨论之后,您甚至可以将所有请求重定向到非尾随位置,将适当的配置片段注释调整到源Ingress资源:

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

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

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

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

这可以通过在您的部署(或 pod)yaml 中添加一个环境变量 ( PUBLIC_URL)来解决,该变量分配有您在 ingress 上指定的相同路径(\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

希望这可以帮助其他人!