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

Question

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

Kube.netes 部署：

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

Kube.netes 入口

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: /$2
    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

Kube.netes 服务：

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-kube.netes-test

要重现该问题，只需将这些 Kube.netes 资源应用到集群并尝试通过浏览器通过入口（http://host/subpath）访问 web 应用程序。 我这里部署了资源： 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 入口 controller： https://kube.netes.github.io/ingress-nginx/

Answer 1

我认为你在这里有两个问题：

• 您将内容类型设置为 javascript，因此浏览器无法正确解释 html。 Fe 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 加载包，因为它是一个绝对链接。