Vuejs into kubernetes cluster and nginx ingress returns 404 when refreshed

Question

I'm trying to run a Vue.js frontend service into nginx-ingress enabled kubernetes cluster. The application has 4 routes, /, /foo/, /bar and /about. If I access the application and refresh the page in any route besides /, I get a 404 error from nginx ingress.

I'm using kubernetes version v1.18.2 (both client and server). The cluster was created by the kind (kubernetes in docker program) and I setup the ingress following their documentation at https://kind.sigs.k8s.io/docs/user/ingress/#ingress-nginx. The example application I'm using is this one: https://github.com/ovitor/foo

Here are the deployments, services and ingress used.

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

What I'm doing wrong?

Jakub Jakub · Accepted Answer · 2020-05-21T13:04:35

I think that's because you have path only for /.

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

If you want to make it work for / /foo/ /bar and /about you would have to add additional paths.

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

OR

Use regex as mentioned in the nginx ingress documentation

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

Additionally you can take a look at rewrite annotation.

Hope this helps.

Vuejs into kubernetes cluster and nginx ingress returns 404 when refreshed

1 Answers