Spring Boot App with Angular and Keycloak Ingress

6/23/2019

i would like to run an Spring Boot APP with an Angular Frontend using Keycloak as an IDP inside a Kubernetes Cluster.

Running the App with HTTPs works fine:

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: my-app-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    certmanager.k8s.io/cluster-issuer: letsencrypt-prod
    nginx.ingress.kubernetes.io/rewrite-target: /$1
    nginx.ingress.kubernetes.io/x-forwarded-prefix: "/"
spec:
  tls:
    - hosts:
        - myapp.northeurope.cloudapp.azure.com
      secretName: tls-secret
  rules:
    - host: myapp.northeurope.cloudapp.azure.com
      http:
        paths:
          - path: /?(.*)
            backend:
              serviceName: my-service
              servicePort: 8080

But if Keycloak comes in, i am stuck

First ide was to change the path for the app:

metadata:
  name: my-app-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    certmanager.k8s.io/cluster-issuer: letsencrypt-prod
    nginx.ingress.kubernetes.io/rewrite-target: /$1
    nginx.ingress.kubernetes.io/x-forwarded-prefix: "/app"
spec:
  tls:
    - hosts:
        - myapp.northeurope.cloudapp.azure.com
      secretName: tls-secret
  rules:
    - host: myapp.northeurope.cloudapp.azure.com
      http:
        paths:
          - path: /app/?(.*)
            backend:
              serviceName: my-service
              servicePort: 8080

But then the loading of the angular libraries does not work cause the app try to load them from / instead of /app.

Same thing for the IDP:

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: keycloak-ingress
  annotations:
    kubernetes.io/tls-acme: "true"
    kubernetes.io/ingress.class: nginx
    certmanager.k8s.io/cluster-issuer: letsencrypt-prod
    ingress.kubernetes.io/force-ssl-redirect: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /$1
    nginx.ingress.kubernetes.io/x-forwarded-prefix: "/idp"
spec:
  tls:
    - hosts:
        - myapp.northeurope.cloudapp.azure.com
      secretName: tls-secret
  rules:
    - host: myapp.northeurope.cloudapp.azure.com
      http:
        paths:
          - path: /idp/?(.*)
            backend:
              serviceName: keycloak-http
              servicePort: 80

Any help which settings to be used is welcome :-)

Kind Regards

-- IEE1394
angular
kubernetes
kubernetes-ingress
nginx-ingress
spring-boot

1 Answer

6/24/2019

we run in a similar issue when changing paths to our Angular-Apps. And i need to tell you that there is no Ingress-Specific solution for you problem.

We solved this by running a Script when starting the Container with our compiled Angular App that changes the value of <base href="/"> to the value of an environment variable.

The script looked similar to this:

sed -i.bak 's#<base href="/">#<base href="'$BASE_HREF'/">#g' /usr/share/nginx/html/index.html
nginx -g "daemon off;"

This would replace the default base-href with a value contained in $BASE_HREF and then start nginx which deliveres our compiled application. Important Note: The Path in <base href="..."> must end with an /. Take care of this when setting the environment variable.

For running KeyCloack you can try the approach described in this StackOverflow-Post and try to set the Environment-Variable PROXY_ADDRESS_FORWARDING=true inside the KeyClock-Container.

-- Alex
Source: StackOverflow