How to configure Kafka UI with login authentication and external access via domain (Docker + NGINX)

[JackHeroes]

Hi everyone!

I'm trying to set up Kafka UI (kafbat/kafka-ui:latest) using Docker, and I need help configuring it to:

1. Be accessible from the internet via my domain (using NGINX as a reverse proxy);
2. Require a username and password to access (via LOGIN_FORM authentication).
   I’m using three Kafka brokers running in containers (KRaft mode, no Zookeeper), plus Kafka UI, an NGINX reverse proxy, and a Django backend app.

Here’s my docker-compose.yml:

`

services:
kafka-broker-1:
image: apache/kafka:latest
container_name: kafka-broker-1
environment:
KAFKA_NODE_ID: 1
KAFKA_PROCESS_ROLES: broker,controller
KAFKA_LISTENERS: CONTROLLER://:9091,PLAINTEXT://:9092
KAFKA_ADVERTISED_LISTENERS: PLAINTEXT://kafka-broker-1:9092
KAFKA_CONTROLLER_LISTENER_NAMES: CONTROLLER
KAFKA_LISTENER_SECURITY_PROTOCOL_MAP: CONTROLLER:PLAINTEXT,PLAINTEXT:PLAINTEXT
KAFKA_CONTROLLER_QUORUM_VOTERS: 1@kafka-broker-1:9091,2@kafka-broker-2:9191,3@kafka-broker-3:9291
KAFKA_OFFSETS_TOPIC_REPLICATION_FACTOR: 3
KAFKA_TRANSACTION_STATE_LOG_REPLICATION_FACTOR: 3
KAFKA_TRANSACTION_STATE_LOG_MIN_ISR: 2
KAFKA_GROUP_INITIAL_REBALANCE_DELAY_MS: 0
KAFKA_NUM_PARTITIONS: 3
ALLOW_PLAINTEXT_LISTENER: "yes"
KAFKA_ALLOW_EVERYONE_IF_NO_ACL_FOUND: "true"
volumes:
- kafka1_data:/var/lib/kafka/data
restart: unless-stopped

kafka-broker-2:
    image: apache/kafka:latest
    container_name: kafka-broker-2
    environment:
        KAFKA_NODE_ID: 2
        KAFKA_PROCESS_ROLES: broker,controller
        KAFKA_LISTENERS: CONTROLLER://:9191,PLAINTEXT://:9192
        KAFKA_ADVERTISED_LISTENERS: PLAINTEXT://kafka-broker-2:9192
        KAFKA_CONTROLLER_LISTENER_NAMES: CONTROLLER
        KAFKA_LISTENER_SECURITY_PROTOCOL_MAP: CONTROLLER:PLAINTEXT,PLAINTEXT:PLAINTEXT
        KAFKA_CONTROLLER_QUORUM_VOTERS: 1@kafka-broker-1:9091,2@kafka-broker-2:9191,3@kafka-broker-3:9291
        KAFKA_OFFSETS_TOPIC_REPLICATION_FACTOR: 3
        KAFKA_TRANSACTION_STATE_LOG_REPLICATION_FACTOR: 3
        KAFKA_TRANSACTION_STATE_LOG_MIN_ISR: 2
        KAFKA_GROUP_INITIAL_REBALANCE_DELAY_MS: 0
        KAFKA_NUM_PARTITIONS: 3
        ALLOW_PLAINTEXT_LISTENER: "yes"
        KAFKA_ALLOW_EVERYONE_IF_NO_ACL_FOUND: "true"
    volumes:
        - kafka2_data:/var/lib/kafka/data
    restart: unless-stopped

kafka-broker-3:
    image: apache/kafka:latest
    container_name: kafka-broker-3
    environment:
        KAFKA_NODE_ID: 3
        KAFKA_PROCESS_ROLES: broker,controller
        KAFKA_LISTENERS: CONTROLLER://:9291,PLAINTEXT://:9292
        KAFKA_ADVERTISED_LISTENERS: PLAINTEXT://kafka-broker-3:9292
        KAFKA_CONTROLLER_LISTENER_NAMES: CONTROLLER
        KAFKA_LISTENER_SECURITY_PROTOCOL_MAP: CONTROLLER:PLAINTEXT,PLAINTEXT:PLAINTEXT
        KAFKA_CONTROLLER_QUORUM_VOTERS: 1@kafka-broker-1:9091,2@kafka-broker-2:9191,3@kafka-broker-3:9291
        KAFKA_OFFSETS_TOPIC_REPLICATION_FACTOR: 3
        KAFKA_TRANSACTION_STATE_LOG_REPLICATION_FACTOR: 3
        KAFKA_TRANSACTION_STATE_LOG_MIN_ISR: 2
        KAFKA_GROUP_INITIAL_REBALANCE_DELAY_MS: 0
        KAFKA_NUM_PARTITIONS: 3
        ALLOW_PLAINTEXT_LISTENER: "yes"
        KAFKA_ALLOW_EVERYONE_IF_NO_ACL_FOUND: "true"
    volumes:
        - kafka3_data:/var/lib/kafka/data
    restart: unless-stopped

kafka-ui:
    image: kafbat/kafka-ui:latest
    container_name: kafka-ui
    environment:
        DYNAMIC_CONFIG_ENABLED: 'true'
        KAFKA_CLUSTERS_0_NAME: datagrapho
        KAFKA_CLUSTERS_0_BOOTSTRAPSERVERS: kafka-broker-1:9092,kafka-broker-2:9192,kafka-broker-3:9292
        AUTH_TYPE: LOGIN_FORM
        SPRING_SECURITY_USER_NAME: User
        SPRING_SECURITY_USER_PASSWORD: Password
        SERVER_SERVLET_CONTEXT_PATH: /kafka-ui
    depends_on:
        - kafka-broker-1
        - kafka-broker-2
        - kafka-broker-3
    restart: unless-stopped

nginx:
    image: nginx:latest
    container_name: datagrapho_nginx
    volumes:
        - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
        - ./DataGrapho_Back/staticfiles:/staticfiles
    ports:
        - "80:80"
    depends_on:
        - backend_wsgi
    restart: unless-stopped

backend_wsgi:
    build:
        context: ./DataGrapho_Back
        dockerfile: docker/prod/dockerfile.wsgi
    container_name: datagrapho_backend_wsgi
    env_file:
        - ./DataGrapho_Back/docker/prod/.env
    volumes:
        - ./DataGrapho_Back:/app
    depends_on:
        - kafka-broker-1
        - kafka-broker-2
        - kafka-broker-3
    restart: unless-stopped

consumers:
    build:
        context: ./DataGrapho_Back
        dockerfile: api/consumers/dockerfile
    container_name: datagrapho_consumer
    env_file:
        - ./DataGrapho_Back/docker/prod/.env
    volumes:
        - ./DataGrapho_Back:/app
    depends_on:
        - backend_wsgi
        - kafka-broker-1
        - kafka-broker-2
        - kafka-broker-3
    restart: unless-stopped

volumes:
kafka1_data:
kafka2_data:
kafka3_data:

`

