Deployment des UI auf Azure

1

Hallo zusammen,

Ich bin ein Neuling mit OpenEMS und versuche, das UI auf Azure als WebApp laufen zu lassen.

Zu diesem Zweck lade ich den Build des openems-backend-dev via Visual Studio Code und mithilfe der Azure Extension auf Azure hoch. Dieses Vorgehen habe ich mit einem Beispiel-Projekt von Angular selbst bereits erfolgreich erledigt. Dieses Beispiel-Projekt basiert jedoch auf dem Runtime Stack .NET. Der Anleitung “Getting Started”, Punkt 4, aus den OpenEMS Docs zufolge, sollte das UI jedoch mit dem Runtime Stack Node.js LTS verwendet werden.

Um nun den Build des OpenEMS UI zu erstellen, habe ich den Befehl ng build -c "openems, openems-backend-dev", gemäss Anleitung im README benutzt und im Visual Studio Code Terminal ausgeführt. Dabei wird jedoch der Unterordner backend im Ordner ui/target, nicht wie in der Anleitung “Build OpenEMS UI”, nicht erstellt. Hat sich im Vorgehen für diesen Build etwas geändert oder mache ich da einen Fehler?

Der Ordner ui/target wird erstellt, und wenn dieser Ordner auf Azure geladen wird, erkennt die WebApp auf Azure kein Angular Projekt und zeigt die Standardanzeige für WebApps an. Könnte dies an einem fehlerhaften Build liegen?

Beste Grüsse
Simon

2

Hallo Simon,

die Anleitung Build OpenEMS UI ist aktuell leider veraltet, nachdem wir die Build-Kommandos für den Support von OEM-Themes umgestellt haben.

Mit Azure im Speziellen habe ichl leider keine Erfahrung, aber kurz zusammengefasst müsste folgendes funktionieren:

  • Im Ordner ui den Build-Befehl ausführen: (siehe https://github.com/OpenEMS/openems/blob/develop/ui/README.md)

    • ng build -c "openems, openems-backend-dev" bzw.
    • ng build -c "openems,openems-backend-prod,prod"

  • Den Inhalt aus dem ui/target-Ordner auf den Server kopieren, z. B. in den Ordner /opt/openems-ui

  • Folgende NGINX-Konfiguration müsste dann funktionieren:

server {
        root /opt/openems-ui/;
        location / {
                index index.html;
                try_files $uri$args $uri$args/ /index.html;
        }
}

Vielleicht hilft außerdem die folgende Anleitung, die gerade im Forum gepostet wurde:

Gruß,
Stefan

3

Guten Tag Stefan,

Danke vielmals für die Antwort.

Ich habe es nun geschafft, das UI auf Azure hochzuladen und laufen zu lassen. Dabei war der Fehler nicht auf der Seite von OpenEMS, sondern bei den Einstellungen der Azure WebApp. Daher war der Build des UI nicht fehlerhaft und mit den Kommandos im Readme File ausführbar.

Vielleicht noch kurz zur Lösung des Problems. Der oben erwähnte target-Ordner wird nach dem Build auf Azure hochgeladen. Mein Fehler lag darin, dass die WebApp auf dem Runtime Stack Java beruhte. Die Lösung beruht auf dem Runtime Stack .NET Core.

Die kompatiblen Stacks können unter der WebApp → Erweiterte Tools → Runtime Versions nachgesehen werden.

Trotzdem vielen Dank und Gruss
Simon

1 Like