ReactJS应用程序使用Kubernetes Ingress显示白屏 [英] ReactJS app displays whitescreen using Kubernetes Ingress

问题描述

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

I am trying to get hands around ingress routing to deploy multiple ReactJS application using one public ip address. Using SpeedyMath app available at https://github.com/pankajladhar/speedy-math.git with below routing file trying to access this app as http://myapps.centralus.cloudapp.azure.com/speedymath displays a white screen. From browser logs what i see is http://myapps.centralus.cloudapp.azure.com/static/js/bundle.js net::ERR_ABORTED 404 (Not Found). I notice index.html getting loaded but errors "Failed to load resource" at line <script type="text/javascript" src="/static/js/bundle.js"></script></body>

ingress-routing.yml:

ingress-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构建不同的路由规则

The same application loads properly when the routing file is updated for path from "/speedymath" to "/". But this does not help me in building different routing rules based on incoming 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

在这里感谢您的帮助

推荐答案

我的问题已通过以下几项解决:

My issue got resolved with couple of things:

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

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

To handle the context issue with ReactJS app, updated package.json to include "homepage": ".". This will update all links and paths to refer from current directory.

这篇关于ReactJS应用程序使用Kubernetes Ingress显示白屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！