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 路徑匹配指南：