Docker

Whiteboard für Online-Trainings in Nextcloud nutzen

Kollaboratives Zeichnen in Echtzeit! So integriert man das offizielle Whiteboard in Nextcloud.

Michael Meister

28. Aug. 2025 • 5 min read

Da mich einige Teilnehmer gefragt haben, wie ich die Zeichnungen in meinen Präsentationen und Online-Sessions erstelle, habe ich beschlossen, dieses Thema in einem Artikel ausführlich vorzustellen.

Die Integration eines kollaborativen Whiteboards in die eigene Nextcloud-Instanz hebt die Teamarbeit auf ein neues Niveau. Mit der offiziellen Whiteboard-App, die auf dem beliebten Open-Source-Tool Excalidraw basiert, lassen sich Ideen skizzieren, Prozesse planen und Konzepte in Echtzeit visualisieren.
Damit die volle Funktionalität – insbesondere die Live-Kollaboration – genutzt werden kann, ist neben der App-Installation auch die Einrichtung eines dedizierten Backend-Services erforderlich, was sich elegant über Docker umsetzen lässt.

Vorgeschichte

Ich habe bereits über meine Nextcloud berichtet und die zusätzlichen Apps, die ich installiert habe.

Die Architektur: Warum ein separates Backend?

Bevor es an die Konfiguration geht, ist ein kurzer Blick auf die Architektur hilfreich, um das Zusammenspiel der Komponenten zu verstehen. Die Whiteboard-App verfolgt einen Client-First-Ansatz. Das bedeutet, die eigentliche Zeichenfunktionalität läuft vollständig im Browser des Benutzers. Änderungen werden zunächst lokal gespeichert, was eine hohe Performance und sogar eine eingeschränkte Offline-Fähigkeit gewährleistet.

Für die Echtzeit-Kollaboration – also wenn mehrere Benutzer gleichzeitig an einem Whiteboard arbeiten und die Änderungen der anderen sofort sehen sollen – wird jedoch eine zentrale Kommunikationsstelle benötigt. Genau hier kommt das separate Backend ins Spiel: Es fungiert als WebSocket-Server.

Man kann sich das wie eine Telefonkonferenz vorstellen: Jeder Teilnehmer (Browser) wählt sich bei einer zentralen Vermittlungsstelle (dem WebSocket-Server) ein. Diese Vermittlungsstelle sorgt dafür, dass alles, was eine Person sagt (zeichnet), sofort an alle anderen Teilnehmer übertragen wird. Die fertige Zeichnung selbst, also das Ergebnis der Zusammenarbeit, wird am Ende sicher als Datei in Nextcloud gespeichert. Das Backend ist also nur für den flüchtigen Live-Austausch zuständig, nicht für die dauerhafte Datenspeicherung.

Die folgenden Schritte basieren auf meinem Framework, auf dem auch alle anderen Web-Services von mir aufgebaut sind:

Schritt 1: Das Whiteboard-Backend mit Docker Compose starten

Der empfohlene und einfachste Weg, den WebSocket-Server bereitzustellen, ist die Verwendung von Docker. Die folgende docker-compose.yml-Konfiguration startet den Dienst und sorgt dafür, dass er nur lokal erreichbar und für die Zusammenarbeit mit der Nextcloud-Instanz vorbereitet ist. Zum besseren Verständnis sind hier sowohl Nextcloud als auch whiteboard gelistet:

# Zuerst der alte Nextcloud-Container:
  nextcloud:
    image: nextcloud:31
    container_name: nextcloud
    hostname: cloud.your_domain.de
      - PUID=1000
      - PGID=1000
      - TZ=Europe/Berlin
    restart: unless-stopped
    volumes:
      - ./nextcloud/data:/var/www/html
      - ./nextcloud/log:/var/log/
      - type: tmpfs
        target: /tmp:exec
    networks:
      - web
      - backend
    depends_on:
      - nginx-proxy-manager
      - nextcloud-db
    expose:
      - "80"
    environment:
#      - NEXTCLOUD_ADMIN_USER=michael
#      - NEXTCLOUD_ADMIN_PASSWORD=!
      - NEXTCLOUD_HOSTNAME=cloud.your_domain.de
      - NEXTCLOUD_TRUSTED_DOMAINS=cloud.your_domain.de
      - TRUSTED_PROXIES=172.22.0.0/12
