Gestern hat plot.ly Dash veröffentlicht. Ein Open-Source-Framework zum Erstellen von interaktiven Daten-Dashboards. Ich finde es spannend, weil es mehrere Tools kombiniert, mit denen ich bereits gearbeitet habe und gerade bei kleinen Projekten helfen kann, schneller zu Ergebnissen zu kommen. Plot.ly arbeitet mit Python und nutzt im Frontend D3. Dash setzt auf Flask und React.
Dash hat direkt funktioniert, weshalb ich ein kleines Testprojekt damit umsetzen wollte. Da ich beim Deployen dann doch auf ein paar Schwierigkeiten gestoßen bin, wollte ich hier festhalten, wie ich vorgegangen bin. Für mein späteres ich und falls es sonst jemanden interessiert. Meine Admin-Fähigkeiten beschränken sich auf ein Minimum. Die Notizen sollten daher nicht als Anleitung gesehen werden. Falls ihr Fehler oder problematische Dinge seht, bitte ein Kommentar schreiben.
Code auf Webspace laden
Ich mag uberspace. Deshalb habe ich es auch für dieses Experiment genutzt.
Als Code-Grundlage habe ich die dash-hello-world-Demo genutzt. Im Ordner html habe ich einen Unterordner Projekte und darin dash2 angelegt. Kompletter Pfad: ‚/var/www/virtual/dash/html/projekte/dash2‘. Dorthin habe ich den hello-world-Code gepackt. Die app.py habe ich umgeschrieben, sodass einige Packages aus der requirements.txt überflüssig wurden. Da ich es aber erst später gemacht habe, habe ich dennoch alle installiert. Klüger wäre es das vorher zu machen. Man kann aber auch später Packages wieder löschen oder die virtuelle Umgebung neu machen. Meine app.py hat man Ende so ausgesehen: https://gist.github.com/lucahammer/4f138ed70381b1733679dd39e81be1fa.
Virtuelle Umgebung erstellen
Da die hello-world-Demo auf Python2.7 bestand, habe ich den Versuch mit 3.6 abgebrochen und eine 2.7 Umgebung erstellt. Also in den zuvor erstellten Ordner wechseln und mit folgenden Befehlen die Umgebung erstellen und betreten.
virtualenv venv
source venv/bin/activate
Details im uberspace-wiki.
Packages installieren
Nun werden die benötigten Packages installiert. Wie oben erwähnt, könnt ihr die requirements.txt an eure Bedürfnisse anpassen. Ich habe sie erstmal so gelassen.
pip install -r 'requirements.txt'
Erster Test
Um zu sehen, ob der Code grundsätzlich funktioniert habe ich den den Development-Server mit dem Befehl python app.py gestartet. (Alles im venv). Da dieser standardmäßig über Port 8050 startet, habe ich den Port zuerst in der app.py angepasst. Wie ihr einen freien Port bei uberspace findet, ist ebenfalls im Wiki ausführlich beschrieben.
Damit die Website von außen erreichbar ist, muss der Port weitergeleitet werden. Dazu habe ich in der .htaccess (im Ordner /html) folgende Anweisungen genutzt:
RewriteEngine On
RewriteRule ^(.*) http://localhost:62799/$1 [P]
Der Port muss natürlich entsprechend dem in app.py genutzten ausgetauscht werden.
Wenn alles geklappt hat, kann man die Website nun über die uberspace-Adresse aufrufen.
Umsteigen auf gunicorn
Da der Entwickler auf reddit auf gunicorn verwies und ich mich erinnerte, damit bei Django auf uberspace schon einmal gearbeitet zu haben, habe ich mich entschieden es damit zu versuchen.
# gunicorn installieren
pip install gunicorn
# Testen ob es funktioniert
gunicorn --error-logfile - --reload --chdir /home/$USER/html/projekte/dash2 --bind 127.0.0.1:62799 app:server
# mit ctrl+c abbrechen
# über daemon-tools dauerhaft einrichten
test -d ~/service || uberspace-setup-svscan
uberspace-setup-service gunicorn gunicorn --error-logfile - --reload --chdir /home/$USER/html/projekte/dash2 --bind 127.0.0.1:62799 app:server
Auch hier wieder: 62799 durch den vorher gewählten Port austauschen.
Die .htaccess könnte nach dem Vorschlag von uberspace angepasst werden:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteBase /
RewriteRule ^(.*) http://127.0.0.1:62798/$1 [P]
RequestHeader set X-Forwarded-Proto https env=HTTPS
Fertig
Nun sollte Dash laufen. Wenn Änderungen am Server vorgenommen werden, kann der Daemon mit dem reload-Befehl angestoßen werden:
svc -h ~/service/gunicorn
My first interactive scatter plot with Dash: https://t.co/9lxLpgsIa9
Twitter accounts I follow and how active thy are (tweets, faves). pic.twitter.com/YCEfSrEbpP— Luca Hammer (@luca) June 23, 2017
