skip to Main Content

I make an nginx ingress for my front-end in vuejs.

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: vuejs-ingress
  namespace: default
  annotations:
    cert-manager.io/cluster-issuer: letsencrypt-prod
    nginx.ingress.kubernetes.io/from-to-www-redirect: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /$1
spec:
  ingressClassName: nginx
  rules:
  - host: example.com
    http:
      paths:
        - path: /(.*)
          pathType: Prefix
          backend:
            service:
              name: vuejs-service
              port:
                number: 80
  tls:
  - hosts:
    - example.com
    secretName: ingress-cert-vuejs  

When I make a request like example.com/login, I got a 404 not found.
I think, I’ve setup my ingress correctly.
Here the describe of my ingress :

Name:             vuejs-ingress
Labels:           app.kubernetes.io/instance=vuejs
Namespace:        default
Address:          192.168.1.24
Ingress Class:    nginx
Default backend:  <default>
TLS:
  ingress-cert-vuejs terminates example.com
Rules:
  Host                         Path  Backends
  ----                         ----  --------
  timemanagement.raveleau.net  
                               /(.*)   vuejs-service:80 (10.244.3.98:80)
Annotations:                   cert-manager.io/cluster-issuer: letsencrypt-prod
                               nginx.ingress.kubernetes.io/from-to-www-redirect: true
                               nginx.ingress.kubernetes.io/rewrite-target: /$1
Events:
  Type    Reason  Age                   From                      Message
  ----    ------  ----                  ----                      -------
  Normal  Sync    3m7s (x2 over 3m41s)  nginx-ingress-controller  Scheduled for sync

Thank you for your help.

2

Answers


  1. Chosen as BEST ANSWER

    So after some research, I found the solution. I need to create a nginx conf and add it to my docker container.

    events {
        worker_connections 1024;
    }
    http {
      server {
        listen 80;
        server_name localhost;
        include /etc/nginx/mime.types;
        location / {
            root /usr/share/nginx/html;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
      }
    }
    

  2. The nginx.ingress.kubernetes.io/rewrite-target: /$1 annotation rewrites the URL path to be passed to your backend service. Ensure that your app (served by vuejs-service) correctly handles these rewritten paths. If your app expects the full path (like /login), the rewrite might be causing issues. Try removing the rewrite-target annotation to pass the full path to your application.

    Check the router mode. If you’re using Vue Router in history mode, your server needs to be configured to respond to all paths with the index.html file. Make sure your app is set up for this, and your backend server (vuejs-service) is configured accordingly.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search