为什么在 Kubernetes 集群中部署时无法通过入口在浏览器中打开 React Web 应用程序

Question

我在 Kubernetes 集群中部署了一个非常简单的 React Web 应用程序（使用 Argon Dashboard Pro 模板）。当通过节点端口公开它时，它的 Docker 图像在本地和集群中工作。但是通过 NGINX ingress 公开它是行不通的，尽管 ingress 本身已经针对公开 REST 端点的其他服务和应用程序进行了测试。网页内容没有正确构建，因为有些js文件没有找到，虽然通过nodeport暴露出来是这样。

Kubernetes 部署：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-deployment
  namespace: support
  labels:
    app: react
    stage: dev
spec:
  replicas: 1
  template:
    metadata:
      labels:
        app: react
    spec:
      containers:
        - name: react
          image: fmaus/react-test:argon
          ports:
            - containerPort: 3000
              name: react-port
          imagePullPolicy: Always
      restartPolicy: Always
  selector:
    matchLabels:
      app: react

Kubernetes 入口

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: react-ingress
  namespace: support
  annotations:
    nginx.ingress.kubernetes.io/use-regex: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /
    nginx.ingress.kubernetes.io/configuration-snippet: |
      proxy_set_header Accept-Encoding "";
      more_set_headers "Content-Type: text/javascript; charset=UTF-8";
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
spec:
  ingressClassName: nginx
  rules:
  - http:
      paths:
      - path: /test(/|$)(.*)
        pathType: Prefix
        backend:
          service:
            name: react-service
            port:
              number: 3000

Kubernetes 服务：

apiVersion: v1
kind: Service
metadata:
  name: "react-service"
  namespace: support
spec:
  selector:
    app: "react"
  ports:
    - port: 3000
  type: ClusterIP

此代码也可以在我的 GitHub 存储库中找到：https://github.com/fmaus/react-kubernetes-test

要重现该问题，只需将这些 Kubernetes 资源应用到集群并尝试通过浏览器通过入口访问 Web 应用程序 (http:///host/subpath)。我在这里部署了资源：http://c105-164.cloud.gwdg.de:31600/test 可以在浏览器的控制台中访问错误消息（使用 Firefox 时按 F12）：

Loading failed for the <script> with source “http://c105-164.cloud.gwdg.de:31600/static/js/bundle.js”. subpath:61:1
Loading failed for the <script> with source “http://c105-164.cloud.gwdg.de:31600/static/js/vendors~main.chunk.js”. subpath:61:1
Loading failed for the <script> with source “http://c105-164.cloud.gwdg.de:31600/static/js/main.chunk.js”.

我使用 Mozilla Firefox 和以下 NGINX 入口控制器：https://kubernetes.github.io/ingress-nginx/

Answer 1

我认为您有两个问题：

您将内容类型设置为 javascript，因此浏览器无法正确解释 html。 F.e。 http://c105-164.cloud.gwdg.de:31600/test/index.html 显示为来源
您需要确保引用了包括子路径在内的资源，否则将导致 404

例如

<script src="/static/js/bundle.js"></script><script src="/static/js/vendors~main.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>

需要从 /subpath/static/js/bundle.js 加载包，因为它是绝对 link.

为什么在 Kubernetes 集群中部署时无法通过入口在浏览器中打开 React Web 应用程序

Why can I not open a React web app in a browser through an ingress when deploying it in a Kubernetes cluster

docker

reactjs

kubernetes

nginx-ingress