Serve dockerized Keycloak static content behind NGINX

Question

I simply want to locally serve an Angular web app and dockerized Keycloak behind NGINX. The web app starts well, the following request to Keycloak returns a proper response:

http://localhost/auth/realms/my-realm/protocol/openid-connect/auth?client_id=my-client&redirect_uri=http://localhost/&state=5e576a94-c0a8-49dd-82c4-b4e78a637424&response_mode=fragment&response_type=code&scope=openid&nonce=a40ae65b-601f-4fb0-9b90-88e8b25c8328&prompt=none

Then, when I try to load the login page no resource can be found. The prefix '/auth' is not appended to the requests and for every static resource I get the following error:

The stylesheet http://localhost/resources/rw0qm/common/keycloak/web_modules/@patternfly/react-core/dist/styles/base.css was not loaded because its MIME type, “text/html”, is not “text/css”.

If I try to invoke http://localhost/auth/resources/rw0qm/common/keycloak/web_modules/@patternfly/react-core/dist/styles/base.css obviously I can fetch the css.

How can I redirect the requests to Keycloak appending 'auth' as prefix to the path?

This is how I configured the Keycloak container in the docker-compose.yaml file:

version: '3'
services:
  nodeserver:
    container_name: nodeserver
    build:
      context: ./webapp
    ports:
      - "4200:4200"
    stdin_open: true
    tty: true
    networks:
      - webapp

  keycloak:
    image: quay.io/keycloak/keycloak
    container_name: keycloak
    ports:
      - "8080:8080"
    environment:
      KEYCLOAK_USER: ${KEYCLOAK_USER}
      KEYCLOAK_PASSWORD: ${KEYCLOAK_PASSWORD}
      KEYCLOAK_DB_VENDOR: ${KEYCLOAK_DB_VENDOR}
      KEYCLOAK_DB_ADDR: ${KEYCLOAK_DB_ADDR}
      KEYCLOAK_DB_DATABASE: ${KEYCLOAK_DB_DATABASE}
      KEYCLOAK_DB_USER: ${KEYCLOAK_DB_USER}
      KEYCLOAK_DB_PASSWORD: ${KEYCLOAK_DB_PASSWORD}
      KEYCLOAK_ADMIN: admin
      KEYCLOAK_ADMIN_PASSWORD: admin
      PROXY_ADDRESS_FORWARDING: 'true'
      KC_HTTP_RELATIVE_PATH: /auth
      KC_HTTP_ENABLED: 'true'
      KC_HOSTNAME_STRICT: 'false'
      KC_HOSTNAME_STRICT_HTTPS: 'false'
      KC_PROXY: passthrough
    command: start-dev
    depends_on:
      - keycloak-db
    networks:
      - my-network

  keycloak-db:
    image: mysql
    container_name: keycloak-db
    restart: unless-stopped
    environment:
      MYSQL_ROOT_PASSWORD: ${KEYCLOAK_MYSQL_ROOT_PASSWORD}
      MYSQL_DATABASE: ${KEYCLOAK_DB_DATABASE}
      MYSQL_USER: ${KEYCLOAK_DB_USER}
      MYSQL_PASSWORD: ${KEYCLOAK_DB_PASSWORD}
    volumes:
      - ./keycloak/data:/var/lib/mysql
    networks:
      - my-network

  nginx:
    image: nginx:1.15-alpine
    container_name: nginx
    build:
      context: ./nginx
    restart: unless-stopped
    ports:
      - "80:80"
    volumes:
      - ./nginx/conf:/etc/nginx/conf.d
      - ./webapp/dist:/usr/share/nginx/html
    networks:
      - my-network

networks:
  my-network:

This is my NGINX configuration file:

server {
    listen 80;
    include /etc/nginx/mime.types;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

    # keycloak
    location /auth {
        proxy_pass http://keycloak/auth;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

I hope you can help me to solve this issue.

Serve dockerized Keycloak static content behind NGINX

0 Answers