So installierst du Code-Server auf Saplo (VS Code im Browser ohne Installation)

Manchmal programmierst du auf einem anderen Computer als auf deinem eigenen Laptop, zum Beispiel bei einem Kunden oder auf Reisen, und jedes Mal konfigurierst du Editor, Erweiterungen und Umgebung neu oder installierst deine eigenen SSH-Schlüssel auf fremder Hardware. Code-Server löst das als ein einziger Docker-Container auf deinem Box: die gleiche Visual Studio Code, die gleichen Erweiterungen und ein integriertes Terminal sind über eine Browseradresse auf jedem Gerät verfügbar, während Code und Änderungsverlauf an einem Ort bleiben, statt zwischen Computern hin- und herzuwandern. In diesem Tutorial zeigen wir, wie du Code-Server auf Saplo einrichtest.

Was ist Code-Server und für wen er sich eignet

Code-Server ist ein offizielles Docker-Image codercom/code-server, also Visual Studio Code, das für den Betrieb auf einem Server und die Nutzung über den Browser statt als Desktop-App umgepackt wurde. Benutzeroberfläche, Tastenkürzel, Extension Marketplace und integriertes Terminal sind identisch mit denen im normalen VS Code. Der einzige Unterschied besteht darin, wo der Editor-Prozess tatsächlich ausgeführt wird. Das passt zu einem Programmierer, der von jedem Gerät aus programmieren möchte, ohne jedes Mal eine Umgebung einrichten zu müssen, zu einem Freelancer, der gelegentlich von einem fremden Computer aus arbeitet und dort weder Zugangsdaten noch Kundencode hinterlassen möchte, sowie zu einem Team, das eine gemeinsame, stets verfügbare Entwicklungsumgebung sucht, statt einer kostenpflichtigen Cloud-IDE.

Anforderungen

Um Code-Server auf Saplo einzurichten, brauchst du:

• eine Box mit laufendem Docker (die Engine aktiviert Docker automatisch bei der Installation aus dem App-Katalog, Container-Nesting ist erforderlich und bei Saplo standardmäßig vorhanden),
• ein Editor mit Sprachservern (LSP) ist ressourcenintensiver als eine gewöhnliche Webanwendung, daher musst du realistischerweise Box M für 65 € pro Jahr einplanen,
• eine Domain oder Subdomain *.saploapp.pl, die im Preis jedes Plans enthalten ist und unter der der Editor läuft,
• eine separate Datenbank brauchst du NICHT, Code-Server speichert das Projekt und die Einstellungen in zwei getrennten Datenvolumen.

Die vollständige Beschreibung der Anwendung und ihres Platzes im App-Katalog findest du auf der Seite von Code-Server auf Saplo.

Installation Schritt für Schritt

1. Öffne im Saplo-Panel den App-Katalog und wähle Code-Server.
2. Wähle eine Box mit ausreichend RAM sowie eine Domain oder Subdomain, unter der der Editor erreichbar sein soll.
3. Bestätige die Installation. Die Engine generiert ein zufälliges Login-Passwort (ausschließlich alphanumerische Zeichen, keine Sonderzeichen, die docker-compose als Variablenersetzung interpretieren könnte), richtet einen Container mit dem Image codercom/code-server und zwei separaten Volumes ein, eines für das Arbeitsverzeichnis /home/coder/project und das andere für Einstellungen und Erweiterungen /home/coder/.local/share/code-server, und wartet, bis der Container tatsächlich läuft, bevor die Installation als abgeschlossen gilt.
4. Terminal und Live-Bearbeitung im Browser funktionieren über WebSocket, während der nginx der Box die Upgrade-Header für jede App aus dem App-Katalog verarbeitet, sodass du nichts zusätzlich aktivieren musst.
5. Die Anmeldedaten (nur das Passwort, ohne Benutzernamen) werden in der Datei CODE-SERVER-SETUP.txt im App-Verzeichnis gespeichert.

Erste Verwendung

1. Lies das Passwort aus der Datei CODE-SERVER-SETUP.txt im App-Katalog.
2. Öffne die Domain-Adresse im Browser und melde dich mit diesem Passwort an. Die Anmeldung in Code-Server erfordert keinen Benutzernamen.
3. Arbeite im Verzeichnis /home/coder/project, das im Editor als Hauptprojektordner angezeigt wird. Lade Dateien über das integrierte Terminal (git clone, scp, wget) oder über den Dateimanager im Saplo-Panel dort hoch.
4. Installiere Erweiterungen aus dem Marketplace genauso wie in der Desktop-Version von VS Code. Sie landen im Einstellungsmenü und überstehen einen Neustart des Containers.
5. Das Schließen des Browser-Tabs beendet die Prozesse im Terminal nicht. Lang laufende Aufgaben (Build, Tests, Entwicklungsserver) laufen weiter auf Box, bis zur nächsten Anmeldung.

Code-Server auf Saplo vs. Cloud-IDEs

Häufige Fragen

Muss ich bei der Anmeldung einen Benutzernamen angeben? Nein, bei Code-Server erfolgt die Anmeldung nur mit einem Passwort, ohne Benutzernamen. Das Passwort findest du in der Datei CODE-SERVER-SETUP.txt im App-Katalog.

Kann ich das Anmeldepasswort ändern? Ja, du änderst die Variable PASSWORD in der Datei docker-compose.yml im App-Katalog und startest den Container über das Panel neu.

Kann ich eigene Erweiterungen und Sprachserver installieren? Ja, der Erweiterungsmarktplatz funktioniert genauso wie im Desktop-VS Code. Installierte Erweiterungen werden in einem separaten Einstellungs-Volume abgelegt, unabhängig vom Projektverzeichnis.

Erfordern Terminal und Live-Vorschau eine zusätzliche Konfiguration? Nein, WebSocket für Terminal und Live-Bearbeitung funktioniert sofort. Das nginx von Box hat die Upgrade-Header für jede App aus dem App-Katalog bereits konfiguriert.

Benötigt Code-Server eine separate Datenbank? Nein, Projekt und Einstellungen werden in den Datenvolumes des Containers gespeichert. Eine separate MySQL- oder Postgres-Datenbank ist nicht erforderlich.

Auf einer Box kannst du neben Code-Server auch andere Teamtools aus dem Katalog einrichten, ohne für jede App separat zu zahlen. Die Regeln findest du auf der Seite Hosting von Apps auf Saplo.

Wenn du heute monatlich für eine Cloud-IDE zahlst, nur um VS Code von jedem Gerät aus zur Verfügung zu haben, schreib uns. Wir helfen dir, deinen eigenen Code-Server einzurichten.