Multiple vue.js containers in kubernetes and terraform setup returns 404 or 502

8/25/2020

I have an Ingress / Terraform / NGINX / Kubernetes setup that has issues with properly redirecting, it's currently serving a vue.js frontend and a .NET Core backend, both of these work online. However, when adding another Vue.JS instance it doesn't seem to properly redirect to said URL.

My terraform setup

resource "kubernetes_ingress" "ingress" {
    metadata {
     name      = "ingress"
     namespace = var.namespace_name
     annotations = {
       "nginx.ingress.kubernetes.io/force-ssl-redirect" = true
       "nginx.ingress.kubernetes.io/from-to-www-redirect" = true
       "nginx.ingress.kubernetes.io/ssl-redirect": true
       "kubernetes.io/ingress.class": "nginx"
     }
    }

spec {
 tls {
  hosts = [var.domain_name, "*.${var.domain_name}"]
  secret_name = "tls-secret"
 }
rule {
  host = var.domain_name
  http {
    path {
      path = "/"
      backend {
        service_name = "frontend"
        service_port = 80
      }
    }

    path {
      path = "/api"
      backend {
        service_name = "api"
        service_port = 80
      }
    }

    path {
      path = "/backend/*"
      backend {
        service_name = "backend"
        service_port = 80
      }
    }

    path {
      path = "/payment/*"
      backend {
        service_name = "payment"
        service_port = 80
      }
    }

  }
}
}

wait_for_load_balancer = true
}

When running kubectl describe the following is returned

Name:             ingress
Namespace:        [redacted]
Address:          [ip-address]
Default backend:  default-http-backend:80 (<none>)
TLS:
 tls-secret terminates [url-name],*.[url-name]
Rules:
  Host            Path  Backends
  ----            ----  --------
  [url-name]
              /           frontend:80 (10.244.0.97:80)
              /api        api:80 (10.244.0.121:80)
              /backend/   backend:80 (10.244.0.96:80)
              /payment/   payment:80 (10.244.0.32:80)
  Annotations:
    nginx.ingress.kubernetes.io/force-ssl-redirect:    true
    nginx.ingress.kubernetes.io/from-to-www-redirect:  true
    nginx.ingress.kubernetes.io/ssl-redirect:          true

I was thinking I might be missing proxy settings but I have no idea how to redirect that. Furthermore, this entire solution is deployed with CI and to digital ocean. I've tried various other configurations such as removing the asterix in the paths /backend/ but this didn't change anything.

In annotations adding nginx.ingress.kubernetes.io/rewrite-target: / only broke the /api URL and didn't fix the others.

EDIT* adding "kubernetes.io/ingress.class": "nginx" like @Vitalii mentioned unfortunately did not fix the issue. Question has been updated for completeness sake

-- RDAxRoadkill
docker
kubernetes
kubernetes-ingress
terraform
vue.js

1 Answer

8/27/2020

Adding nginx.ingress.kubernetes.io/rewrite-target: / was actually part of the solution, it did break the .NET C# API which made me ask a separate question that can be found here for consistency & future searches sake the solution I've used was as follows. apart from adding the rewrite target line in my annotations changing the API path from

 path {
  path = "/api(.*)"
  backend {
    service_name = "api"
    service_port = 80
  }
}

Into

     path {
      path = "/(api.*)"
      backend {
        service_name = "olc-api"
        service_port = 80
      }
    }

With this it matches the /api to my .NET core app, instead of it trying to find a URL within the vue.js container(s)

-- RDAxRoadkill
Source: StackOverflow