Wie man einen webbasierten Code-Server unter Linux einrichtet

Entdecken Sie code-server, eine selbstgehostete Lösung für die Entwicklung in VS Code im Browser – flexibel, sicher und zugänglich von überall aus.

Möchten Sie von überall aus programmieren, ohne Ihren Laptop ständig mitnehmen zu müssen? Versuchen Sie code-server, eine leistungsstarke selbstgehostete Anwendung, die die volle Funktionalität von Visual Studio Code in Ihren Webbrowser bringt. Anstatt sich auf Drittanbieter-Cloud-IDEs zu verlassen, können Sie einen code-server auf Ihrem Homelab-Server einrichten und sicher von jedem Gerät aus darauf zugreifen. Die Einrichtung von code-server sorgt für eine konsistente und zugängliche Entwicklungsumgebung, während Ihr Code und Ihre Daten unter Ihrer Kontrolle bleiben.

Was ist Code-Server und warum selbstgehostet?

Code-server führt VS Code auf einem entfernten Server aus, sodass Sie über einen Webbrowser darauf zugreifen können. Es funktioniert wie die Desktop-Version und unterstützt Auto-Vervollständigung, Debugging, Git und Erweiterungen. Es ist perfekt für schwache Geräte wie Tablets oder Chromebooks, da die gesamte Entwicklung auf dem Server erfolgt. Dadurch bleibt Ihr Setup konsistent und von überall zugänglich.

Selbsthosting gibt Ihnen die volle Kontrolle, Datenschutz und die Möglichkeit, Ihre Umgebung anzupassen – von der Verwendung Ihrer eigenen Domain bis hin zur Aktivierung von HTTPS, um Benutz Zugriffe zu verwalten und Ressourcen zu skalieren.

Gut zu wissen: Das Erlernen von Tastenkombinationen in VS Code kann Ihre Produktivität steigern. Schauen Sie sich dieses praktische Spickzettel an, um loszulegen!

Code-Server auf Linux einrichten

Die Installation von code-server ist einfach. Wir verwenden Docker für die Installation.

Führen Sie den folgenden Befehl aus, um das offizielle code-server-Image von Docker Hub herunterzuladen:

sudo docker pull codercom/code-server

So stellen Sie sicher, dass Sie die neueste Version des Images lokal verfügbar haben, bevor Sie einen Container erstellen.

Starten Sie als Nächstes einen neuen code-server-Container im Hintergrund mit einem benutzerdefinierten Passwort und persistentem Speicher:

sudo docker run -d --name code-server -p 8443:8080 -v "$HOME/code-server-data:/home/coder/project" -e PASSWORD="mein_passwort" codercom/code-server

Nach der Einrichtung des code-servers können Sie über Ihren Browser zugreifen, indem Sie http://localhost:8443 eingeben. Geben Sie das Passwort ein, das Sie im docker run Befehl festgelegt haben, und klicken Sie auf die Schaltfläche „Absenden“, um sich bei code-server anzumelden.

Mit Code-Server starten

Sobald Sie sich eingeloggt haben, sehen Sie eine Benutzeroberfläche, die der regulären Desktop-Version von VS Code ähnelt. Hier ist eine kurze Übersicht, was Sie finden werden:

Dateiexplorer

Der Explorer hilft Ihnen, durch Ihr Projekt zu navigieren. Sie können durch Ordner blättern, Dateien öffnen, neue erstellen und Ihre Projektstruktur problemlos verwalten.

Editor

Der Editor ist der mittlere Bereich und dient als Ihre Hauptarbeitsfläche. Wenn Sie eine Datei öffnen, wird sie hier angezeigt.

Hier können Sie Code schreiben, bearbeiten und formatieren, genau wie in der Desktop-Version von VS Code.

Terminal

Das Terminal befindet sich am unteren Rand des Code-Servers. Sie können es über das obere Menü „Terminal -> Neues Terminal“ oder durch Drücken von Strg + ` öffnen.

Außerdem können Sie die Tastenkombination Strg + Shift + C verwenden, um auf Ihr Terminal innerhalb des Code-Servers zuzugreifen.

Erweiterungen

Die Funktion „Erweiterungen“ macht VS Code großartig. Sie können das Register „Erweiterungen“ (Sidebar-Symbol) verwenden, um VS Code-Erweiterungen wie Linter, Farben und Sprachunterstützung zu durchsuchen, zu installieren und zu verwalten.

Sie können nach einer Erweiterung mit der Suchleiste suchen, sie dann installieren und sofort aktivieren, um neue Funktionen hinzuzufügen oder die bestehende Funktionalität zu verbessern.

Personenangepasstes browserbasiertes IDE anpassen

Jetzt können Sie code-server nach Ihren Wünschen anpassen, z.B. durch das Installieren von Erweiterungen, das Ändern von Themen, das Aktualisieren von Einstellungen oder das Modifizieren der Konfigurationsdateien. Um beispielsweise ein neues Thema auszuwählen, klicken Sie auf das Zahnrad-Symbol in der unteren linken Ecke, fahren Sie mit der Maus über Themes und wählen Sie Farbschema aus dem Menü:

Jetzt erscheint eine Liste der verfügbaren Themen. Klicken Sie auf ein Thema, um es in der Vorschau zu sehen und anzuwenden.

Darüber hinaus können Sie Ihr bevorzugtes Thema leicht über den Tab „Erweiterungen“ installieren und sofort aktivieren.

Ebenso können Sie andere Einstellungen des Code-Servers anpassen. Dazu klicken Sie einfach auf das Zahnradsymbol und wählen Einstellungen.

Von hier aus können Sie das Verhalten des Editors, die Schriftgröße, das Format und vieles mehr anpassen.

Erstes Programm in Code-Server erstellen und ausführen

Erstellen Sie eine neue Textdatei von.

das Explorer-Panel oder durch Drücken der Tastenkombination Strg + Alt + N:

Klicken Sie auf Sprache auswählen oder drücken Sie Strg + K, dann M, um die gewünschte Sprache, wie Python, auszuwählen.

Jetzt fügen Sie den folgenden Code ein, um “Willkommen bei maketecheasier.com” dreimal in der Konsole anzuzeigen:

for i in range(3):
 print("Willkommen bei maketecheasier.com")

Bevor Sie dieses Programm ausführen, stellen Sie sicher, dass Python installiert ist. Drücken Sie danach Strg + S, um der Datei einen geeigneten Namen zuzuweisen, und klicken Sie auf OK, um die Datei zu speichern:

Jetzt drücken Sie Strg + `, um das Terminal zu öffnen, und führen Sie das Python-Skript mit dem folgenden Befehl aus:

python3 mteBeispiel.py

Jetzt, wo der Code-Server auf Ihrem Linux-System läuft, sind Sie bereit, die Vorteile der browserbasierten Entwicklung voll auszuschöpfen. Sie können Ihre Umgebung mit Themen und Erweiterungen anpassen, Code in verschiedenen Programmiersprachen erstellen und ausführen und sogar den Zugriff mit einer benutzerdefinierten Domain und HTTPS sichern. Als nächsten Schritt sollten Sie in Betracht ziehen, Git-Workflows zu integrieren, SSL für die Produktionsnutzung zu aktivieren oder Ihr Homelab mit anderen webbasierten Tools wie JupyterLab, Docker oder Portainer für ein leistungsfähigeres und flexibleres Entwicklungs-Setup zu erweitern.