Vuejs 进入 kubernetes 集群和 nginx ingress returns 404 刷新时

Question

我正在尝试运行 Vue.js 前端服务到启用了 nginx-ingress 的 kubernetes 集群中。该应用程序有 4 个路由，/、/foo/、/bar 和 /about。如果我访问应用程序并在除 / 之外的任何路由中刷新页面，我会从 nginx ingress 收到 404 错误。

我使用的是 kubernetes v1.18.2 版本（客户端和服务器）。该集群是由同类创建的（docker 程序中的 kubernetes），我按照他们在 https://kind.sigs.k8s.io/docs/user/ingress/#ingress-nginx. The example application I'm using is this one: https://github.com/ovitor/foo

的文档设置了入口

这是使用的部署、服务和入口。

apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: foo
  name: foo
spec:
  replicas: 1
  selector:
    matchLabels:
      app: foo
  template:
    metadata:
      labels:
        app: foo
    spec:
      containers:
      - image: vcml10/foo:latest
        name: foo
        ports:
          - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  labels:
    app: foo
  name: foo
spec:
  ports:
  - name: http
    port: 80
    protocol: TCP
  selector:
    app: foo
---
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: foo-ingress
spec:
  rules:
    - http:
        paths:
          - path: /
            backend:
              serviceName: foo
              servicePort: 80

我做错了什么？

Answer 1

我认为那是因为你只有 /.

的路径

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: foo-ingress
spec:
  rules:
    - http:
        paths:
          - path: /
            backend:
              serviceName: foo
              servicePort: 80

如果你想让它适用于 / /foo/ /bar and /about，你必须添加额外的路径。

apiVersion: extensions/v1beta1
    kind: Ingress
    metadata:
      name: foo-ingress
    spec:
      rules:
        - http:
            paths:
              - path: /
                backend:
                  serviceName: foo
                  servicePort: 80
              - path: /foo
                backend:
                  serviceName: foo
                  servicePort: 80
              - path: /bar
                backend:
                  serviceName: foo
                  servicePort: 80
              - path: /about
                backend:
                  serviceName: foo
                  servicePort: 80

或

使用 nginx ingress 文档中提到的 regex

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: test-ingress
  annotations:
    nginx.ingress.kubernetes.io/use-regex: "true"
spec:
  rules:
  - host: test.com
    http:
      paths:
      - path: /foo/.*
        backend:
          serviceName: test
          servicePort: 80

另外你可以看看rewrite annotation。

希望对您有所帮助。

Vuejs 进入 kubernetes 集群和 nginx ingress returns 404 刷新时

Vuejs into kubernetes cluster and nginx ingress returns 404 when refreshed

nginx

vue.js

kubernetes

kubernetes-ingress

nginx-ingress