Fachliche B2B Benutzeroberfläche/Frontend/User Interface (UI)

Einleitung

Wie bereits in der Einleitung erwähnt kommen zur aktuellen Applikationslandschaft neue Services bzw. Microservices hinzu. Die neue Benutzeroberfläche für die B2B by Practice, im Folgenden B2BUI genannt, ist einer davon.

Zeitplan

Ein Zeitpunkt, ab wann der Service von uns in Form von regelmäßigen Releases zur Verfügung gestellt wird, steht noch nicht fest. Ein aktueller Stand kann bereits unter Downloads bezogen werden.

Checkliste Betrieb der B2BUI mit Keycloak

  • Es existiert eine Keycloak Installation, die entsprechend dieser Anleitung konfiguriert wurde
  • In der Keycloak Installation wurde der Realm “B2B” erstellt
  • In dem Realm “B2B” wurde der Client “b2b-functional-ui” erstellt.
  • In dem Client “b2b-functional-ui” wurde die Url der B2BUI eingestellt
  • In dem Client “b2b-functional-ui” wurde Implicit Flow aktiviert
  • Die B2B liegt in der aktuellsten Version vor.

Konfiguration

Eine ausführliche Installationsanleitung findet sich hier.

Die neue UI wird als zusätzliche Microfrontends ausgeliefert, die nicht im Tomcat sondern in einem Webserver laufen.

Bei den UI Microfrontends handelt es sich um Angular Applikationen die in einem Webserver gehostet werden. Wir nutzen nginx im Docker-Image. Dieser wird über die übliche nginx.conf konfiguriert. Hier muss die Adresse der Tomcat-B2B hinterlegt werden, damit die UI auf den Tomcat zugreifen kann.

...
#user  nobody;
worker_processes  1;

events {
    worker_connections  1024;
}

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

    #access_log  logs/access.log  timing;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /B2B-UI/ {
            alias  /usr/share/nginx/html/B2B-UI/;
            try_files $uri$args $uri$args/ /B2B-UI/index.html;
        }

        location /B2B-UI/b2bNews/ {
                 proxy_pass   https://b2bbp.next-level-help.org/feed.news.xml;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html/B2B-UI;
        }

        #proxy for rest api call
        location /B2B-UI/api/ {
                proxy_pass   http://<Ihr-B2B-Tomcat-Server>/b2bbp-engine/api/;
                proxy_http_version 1.1;
                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-For $proxy_add_x_forwarded_for;
                proxy_set_header        X-Forwarded-Proto $scheme;
                proxy_cache_bypass $http_upgrade;
        }

    }

}

...

Das Deployment ist im Webserver zu hinterlegen, bei nginx z.B. im html Ordner.

Die UI Applikationen erfordern zusätzlich eine keycloak.json. Diese ist im Deployment Ordner assets/config zu hinterlegen. Diese Json kann direkt aus Keycloak exportiert werden.

Start des B2BUI Docker Image

Zum Starten des Dockerimages kann docker-compose verwendet werden. Dafür muss eine Datei docker-compose.yml zum Beispiel wie die folgende erstellt werden und die oben erläuterte Konfiguration abgelegt werden.

version: '3.3'

services:
  b2b-ui:
    image: nexus-docker.next-level-apps.com/b2b-ui:2020-08-07
    restart: always
    ports:
      #internal port depends on your nginx.conf
      - 80:80
    volumes:
      #external Folder:internal Folder
      - ./b2b-ui/nginx.conf:/etc/nginx/nginx.conf
      - ./b2b-ui/keycloak.json:/usr/share/nginx/html/B2B-UI/assets/config/keycloak.json
Für die hier genannt Version 3.3 ist eine aktuelle Version von docker-compose notwendig, siehe dazu Docker-Installation.
Sollte ein Dockercontainer einen Host und Port außerhalb von sich selbst ansprechen müssen, wie zum Beispiel die neue Oberfläche einen Keycloak-Server oder einen Tomcat, darf in der obigen Konfiguration (yaml-Dateien) nicht localhost als Host (für Tomcat oder Keycloak) angegeben werden. Siehe dazu auch der Abschnitt localhost auf der Seite über Docker.

Die verschiedenen Parameter

Parameter Wert Beschreibung
version aktuell 3.3 Die Version des docker-compose-file (Compose file format compatibility matrix)
image nexus-docker.next-level-apps.com/b2b-ui:latest Der Link und Name des Dockerimages, welches geladen werden soll. Es wird aus dem NLI-Nexus-Repository geladen. Als <VERSION> kann aktuell noch latest verwendet werden.
restart always Damit startet Docker den Caontainer automatisch neu, sollte er abgestürzt sein oder Docker selbst neugestartet werden.
ports 4040:4010 Der hintere Port ist jener, welcher in der Konfiguration application.yml innerhalb des Dockercontainers vom Service verwendet wird. Der vordere ist der Port, welchen der Container nach außen freigibt und auf den internen Port abbildet. Der zweite Wert muss also dem Wert der application.yml entsprechen.
volumes z.B. /opt/b2b/B2B-UI/B2B-UI-webapp:/config Der hintere Wert, ist das Verzeichnis, in welches die Daten aus dem vorderen Pfad gemounted werden sollen. Die Dateien im vorderen Verzeichnis werden damit innerhalb des Containers verfügbar und vom Service verwendet. Im vorne genannten Verzeichnis muss die oben beschrieben Konfiguration (yaml-Dateien) abgelegt sein.
environment / JAVA_OPTS z.B. ein Debug-Port Im Beispiel wird hier der Debug-Port im Container gesetzt, welcher unter ports auf einen externen port abgebildet wird. Hier können alle relevanten JAVA_OPTS, wie z.B. Speicheranforderungen, gesetzt werden.

Der Start

Aus dem Verzeichnis des docker-compose.yml kann mit dem Befehl docker-compose up das Image geladen und gestartet werden.

Weitere Möglichkeiten zur Handhabung des Services können sie auf der separaten Seite bzgl. Docker unter Anwendung von Docker nachlesen.

Start

Nach Ausführung vom docker-compose up wird der Container hochgefahren.

Aufruf im Browser

Die Anwendung kann nun über den in der docker-compose.yml konfigurierten externen Port aufgerufen werden.

Start des Frontends

Der Start des Frontends erfolgt durch den Start des Webservers, z.B. nginx.

Deployment in Applikationslandschaft

Sollte Interesse an gemeinsamen Tests in Ihrer Landschaft bestehen, melden sie sich gerne bei uns.

Weitere allgemeine Information zu Diensten für unsere Anwendungen: Betriebssystem Dienste

View Me   Edit Me