Blog

Einrichten eines Servers für die cloudbasierte Webentwicklung (1/4)

Veröffentlicht vor 6 Monaten

authelia
code-server
docker
grafana
traefik
Illustration zum Blogeintrag

Überblick über die Serie

Aufgrund der Länge und Komplexität habe ich die gesamte Einrichtung des Servers auf vier Blogeinträge aufgeteilt.

Motivation

Mit dem Projekt code-server wurde eine Möglichkeit geschaffen, eine Instanz von VSCode auf einem Server auszuführen und über alle handelsüblichen Browser aufzurufen. Somit kann eine cloudbasierte Entwicklungsumgebung eingerichtet werden, die für alle Geräte und Betriebssysteme konsistent ist.

Dies bietet natürlich einen großen Vorteil, wenn man als Entwickler zum Beispiel regelmäßig zwischen Büro und Homeoffice wechselt oder mit mehreren Geräten arbeitet. Eine solche cloudbasierte Entwicklungsumgebung lässt sich sogar vom Tablet oder Smartphone aus nutzen. Dabei sind alle Einstellungen auf dem Server gespeichert und auch der aktuelle Stand (z.B. geöffnete Dateien oder ungespeicherte Änderungen) bleiben auch beim Wechsel des Endgeräts erhalten.

Darüber hinaus können aufwändige Tests, Compilations oder andere Aufgaben auf dem Server ausgeführt und somit zum Beispiel die Rechenleistung eines Laptops entlastet werden, was natürlich wiederum die Laptopbatterie entlastet. Zudem kann der Development Server in der Cloud beliebig skaliert werden, so dass zum Beispiel auch Anwendungen mit Künstlicher Intelligenz ausgeführt werden können. Und wenn man schon einen Server hat, kann dieser natürlich auch für andere Dinge verwendet werden (z.B. Datenbanken, Vorschau für Kunden, …).

Grundüberlegungen zum Setup

Mit dem fertig eingerichteten Server sollen die folgenden Anforderungen erfüllt werden:

  • Die Instanz von code-server soll über das Internet von jedem Endgerät aus erreichbar sein, jedoch über eine 2-Faktor- Authentifizierung gesichert sein.
  • Die verschiedenen Applikation sollten mit wenigen Handgriffen gestartet werden können und der gesamte Software- Stack sollte so einfach wie möglich auf einen anderen Server übertragen werden können.
  • Änderungen und Aktualisierungen sollten mit wenigen Handgriffen vorgenommen werden können.
  • Ich möchte die Auslastung des Servers überwachen können.

Eine einfache Installation von Code-Server, wie sie von den Entwicklern vorgeschlagen wird, würde diese Anforderungen nicht erfüllen. Vielmehr wird noch zusätzliche Software benötigt, die zum Beispiel den Zugriff auf die einzelnen Dienste ermöglicht (reverse proxy) und gegen unberechtigte Nutzer absichert (Authentifizierung).

Die wohl einfachste Möglichkeit, einen solch komplexen Software- Stack auf einem Server zu betreiben, sind Docker- Container, die mit docker-compose konfiguriert werden. Für docker-compose wird die Konfiguration aller benötigten Container in einer yaml- Datei gespeichert und der ganze Stack kann dann mit einem einzigen Befehl gestartet und gestoppt werden.

Nun benötigen aber auch die meisten anderen Dienste Konfigurationsdateien, die dem jeweiligen Container meistens über ein Docker-Volume zur Verfügung gestellt werden. Dies hat allerdings den Nachteil, dass bei Änderungen direkt auf den Server zugegriffen werden muss entweder um die Änderungen direkt vorzunehmen oder um die neueste Version des git- repos von Github herunterzuladen. Vorher muss natürlich der gesamte Stack gestoppt und hinterher wieder gestartet werden. Das klingt nach einer Menge Handarbeit müsste doch eigentlich auch automatisiert werden können.

Und tatsächlich gibt es mit Watchtower einen docker- basierten Dienst, der in regelmäßigen Abständen prüft, ob für alle aktuell laufenden Container ein aktualisiertes Image existiert und dieses gegebenenfalls automatisch herunterlädt und den Container mit dem neuen Image neu startet. Damit bei diesem Prozess aber auch die Konfigurationsdateien aktualisiert werden, müssen diese bereits Teil des Images sein. Dies kann erreicht werden, indem in einem Build-Prozess mittels Github Actions die jeweiligen Base Images um die Konfigurationsdateien erweitert werden und die neuen Images dann in der Github Container Registry bereitgestellt werden.

Mit dem beschriebenen Vorgehen kann erreicht werden, dass es bei Änderungen an den bestehenden Containern ausreicht, ein neues Commit auf Github zu pushen. Alle weiteren Schritte laufen vollständig automatisch ab. Nur wenn neue Container hinzugefügt werden sollen, muss noch direkt auf den Server zugegriffen werden, um den Stack zu stoppen, den neuesten Commit von Github herunterzuladen und den Stack wieder zu starten.

Voraussetzungen zum Einrichten des Servers

Um den nachfolgenden Schritten dieses Tutorials folgen zu können und ein ähnliches Setup einzurichten, werden die folgenden Dinge benötigt:

  • Server mit statischer IP-Adresse und SSH- Zugang Das Kernstück des gesamten Projekts ist natürlich ein Server. Dieser muss für die grundlegenden Anforderungen nicht besonders leistungsfähig sein, ein VPS (Virtual Private Server) mit 2 Prozessorkernen und 8GB Arbeitsspeicher reicht vollkommen aus. Ich nutze zum Beispiel einen VPS 1000 G9 von netcup für nur 6,00 € pro Monat.
  • Eigene Domain Für die Erreichbarkeit der verschiedenen Dienste wird eine eigene Domain benötigt, für die auch die DNS- Einstellungen bearbeitet werden können.
  • Github- Account Für die Erstellung und Bearbeitung der Konfigurationsdateien wird natürlich ein Text- Editor genutzt. Meine Empfehlung hier ist VSCode, da der fertige Server am Ende ja auch eine VSCode- Instanz bereitstellt. Zum Speichern und Verwalten der gesamten Server- Konfiguration nutzen wir ein git- Repository auf Github. Außerdem nutzen wir wie oben beschrieben Github Actions, um unsere Docker- Container zu erstellen, und die Github Container Registry, um diese Container bereitzustellen. FÜr die benötigten Funktionen reicht ein kostenloser Github- Account aus.
  • Text- Editor

Nach diesen Vorüberlegungen werden wir uns im nächsten Teil des Tutorials mit der Bereitstellung der benötigten Infrastruktur (reverse proxy, Authentifizierung, watchtower) beschäftigen.

Teil 2: Einrichtung der Infrastruktur