Vuejs 進入 kubernetes 集群和 nginx 入口刷新時返回 404

Question

我正在嘗試將 Vue.js 前端服務運行到啟用了 nginx-ingress 的 kubernetes 集群中。 該應用程序有 4 個路由，/、/foo/、/bar 和 /about。 如果我在除 / 之外的任何路由中訪問應用程序並刷新頁面，我會從 nginx 入口收到 404 錯誤。

我正在使用 kubernetes 版本 v1.18.2（客戶端和服務器）。 集群是由那種（docker 程序中的 kubernetes）創建的，我按照他們在https://kind.sigs.k8s.io/docs/user/ingress/#ingress-nginx的文檔設置了入口。 我正在使用的示例應用程序是這個： 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 入口文檔中提到的正則表達式

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 。

---

希望這可以幫助。