时间戳

首页 > 解决方案 > ReactJS 应用程序使用 Kubernetes Ingress 显示白屏

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

问题描述

我正在尝试处理入口路由以使用一个公共 IP 地址部署多个 ReactJS 应用程序。使用以下路由文件提供的 SpeedyMath 应用程序https://github.com/pankajladhar/speedy-math.git尝试访问此应用程序，因为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

在这里感谢您的帮助

标签： reactjskubernetes-ingress

解决方案

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

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

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

推荐阅读