#      - MYSQL_HOST=nextcloud-db
#      - MYSQL_DATABASE=nextcloud
#      - MYSQL_USER=nextcloud
#      - MYSQL_PASSWORD=db_password_please_change
      - PHP_MEMORY_LIMIT=512M
      - PHP_OPCACHE_MEMORY_CONSUMPTION=512
      - SMTP_HOST=mail.your_domain.de
      - SMTP_SECURE=STARTTLS
      - SMTP_PORT=465
      - SMTP_AUTHTYPE=LOGIN
      - SMTP_NAME=root@your_domain.de
      - SMTP_PASSWORD=your_passwd!
      - MAIL_FROM_ADDRESS=root
      - MAIL_DOMAIN=your_domain.de
    labels:
      - com.centurylinklabs.watchtower.monitor-only=true

  # running
  nextcloud-db:
    image: mariadb:11.4
    container_name: nextcloud-db
    command: --transaction-isolation=READ-COMMITTED --log-bin=mysqld-bin --binlog-format=ROW
    restart: unless-stopped
    volumes:
      - ./nextcloud-db/mysql:/var/lib/mysql
      - ./nextcloud-db/conf.d:/etc/mysql/mariadb.conf.d
    environment:
      - MYSQL_ROOT_PASSWORD=change_msql_rootpw
      - MYSQL_USER=nextcloud
      - MYSQL_PASSWORD=db_password_please_change
      - MYSQL_DATABASE=nextcloud
    labels:
      - com.centurylinklabs.watchtower.monitor-only=true
    networks:
      - backend

  nextcloud-redis:
    image: redis:alpine
    container_name: nextcloud-redis
    hostname: nextcloud-redis
    restart: always
    command: redis-server --requirepass db_password_please_change
    environment:
      - REDIS_PASSWORD=db_password_please_change
    volumes:
      - ./nextcloud_redis/config:/data
    networks:
      - backend

### Das hier ist die neue App:
  whiteboard:
    image: ghcr.io/nextcloud-releases/whiteboard:release
    container_name: whiteboard
    restart: unless-stopped
    expose:
      - 3002
    networks:
      - web
    environment:
      - NEXTCLOUD_URL=https://cloud.your_domain.de
      - JWT_SECRET_KEY=random_string_must_be_the_same_as_in_app_settings
    labels:
      - "com.centurylinklabs.watchtower.enable=true"

Wichtige Hinweise zur Konfiguration:

expose: - 3002: Dadurch ist der Dienst nicht direkt aus dem Internet erreichbar. Der Zugriff wird im nächsten Schritt sicher über den bereits vorhandenen Reverse Proxy (z. B. Nginx) geregelt.
JWT_SECRET_KEY: Dies ist ein gemeinsames Geheimnis zwischen dem Nextcloud-Server und dem Whiteboard-Backend. Es dient der Authentifizierung. Hier sollte unbedingt eine lange, zufällig generierte Zeichenkette verwendet werden.

Schritt 2: Den Reverse Proxy für WebSockets konfigurieren

Damit die Browser der Benutzer den WebSocket-Server erreichen können, muss der Reverse Proxy so konfiguriert werden, dass er Anfragen an den eben gestarteten Docker-Container weiterleitet. Im Nginx-Proxy-Manager trage ich daher folgendes ein:

Schritt 3: Die Whiteboard-App in Nextcloud einrichten

Die Vorarbeiten sind abgeschlossen, nun folgt die finale Konfiguration in Nextcloud selbst.

App installieren: Falls noch nicht geschehen, muss die App "Whiteboard" aus dem Nextcloud App Store (Kategorie "Büro & Text") installiert und aktiviert werden.

Backend verbinden: Anschließend wird in den Administrationseinstellungen zum neuen Menüpunkt Whiteboard navigiert.
- URL des Kollaborations-Servers: Hier wird die vollständige URL eingetragen, unter der das Backend über den Reverse Proxy erreichbar ist. In unserem Beispiel: https://wb.your_domain.de
- JWT Secret Key: In dieses Feld wird exakt dieselbe geheime Zeichenkette kopiert, die auch in der docker-compose.yml für JWT_SECRET_KEY verwendet wurde.

Nach dem Speichern ist die Einrichtung abgeschlossen. In der "Dateien"-App kann nun über das +-Menü ein "Neues Whiteboard" erstellt und direkt kollaborativ genutzt werden.

Man kann aus einer großen Bibliothek Icons einfügen, aber auch eigene PNG-Images nutzen. Normalerweise ergeben sich dann Diagramme, wie dieses:

Ich mag jedoch lieber einen Look, der an eine Zeichnung auf einem Whiteboard erinnert (daher wohl auch der Name 😄). Dies läßt sich mit einem Klick erreichen:

Neue Anwendungsmöglichkeiten

Wenn ich Schulungen über Nextcloud Talk durchführe, nutze ich in der Regel ein Whiteboard im Browser im Vollbildmodus. Dasselbe Whiteboard öffne ich zusätzlich auf meinem alten Galaxy-Tab S6 Lite. So kann ich bei Bedarf den Bildschirm mit der Vollbild-Session teilen, während ich parallel mit dem Stift auf dem Tablet zeichne. Da die Skizzen in Echtzeit auch im Browserfenster erscheinen, sehen die Teilnehmenden die Inhalte sofort und können selbst entscheiden, wo sie den geteilten Bereich einblenden. Das sorgt für deutlich mehr Flexibilität in den Online-Trainings.

Fazit

Die offizielle Whiteboard-App, angetrieben von Excalidraw, ist eine mächtige Ergänzung für jede Nextcloud-Installation. Mit einem schlanken Docker-Container für das Echtzeit-Backend und einer kleinen Anpassung am Reverse Proxy lässt sich die volle kollaborative Funktionalität mit überschaubarem Aufwand einrichten. So steht dem gemeinsamen, kreativen Brainstorming direkt in der sicheren, eigenen Cloud nichts mehr im Wege.