為什么在 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 加載包，因為它是一個絕對鏈接。