lagosta

Lagosta

Lagosta ist die Benutzeroberfläche für Krill.

Das Projekt verwendet Vue.js als Javascript-Framework und Element als UI-Framework.

Anforderungen

• Node.js
• Garn oder NPM

Beachten Sie, dass für Garn die Installation einer zusätzlichen Abhängigkeit erforderlich ist, während npm in node.js enthalten ist. Wenn Sie jedoch npm verwenden, sollten Sie sicherstellen, dass package-lock.json im Repository festgeschrieben wird.

Projektaufbau

Führen Sie Folgendes aus, um alle erforderlichen JS-Bibliotheken abzurufen

yarn install

oder

npm install

Ausführen eines Entwicklungsservers

Vue verwendet Webpack und Webpack-Dev-Server, um einen automatisch kompilierenden, im laufenden Betrieb nachladbaren Entwicklungsserver zu betreiben, und Krill bildet da keine Ausnahme.

Sie können den Entwicklungsserver starten, indem Sie Folgendes eingeben:

npm run serve

Die meisten Einstellungen für den Entwicklungsserver werden in der Datei /vue.config.js angegeben.

Sie können die IP-Adresse und den Port auswählen, auf denen der Krill-Entwicklungsserver ausgeführt werden soll:

    port: "3003",
    https: true

Sie können die proxy Einstellung für webpkack-dev-server verwenden, um die HTTP-Anfragen an Ihre lokale Krill-Instanz umzuleiten. Bearbeiten Sie die Datei /vue.config.js indem Sie die proxy Option angeben.

Dadurch werden die Anfragen für diesen bestimmten Endpunkt an Ihre lokale Krill-Instanz weitergeleitet. Beachten Sie, dass Sie die Endpunkte /api , /auth und /stats an Krill umleiten müssen.

Zum Beispiel:

...
  devServer : {
    // Krill proxy instance (for API calls).
    // see: https://webpack.js.org/configuration/dev-server/#devserverproxy
    proxy : {
      "/api" : { target : "https://localhost:3000" } ,
      "/auth" : { target : "https://localhost:3000" } ,
      "/stats" : { target : "https://localhost:3000" }
    } ,
...

In diesem Beispiel läuft eine lokale Krill-Instanz unter https://localhost:3000 (die Standardeinstellung in der Krill-Konfiguration).

Weitere Informationen zum Webpack-Dev-Server finden Sie hier.

Erstellen eines Builds für die Bereitstellung

Um alles im Ordner /dist zu kompilieren und zu minimieren, können Sie Folgendes ausführen:

 yarn run build

oder

 npm run build

Dadurch werden alle JS- und CSS-Dateien kompiliert und minimiert. Auch hier gilt: Da Vue Webpack verwendet, können Sie viele Einstellungen für den Build-Prozess ändern.

Siehe https://webpack.js.org/concepts/.

Weiterleiten von API-Anfragen in der Produktion

Es gibt zwei Möglichkeiten, die App in der Produktion auszuführen:

• Konfigurieren Sie Ihren Webserver so, dass er alle Aufrufe für /api , /stats und /auth an den Krill-Daemon weiterleitet.
• Verwenden Sie die bereitgestellte Datei „server.js“, um einen einfachen HTTP-Server einzurichten, der die API-Aufrufe weiterleitet (NICHT EMPFOHLEN).

Um Letzteres zu nutzen, erstellen Sie zunächst eine .env-Datei mit den Parametern, die zu Ihrer Umgebung passen

 PROXY_BASE_URL=https://your-host
SERVE_FOLDER=dist

und dann laufen

 node server.js

Erstellen in einem Docker-Container

Erstellen Sie das Docker-Image nur einmal lokal:

 docker build -t lagosta-builder .

Sobald Sie das haben, können Sie Folgendes tun:

 docker run -it --rm --name lagosta-builder -v ${PWD}:/tmp/src lagosta-builder /bin/bash
root@06a45bcc9a3e:/tmp/src# yarn install
root@06a45bcc9a3e:/tmp/src# exit

Da Ihr Docker-Image und das lokale Lagosta-Build-Verzeichnis nun bereit sind, können Sie in Zukunft yarn build einfach wie folgt ausführen:

 docker run -it --rm --name lagosta-builder -v ${PWD}:/tmp/src lagosta-builder /bin/bash
root@06a45bcc9a3e:/tmp/src# yarn build
...
 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
                                  
Done in 19.66s.

Die Ausgabe erfolgt im Ordner ${PWD}/dist auf dem Host.