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

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

Die verschiedenen Parameter

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

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