VueJS 应用程序未在 kubernetes 中加载 js 文件答案

【问题标题】：VueJS app not loading js files in kubernetesVueJS 应用程序未在 kubernetes 中加载 js 文件
【发布时间】：2022-10-17 15:07:45
【问题描述】：

我有一个 VueJS 应用程序用完了 kubernetes 中的 Docker 映像。一旦有多个副本/ pod，客户端就无法加载应用程序 - 许多（但不是全部）加载文件的调用返回 404。

我认为这是因为它们被发送到与最初为请求提供服务的 pod 不同的 pod。

如何解决这个问题？

这是我的设置：

VueJS 应用程序 (node.js-Server) 从 Kubernetes 中的 Docker 映像运行。
上面的 kubernetes 中的服务和端点。
Kubernetes 中的 nginx 入口作为下一个外层（见下文）。
haproxy 防火墙，以便将 myapp.mydomain.com/ 路由到 k8s 上的入口。

这是一个返回 404 的示例调用：获取https://myapp.mydomain.com/js/chunk-d18c0136.7a3f0664.js

这是我的服务规范：

apiVersion: v1
kind: Service
metadata:
  name: ${CI_PROJECT_NAME}-${CI_BUILD_REF_SLUG_SHORT}
  labels:
    app: ${CI_ENVIRONMENT_SLUG}
spec:
  ports:
    - port: 80
      targetPort: 8080
      protocol: TCP
      name: ${CI_PROJECT_NAME}-${CI_BUILD_REF_SLUG}
  selector:
    app: ${CI_ENVIRONMENT_SLUG}

这是我的 nginx 入口规范：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ${CI_PROJECT_NAME}-${CI_BUILD_REF_SLUG_SHORT}
  labels:
    app: ${CI_ENVIRONMENT_SLUG}
  annotations:
    kubernetes.io/ingress.class: "nginx"
    nginx.ingress.kubernetes.io/affinity: "cookie"
    nginx.ingress.kubernetes.io/proxy-connect-timeout: "30"
    nginx.ingress.kubernetes.io/proxy-send-timeout: "3600"
    nginx.ingress.kubernetes.io/proxy-read-timeout: "3600"
spec:
  defaultBackend:
    service:
      name: ${CI_PROJECT_NAME}-${CI_BUILD_REF_SLUG_SHORT}
      port:
        number: 80
  rules:
    - host: ${CI_APPLICATION_HOST}
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: ${CI_PROJECT_NAME}-${CI_BUILD_REF_SLUG_SHORT}
                port:
                  number: 80

作为一种解决方法，我们将防火墙配置为只与一个 pod 直接对话，或者只运行一个副本。

在 nginx 入口上设置会话粘性“cookie”不起作用。

【问题讨论】：

标签： node.js vue.js nginx kubernetes

【解决方案1】：

对不起，这是一个完全的红鲱鱼。

最后，问题是外部代理路由中的一个错字——六个节点中只有两个被正确配置并且可以访问。这就是“大多数”请求返回 404 的原因——找不到节点。

【讨论】：