UI am Raspberry konfigurieren

Hallo zusammen,
Ich möchte nun auch die Konfiguration der Benutzeroberfläche über den Raspberry laufen lassen.
Hierzu habe ich bereits Angular CLI und node.js installiert.
Ist es nun notwendig das UI_Verzeichnis auf meinen Raspberry zu verschieben,
um von dort aus mit ng serve das Projekt zu starten?

Grüße,
Dominik

Hallo,

das ist leider in der Doku noch nicht dokumentiert. ng serve ist nur für die Entwicklung. Um das Projekt zu deployen musst du es mit ng build bauen, das Ergebnis auf den Raspbi kopieren und dort mit einem Webserver (z. B. NGINX) anzeigen.

Mehr Informationen findest du hier: https://angular.io/guide/deployment

Hier als Beispiel eine NGINX-Konfiguration wie wir sie verwenden:

server {
    listen 80;
    server_name openems;
    
    # OpenEMS Web-Interface
    location / {
        root    /usr/share/openems-fems/www;
        index    index.html index.htm;

        error_page    404    200    /index.html;
    }

    # Proxy for OpenEMS REST-Api
    location /rest/ {
        proxy_pass        http://127.0.0.1:8084/rest/;

        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 https;
    }

    # Proxy for OpenEMS Websocket
    location /websocket {
        proxy_pass    http://127.0.0.1:8085;

        proxy_http_version    1.1;
        proxy_set_header    Upgrade $http_upgrade;
        proxy_set_header    Connection "upgrade";
    }
}

Hallo Stefan,

Da auf meinem Raspberry bereits Apache2 über Port 80 läuft,
habe ich einfach einen anderen Port gewählt und nun läuft das UI über NGINX.

server {
listen 70;
server_name openems;

# OpenEMS Web-Interface
location / {
    root    /usr/share/openems-fems/www;
    index    index.html index.htm;

    error_page    404    300    /index.html;
}

Das gebaute Projekt habe ich in /usr/share/openems-fems/www abgelegt.
Nun gibt es anscheinend Schwierigkeiten zwischen der Kommunkation des UI mit Edge,
da die Weboberfäche nicht geladen wird.

Anscheinend scheitert die Verbindung zum Backend.
Browser-Console:

WebSocket connection to ‘ws://localhost:8082/’ failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
websocket.ts:85 Websocket connection closed

Ja, dein Problem ist die falsche websocket URL. ws://localhost:8082 würde das Edge an deinem lokalen PC erwarten und nicht auf das Edge am Raspbi zugreifen.

Die Standard-URL wird hier festgelegt: https://github.com/OpenEMS/openems/blob/develop/ui/src/environments/environment.ts. Besser ist aber, wenn du dem Build sagst, er soll eine andere “Environment”-Datei verwenden, dann musst du die Standard-Datei nicht immer ändern. Wir bauen die UI von dieser Environment für FEMS: https://github.com/OpenEMS/openems/blob/develop/ui/src/environments/openems-edge.ts

Der Befehl zum Bauen lautet dann wie folgt:
ng build -c edge
(Konfiguriert wird das “-c” übrigens hier: https://github.com/OpenEMS/openems/blob/develop/ui/angular.json#L109)

Funktioniert nun alles wie gewünscht.

Vielen Dank!
Dominik

1 Like