Angular auf dem Raspberry Pi
Zuvor hatte ich den Raspberry Pi nur für Windows 10 IoT mit UWP Entwicklung gesehen. Das lag mit unter daran, dass ich nicht viel Zeit hatte, um mir anderes technologisches Wissen anzueignen. Doch gerade habe ich auf Grund der aktuelle Lage um Corona und in Kurzarbeit habe ich Zeit mich mit anderen Technologien zu beschäftigen. Darunter fiel auch das Front-End Webapplikationsframework Angular.
Bei Windows 10 IoT auf dem Raspberry Pi beschränkte es sich leider nur auf eine aktiv laufende Anwendung, was dazu führte eine monolithische Anwendungen zu schreiben. Und zum derzeitigen Zeitpunkt gibt's auf Windows 10 IoT und Docker nur für x86/x64 Systemen, also leider noch ein Grund, diese Kombination aufzugeben.
Mit etwas Weitblick, fand ich heraus, dass Angular auch in einem Docker Container laufen kann und somit dann auch auf einem Raspberry Pi.
Voraussetzung
- Raspberry Pi 2, 3 oder 4
- Betriebssystem Raspbian (geht auch mit anderen Linux Betriebssystem für Raspberry Pi)
- Docker Account
Anforderung
Eine Angular Hello World Anwendung in einem Docker Container starten auf einem Raspberry Pi.
Hello Angular Image
Zunächst brauchen wir eine Angular Projekt. Wenn ihr bereits eins habt, verwendet es einfach. Das Einzige, was hinzugefügt wird, ist die Datei ‚Dockerfile‘ im Root Verzeichnis des Projektes. In meinem Beispiel hat das Projekt den Namen (das auch der Namen, den das Root-Verzeichnis trägt) "ExampleHelloDocker", der in der Dockerfile auch so stehen sollte.
FROM arm32v7/alpine
COPY /dist/ExampleHelloDocker /usr/share/nginx/html
EXPOSE 80
Nun brauchen wir die Eingabeaufforderung oder das Terminal aus Visual Studio Code. Wechselt dazu in das Projekt Root Verzeichnis und erstellt ein Angular Build.
ng build --prod
Und im Anschluss das Docker Image erstellen. Da hier keine Großbuchstaben verwendet werden, habe ich für die Lesbarkeit Bindestriche eingesetzt.
docker build -t example-hello-docker .
Taggen und pushen
Im nächsten Schritt wird vor dem Pushen auf Docker-Hub, das Image getagt. Dazu braucht ihr euren Benutzernamen von Docker.
docker tag example-hello-docker:latest <username>/example-hello-docker:latest
Anschließend kann es nun auf Docker-Hub hochgeladen werden.
docker push <username>/example-hello-docker:latest
Fertig. Nun sollte euer Image auf Docker-Hub zu sehen sein. Falls ihr euer Image nicht öffentlich bereit stellen wollt, sollte ihr auf Docker-Hub das Image im Repositories auf private umstellen.
Image ziehen und starten
Ab hier sollte das ziehen und starten wie bei jeder anderen Docker Image laufen.
docker pull <username>/example-hello-docker:latest Um die Docker Image ID zu erhalten, schauen wir, ob das Image nun vorliegt.
docker image ls
Und nun heißt es endlich starten!!
Portnummer 5000 ist die, unter der die Angular Anwendung vom Netzwerk aus zu erreichbar ist.
Hier könnt ihr auch eine andere Portnummer festlegen.
docker run --publish 5000:80 -t <image id>
Oder besser, wenn man den Raspberry pi wieder einschaltet, auch der Container weiter läuft.
docker run --publish 5000:80 -t --restart always <image id>
Lokal auf dem Raspberry Pi sollte nun die Angular Webanwendung im Browser mit der Adresse http://localhost:5000 erreichbar sein. Und natürlich über das Netzwerk von einem anderen Rechner mit der IP Adresse und dem gesetzten Port.
HINWEIS: Seit Januar 2021 musste ich feststellen, dass das erstellen des Docker Image von einem Windows System in der Form wie beschrieben nicht funktionieren könnte. Alternativ kann die gebaute Angular Anwendung auf Rasbian kopiert werden und dort mit dem Docker Build Befehle das Image erstellt werden.
Das Thema ist bereits mehrmals auf Stackoverflow vorhanden, aber wenig detailiert. Deshalb habe ich selbst einen Eintrag geschrieben, dass praktisch die Beschreibung dieses Blog-Post in Kurzform und auf Englisch wiedergibt.
Kommentare