And my nginx.conf looks like this:

`

events {}

http {
include mime.types;
default_type application/octet-stream;

server {
    listen 80;
    server_name example.com;

    location /static/ {
        alias /staticfiles/;
    }

    location /wh/ {
        proxy_pass http://datagrapho_backend_wsgi:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /kafka-ui/ {
        proxy_pass http://kafka-ui:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

}

`

My question:

1. How should I properly configure SERVER_SERVLET_CONTEXT_PATH so that Kafka UI works under /kafka-ui/?
2. How do I serve Kafka UI behind an NGINX reverse proxy using Docker?
3. What should my nginx.conf look like to make http://example.com/kafka-ui/ work? Right now, the UI doesn’t load at that path.

Thanks in advance!

[Haarolean]

Hello, your case should be covered in this docker compose example: https://github.com/kafbat/kafka-ui/blob/main/documentation/compose/nginx-proxy.yaml
Let me know if you have any futher questions

[JackHeroes]

Thanks for the quick reply!

Yes, I had already checked that example (nginx-proxy.yaml) and I did configure the SERVER_SERVLET_CONTEXT_PATH as shown there. But I’m still confused about how the port mappings work between Docker and NGINX.

In my case:

NGINX is running inside a Docker container with ports 80:80

Kafka UI is also running in Docker and (as far as I know) exposes port 8080 internally

What confuses me is why in your example:

NGINX uses 8080:80, and

Kafka UI uses 8082:8080

I don't fully understand how those ports relate to each other and to the reverse proxy behavior.

My Django backend is working fine behind NGINX at http://example.com/wh/, but no matter what I try, Kafka UI doesn’t show up at http://example.com/kafka-ui/.

I'm not sure what I'm doing wrong — maybe it’s something in my nginx.conf or in the Docker networking.

If you could take a quick look at my docker-compose.yml and nginx.conf above, I’d really appreciate it. Thank you so much in advance!

[Haarolean]

8080 is the port nginx listens on. When you access localhost:8080/kafka-ui you'll get redirected to :8080 (via this config entry). 8082 isn't in play here, it's an alternative port you can access k-ui without nginx in the middle.