Kubernetes 中的 React App 未正确连接

Question

我是 Kubernetes 的新手，我正在尝试将 React 应用程序部署到我的集群。 以下是基本信息：

• Docker 桌面，单节点 Kubernetes 集群
• React 开发前端，暴露 3000 端口
• Node.js/Express 后端，暴露 8080 端口
• NGINX 入口 Controller，在“localhost:3000”上为我的 React 前端提供服务，并将我的 Fetch API 请求（获取（“localhost:3000”）到后端（获取（“localhost:3000/”）

打开 React 应用程序时遇到问题。 Ingress Controller 正确路由到应用程序，但未加载 3 个包（bundle.js、main.chink.js，我不记得的第三个）。 我收到以下错误：

GET http://localhost/static/js/main.chunk.js net::ERR_ABORTED 404 (Not Found) ingress (one example)

我明白为什么会发生这个错误。 Ingress Controller 正确路由流量，但仅加载 index.html 文件。 在此文件中，调用了 3 个未加载的脚本（指捆绑包）。 我理解错误，文件没有发送到浏览器，所以 index.html 文件无法加载它们，但不知道如何修复它。 有没有人有什么建议？ de 然后从 Docker 集线器中拉出。 有人知道可能的解决方案是什么吗？ 例如，部署 build/ 文件夹（使用“npm run build”构建 React 应用程序）是否解决了这个问题？ 我是否必须在 Dockerfile 中使用 nginx 来构建容器？

入口.yaml

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: titanic-ingress
  #labels:
      #name: titanic-ingress
spec:
  ingressClassName: nginx
  rules:
  - host: localhost
    http:
      paths:
      - path: /
        pathType: Exact
        backend:
          service:
            name: titanicfrontendservice
            port:
              number: 3000
      - path: /api
        pathType: Exact
        backend:
          service:
            name: titanicbackendservice
            port:
              number: 8080

入口 controller 部署 yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: nginx-ingress
  namespace: nginx-ingress
spec:
  replicas: 1
  selector:
    matchLabels:
      app: nginx-ingress
  template:
    metadata:
      labels:
        app: nginx-ingress
     #annotations:
       #prometheus.io/scrape: "true"
       #prometheus.io/port: "9113"
    spec:
      serviceAccountName: nginx-ingress
      containers:
      - image: nginx/nginx-ingress:1.10.0
        imagePullPolicy: IfNotPresent
        name: nginx-ingress
        ports:
        - name: http
          containerPort: 80
        - name: https
          containerPort: 443
        - name: readiness-port
          containerPort: 8081
       #- name: prometheus
         #containerPort: 9113
        readinessProbe:
          httpGet:
            path: /nginx-ready
            port: readiness-port
          periodSeconds: 1
        securityContext:
          allowPrivilegeEscalation: true
          runAsUser: 101 #nginx
          capabilities:
            drop:
            - ALL
            add:
            - NET_BIND_SERVICE
        env:
        - name: POD_NAMESPACE
          valueFrom:
            fieldRef:
              fieldPath: metadata.namespace
        - name: POD_NAME
          valueFrom:
            fieldRef:
              fieldPath: metadata.name
        args:
          - -nginx-configmaps=$(POD_NAMESPACE)/nginx-config
          - -default-server-tls-secret=$(POD_NAMESPACE)/default-server-secret
          #- -v=3 # Enables extensive logging. Useful for troubleshooting.
          - -report-ingress-status
          - -external-service=nginx-ingress
         #- -enable-prometheus-metrics
         #- -global-configuration=$(POD_NAMESPACE)/nginx-configuration

入口 controller 服务 yaml

apiVersion: v1
kind: Service
metadata:
  name: nginx-ingress
  namespace: nginx-ingress
spec:
  externalTrafficPolicy: Local
  type: LoadBalancer
  ports:
  - port: 3000
    targetPort: 80
    protocol: TCP
    name: http
  - port: 443
    targetPort: 443
    protocol: TCP
    name: https
  selector:
    app: nginx-ingress

Answer 1

您的 ingress.yaml 的问题是您的 ui 的路由应该是 /* 并放置在后端路由下方。 此外，请检查您的 API 路由

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: titanic-ingress
  #labels:
      #name: titanic-ingress
spec:
  ingressClassName: nginx
  rules:
  - host: localhost
    http:
      paths:
      - path: /api/*
        pathType: Exact
        backend:
          service:
            name: titanicbackendservice
            port:
              number: 8080
      - path: /*
        pathType: Exact
        backend:
          service:
            name: titanicfrontendservice
            port:
              number: 3000

Answer 2

TL;博士

将/api和/ path 中的pathType切换为Prefix 。

我在下面包含了一些带有固定Ingress资源的解释。

---

出于复制目的，我使用了您在另一个问题中提供的titanic清单：

• Github.com：频闪：泰坦尼克号全栈

您的配置问题在于： pathType 。

使用带有pathType: Exact的Ingress资源向我显示空白页。

使用pathType: Prefix修改Ingress资源解决了这个问题。

边注！

信息： “你能在泰坦尼克号沉没中幸存下来吗？” 显示。

确切的Ingress配置应如下所示：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: titanic-ingress
spec:
  ingressClassName: nginx
  rules:
  - host: localhost
    http:
      paths:
      - path: /
        pathType: Prefix # <-- IMPORTANT
        backend:
          service:
            name: titanicfrontendservice
            port:
              number: 3000
      - path: /api
        pathType: Prefix # <-- IMPORTANT
        backend:
          service:
            name: titanicbackendservice
            port:
              number: 8080

---

为什么我认为它发生了？

引用官方文档：

路径类型

Ingress 中的每条路径都需要具有相应的路径类型。 不包含显式 pathType 的路径将无法通过验证。 支持三种路径类型：

• ImplementationSpecific ：使用此路径类型，匹配取决于 IngressClass。 实现可以将其视为单独的 pathType 或将其视为 Prefix 或 Exact 路径类型。

• Exact ：与 URL 路径完全匹配并且区分大小写。

• Prefix ：基于由 / 分割的 URL 路径前缀匹配。 匹配区分大小写，并在逐个元素的路径元素基础上完成。 路径元素是指由 / 分隔符分割的路径中的标签列表。 如果每个 p 都是请求路径的 p 的元素前缀，则请求是路径 p 的匹配项。

-- Kubernetes.io：文档：概念：服务网络：入口：路径类型（有一些关于如何处理路径匹配的示例）

Ingress controller被迫仅匹配/路径离开 rest 的依赖项（除了index.html其他路径，例如/super.jpg和 jpg/ /folder/awesome.jpg 404

边注！

您可以通过生成 nginx Pod并将示例文件放入其中来测试自己的这种行为。 使用/和pathType: Exact应用Ingress资源后，您将无法通过Ingress controller 请求它，但您可以在集群中访问它们。

---

我鼓励您检查其他资源：

• Kubernetes.io：文档：概念：服务网络：入口
• Kubernetes.github.io：入口 ZEE434023CF89D7DFB21F63D64F0 路径匹配指南：