Einrichten der Code-Server-Cloud-IDE-Plattform unter Ubuntu 20.04

Der Autor wählte den Free and Open Source Fund, um eine Spende im Rahmen des Programms Write for DOnations zu erhalten.

Einführung

Die Erstellung und Einführung von Cloud-IDE-Plattformen (IDE: Integrated Development Environment) nimmt zu, da Entwickler-Tools zunehmend cloudbasiert sind. Cloud-IDEs ermöglichen Entwicklerteams eine Zusammenarbeit in Echtzeit in einer einheitlichen Entwicklungsumgebung, die Inkompatibilitäten minimiert und die Produktivität steigert. Cloud-IDEs sind über Webbrowser zugänglich und auf allen modernen Geräten verfügbar.

Code-Server ist Microsoft Visual Studio Code, der auf einem Remote Server läuft und auf den Sie direkt von Ihrem Browser aus zugreifen können. Visual Studio Code ist ein moderner Code-Editor mit integrierter Git-Unterstützung, einem Code-Debugger, intelligenter automatischer Vervollständigung sowie anpassbaren und erweiterbaren Funktionen. Dadurch können Sie verschiedene Geräte verwenden, die verschiedene Betriebssysteme ausführen und immer eine einheitliche Entwicklungsumgebung haben.

In diesem Tutorial richten Sie die Code-Server-Cloud-IDE-Plattform auf Ihrem Ubuntu-20.04-Computer ein und machen sie auf Ihrer Domäne verfügbar, geschützt durch kostenlose Let’s Encrypt TLS-Zertifikate. Zum Schluss wird Microsoft Visual Studio Code auf Ihrem Ubuntu-20.04-Server ausgeführt, ist auf Ihrer Domäne verfügbar und mit einem Passwort geschützt.

Voraussetzungen

• Einen Server mit Ubuntu 20.04 mit mindestens 2 GB RAM, Root-Zugriff und einem Sudo-Konto ohne Rootberechtigung. Sie können dies einrichten, indem Sie diesem Leitfaden zur Ersteinrichtung des Servers folgen.

• Nginx, das auf Ihrem Server installiert ist. Führen Sie dazu die Schritte 1 bis 4 aus Installieren von Nginx unter Ubuntu 20.04 aus.

• Einen vollständig registrierten Domänennamen für den Host Code-Server, der auf Ihren Server verweist. Dieses Tutorial verwendet durchgehend code-server.your-domain. Sie können einen Domänennamen unter Namecheap günstig erwerben oder einen kostenlosen von Freenom herunterladen oder einfach die Domänenregistrierungsstelle Ihrer Wahl verwenden. Für DigitalOcean können Sie dieser Einführung in DigitalOcean DNS folgen, um genau zu erfahren, wie Sie sie hinzufügen.

Schritt 1 – Installation des Code-Servers

In diesem Abschnitt richten Sie Code-Server auf Ihrem Server ein. Dabei laden Sie die neueste Version herunter und erstellen einen systemd-Dienst, der Code-Server immer im Hintergrund ausführt. Des Weiteren geben Sie eine Neustart-Regel für den Dienst an, damit Code-Server nach möglichen Abstürzen oder Neustarts verfügbar bleibt.

Sie speichern alle Daten über Code-Server in einem Ordner namens ~/code-server. Erstellen Sie ihn, indem Sie folgenden Befehl ausführen:

mkdir ~/code-server

Navigieren Sie dorthin:

cd ~/code-server

Gehen Sie auf die Seite Github releases von Code-Server und wählen Sie den neuesten Linux-Build (die Datei enthält linux in ihrem Namen). Als dieser Text verfasst wurde, war die neueste Version 3.3.1. Laden Sie ihn mit wget herunter, indem Sie folgenden Befehl ausführen:

wget https://github.com/cdr/code-server/releases/download/v3.3.1/code-server-3.3.1-linux-amd64.tar.gz

Entpacken Sie dann das Archiv durch Ausführung von:

tar -xzvf code-server-3.3.1-linux-amd64.tar.gz

Sie erhalten einen Ordner mit dem gleichen Namen wie die von Ihnen heruntergeladene Originaldatei, die den Quellcode des Code-Servers enthält. Kopieren Sie die ausführbare Datei des Code-Servers in /usr/lib/code-server, damit Sie systemweit mit dem folgenden Befehl darauf zugreifen können:

sudo cp -r code-server-3.3.1-linux-amd64 /usr/lib/code-server

Erstellen Sie dann einen symbolischen Link auf /usr/bin/code-server, der auf die ausführbare Datei des Code-Servers verweist:

sudo ln -s /usr/lib/code-server/bin/code-server /usr/bin/code-server

Erstellen Sie als Nächstes einen Ordner für Code-Server, in dem er Benutzerdaten speichert:

sudo mkdir /var/lib/code-server

Nachdem Sie Code-Server heruntergeladen und systemweit verfügbar gemacht haben, erstellen Sie einen systemd-Dienst für die ständige Ausführung des Code-Servers im Hintergrund.

Speichern Sie die Dienstkonfiguration in einer Datei namens code-server.service im Verzeichnis /lib/systemd/system, in dem systemd seine Dienste speichert. Erstellen Sie sie mit Ihrem Texteditor:

sudo nano /lib/systemd/system/code-server.service

Fügen Sie die folgenden Zeilen hinzu:

[Unit]
Description=code-server
After=nginx.service

[Service]
Type=simple
Environment=PASSWORD=your_password
ExecStart=/usr/bin/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password
Restart=always

[Install]
WantedBy=multi-user.target

Hier geben Sie zunächst die Beschreibung des Dienstes an. Dann bestätigen Sie, dass der Dienst nginx vor diesem gestartet werden muss. Nach dem Abschnitt [Unit] definieren Sie die Art des Dienstes (simple bedeutet, dass der Prozess einfach ausgeführt werden soll) und geben den Befehl an, der ausgeführt wird.

Außerdem geben Sie an, dass die globale ausführbare Datei des Code-Servers mit einigen Argumenten gestartet werden soll, die für Code-Server spezifisch sind. --bind-addr 127.0.0.1:8080​​​​​​ bindet ihn an localhost an Port 8080, damit er nur von Ihrem Server aus direkt zugänglich ist. --user-data-dir /var/lib/code-server legt Ihr Benutzerdaten-Verzeichnis fest und --auth password spezifiziert, dass es Besucher mit einem Passwort authentifizieren soll, das in der Umgebungsvariable PASSWORD in der Zeile darüber angegeben ist.

Vergessen Sie nicht, your_password durch Ihr gewünschtes Passwort zu ersetzen. Speichern und schließen Sie danach die Datei.

Die nächste Zeile teilt systemd mit, dass Code-Server bei allen Störungen (z. B. bei Absturz oder wenn der Vorgang beendet wird) neu starten soll. Der Abschnitt [Install] weist systemd an, diesen Dienst zu starten, wenn Sie sich auf Ihrem Server anmelden können.

Starten Sie den Code-Server-Dienst durch Ausführung des folgenden Befehls:

sudo systemctl start code-server

Überprüfen Sie, ob er korrekt gestartet wurde, indem Sie seinen Status beachten:

sudo systemctl status code-server

Sie sehen eine Ausgabe, die der nachfolgenden ähnelt:

Output
● code-server.service - code-server
     Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled)
     Active: active (running) since Wed 2020-05-20 13:03:40 UTC; 12s ago
   Main PID: 14985 (node)
      Tasks: 18 (limit: 2345)
     Memory: 26.1M
     CGroup: /system.slice/code-server.service
             ├─14985 /usr/lib/code-server/bin/../lib/node /usr/lib/code-server/bin/.. --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth>
             └─15010 /usr/lib/code-server/lib/node /usr/lib/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password

May 20 13:03:40 code-server-update-2004 systemd[1]: Started code-server.
May 20 13:03:40 code-server-update-2004 code-server[15010]: info  Wrote default config file to ~/.config/code-server/config.yaml
May 20 13:03:40 code-server-update-2004 code-server[15010]: info  Using config file ~/.config/code-server/config.yaml
May 20 13:03:40 code-server-update-2004 code-server[15010]: info  Using user-data-dir /var/lib/code-server
May 20 13:03:40 code-server-update-2004 code-server[15010]: info  code-server 3.3.1 6f1309795e1cb930edba68cdc7c3dcaa01da0ab3
May 20 13:03:40 code-server-update-2004 code-server[15010]: info  HTTP server listening on http://127.0.0.1:8080
May 20 13:03:40 code-server-update-2004 code-server[15010]: info      - Using password from $PASSWORD
May 20 13:03:40 code-server-update-2004 code-server[15010]: info      - To disable use `--auth none`
May 20 13:03:40 code-server-update-2004 code-server[15010]: info    - Not serving HTTPS

Damit Code-Server nach einem Server-Neustart automatisch startet, aktivieren Sie seinen Dienst durch Ausführung des folgenden Befehls:

sudo systemctl enable code-server

In diesem Schritt haben Sie Code-Server heruntergeladen und global verfügbar gemacht. Dann haben Sie einen systemd-Dienst für ihn erstellt und aktiviert, damit Code-Server bei jedem Server-Boot startet. Als Nächstes machen Sie diesen auf Ihrer Domäne verfügbar, indem Sie Nginx konfigurieren, um als Reverseproxy zwischen Besucher und Code-Server zu dienen.

Schritt 2 – Code-Server auf Ihrer Domäne verfügbar machen

In diesem Abschnitt konfigurieren Sie Nginx als Reverseproxy für den Code-Server.

Wie Sie im Schritt Nginx-Voraussetzung erfahren haben, werden seine Site-Konfigurationsdateien unter /etc/nginx/sites-available gespeichert und müssen später symbolisch mit /etc/nginx/sites-enabled verknüpft werden, um aktiv zu sein.

Speichern Sie die Konfiguration, um Code-Server auf Ihrer Domäne verfügbar zu machen, in einer Datei namens code-server.conf unter /etc/nginx/sites-available. Beginnen Sie mit dem Erstellen mithilfe Ihres Editors:

sudo nano /etc/nginx/sites-available/code-server.conf

Fügen Sie die folgenden Zeilen hinzu:

server {
	listen 80;
	listen [::]:80;

	server_name code-server.your-domain;

	location / {
	  proxy_pass http://localhost:8080/;
	  proxy_set_header Upgrade $http_upgrade;
	  proxy_set_header Connection upgrade;
	  proxy_set_header Accept-Encoding gzip;
	}
}

Ersetzen Sie code-server.your-domain​​​ durch Ihre gewünschte Domäne. Speichern und schließen Sie dann die Datei.

In dieser Datei definieren Sie, dass Nginx auf den HTTP-Port 80 lauschen soll. Dann geben Sie einen server_name an, der Nginx mitteilt, für welche Domäne Anfragen akzeptiert und diese spezielle Konfiguration angewendet werden sollen. Für den Root-Ort (/) geben Sie im nächsten Block an, dass Anfragen an den Code-Server auf localhost:8080 ausgeführt werden sollen. Die nächsten drei Zeilen (ab proxy_set_header) weisen Nginx an, einige HTTP-Anforderungsheader zu übertragen, die für das korrekte Funktionieren von WebSockets benötigt werden, die Code-Server extensiv verwendet.

Damit die Konfiguration dieser Site aktiv wird, müssen Sie eine symbolische Verknüpfung davon im Ordner /etc/nginx/sites-enabled​​​ erstellen, indem Sie Folgendes ausführen:

sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf

Um die Gültigkeit der Konfiguration zu testen, führen Sie folgenden Befehl aus:

sudo nginx -t

Sie sehen die folgende Ausgabe:

Output
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Damit die Konfiguration wirksam werden kann, müssen Sie Nginx neu starten:

sudo systemctl restart nginx

Ihre Code-Server-Installation ist nun auf Ihrer Domäne verfügbar. Im nächsten Schritt sichern Sie sie durch Anwendung eines kostenlosen Let’s Encrypt TLS-Zertifikates.

Schritt 3 – Sicherung Ihrer Domäne

In diesem Abschnitt sichern Sie Ihre Domäne mit einem Let’s Encrypt TLS-Zertifikat, das Sie mit Certbot bereitstellen.

Um die neueste Version von Certbot und dessen Nginx-Plugin zu installieren, führen Sie folgenden Befehl aus:

sudo apt install certbot python3-certbot-nginx

Als Teil der Voraussetzungen haben Sie ufw (Uncomplicated Firewall) aktiviert und so konfiguriert, dass ein unverschlüsselter HTTP-Verkehr erlaubt ist. Damit Sie auf die gesicherte Site zugreifen können, müssen Sie sie so konfigurieren, dass sie verschlüsselten Verkehr akzeptiert. Dazu führen Sie folgenden Befehl aus:

sudo ufw allow https

Die Ausgabe sieht wie folgt aus:

Output
Rule added
Rule added (v6)

Ähnlich wie bei Nginx müssen Sie den Befehl neu laden, damit die Konfiguration wirksam werden kann:

sudo ufw reload

Die Ausgabe zeigt Folgendes:

Output
Firewall reloaded

Navigieren Sie anschließend in Ihrem Browser zu der Domäne, die Sie für Code-Server verwendet haben. Sie erhalten die Anmeldeaufforderung des Code-Servers.

Code-Server fragt Sie nach Ihrem Passwort. Geben Sie dasjenige ein, das Sie im vorigen Schritt festgelegt haben, und drücken Sie Enter IDE. Jetzt rufen Sie Code-Server auf und sehen sofort seine Editor-GUI.

Nachdem Sie nun überprüft haben, ob Code-Server korrekt auf Ihrer Domäne verfügbar ist, installieren Sie Let’s Encrypt TLS-Zertifikate, um es mit Certbot zu sichern.

Um Zertifikate für Ihre Domäne anzufordern, führen Sie folgenden Befehl aus:

sudo certbot --nginx -d code-server.your-domain

In diesem Befehl führen Sie certbot aus, um Zertifikate für Ihre Domäne anzufordern – Sie übergeben den Domänennamen mit dem Parameter -d. Das Flag --nginx weist sie an, eine eine automatische Änderung der Nginx-Site-Konfiguration zur Unterstützung von HTTPS vorzunehmen. Vergessen Sie nicht, code-server.your-domain durch Ihren Domänennamen zu ersetzen.

Wenn Sie Certbot zum ersten Mal ausführen, werden Sie aufgefordert, eine E-Mail-Adresse für dringende Bekanntmachungen anzugeben und die AGBs von EFF zu akzeptieren. Certbot fordert daraufhin Zertifikate für Ihre Domäne von Let’s Encrypt an. Dann werden Sie gefragt, ob Sie den gesamten HTTP-Verkehr an HTTPS weiterleiten möchten:

Output
Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

Es wird empfohlen, die zweite Option auszuwählen, um die Sicherheit zu maximieren. Nachdem Sie Ihre Auswahl eingegeben haben, drücken Sie die EINGABETASTE.

Die Ausgabe sieht ungefähr wie folgt aus:

Output
IMPORTANT NOTES:
- Congratulations! Your certificate and chain have been saved at:
 /etc/letsencrypt/live/code-server.your-domain/fullchain.pem
 Your key file has been saved at:
 /etc/letsencrypt/live/code-server.your-domain/privkey.pem
 Your cert will expire on ... To obtain a new or tweaked
 version of this certificate in the future, simply run certbot again
 with the "certonly" option. To non-interactively renew *all* of
 your certificates, run "certbot renew"
- Your account credentials have been saved in your Certbot
 configuration directory at /etc/letsencrypt. You should make a
 secure backup of this folder now. This configuration directory will
 also contain certificates and private keys obtained by Certbot so
 making regular backups of this folder is ideal.
- If you like Certbot, please consider supporting our work by:

 Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
 Donating to EFF:                    https://eff.org/donate-le

Das bedeutet, dass Certbot TLS-Zertifikate erfolgreich generiert und auf die Nginx-Konfiguration für Ihre Domäne angewendet hat. Sie können Ihre Code-Server-Domäne nun in Ihrem Browser neu laden und werden links von der Websiteadresse ein Schloss sehen: Das bedeutet, dass Ihre Verbindung korrekt gesichert ist.

Nachdem Code-Server nun auf Ihrer Domäne über einen gesicherten Nginx-Reverseproxy zugänglich ist, können Sie die Benutzeroberfläche von Code-Server überprüfen.

Schritt 4 – Verwendung der Code-Server-Benutzeroberfläche

In diesem Abschnitt werden Sie einige der Funktionen der Code-Server-Benutzeroberfläche verwenden. Da Code-Server Visual Studio Code ist, der in der Cloud ausgeführt wird, hat er dieselbe Benutzeroberfläche wie die eigenständige Desktop-Edition.

Auf der linken Seite der IDE befindet sich eine vertikale Reihe von sechs Schaltflächen, welche die am häufigsten verwendeten Funktionen in einem Seitenbereich namens Aktivitätsleiste öffnen.

Diese Leiste ist anpassbar: Sie können diese Ansichten in eine andere Reihenfolge bringen oder von der Leiste entfernen. Standardmäßig öffnet die erste Schaltfläche das allgemeine Menü in einem Dropdown, während die zweite Ansicht das Feld Explorer öffnet, das eine baumartige Navigation der Struktur des Projekts bereitstellt. Hier können Sie Ihre Ordner und Dateien verwalten und sie je nach Bedarf erstellen, löschen, verschieben und umbenennen. Die nächste Ansicht bietet Zugriff auf die Funktion Suchen und Ersetzen.

Im Anschluss daran wird in der standardmäßigen Reihenfolge Ihre Ansicht der Quellcodeverwaltungssysteme wie Git angezeigt. Visual-Studio-Code unterstützt auch andere Quellcodeverwaltungsanbieter. Weitere Anweisungen für Arbeitsabläufe bei Quellcodeverwaltung mit dem Editor finden Sie in dieser Dokumentation.

Die Debugger-Option auf der Aktivitätsleiste bietet alle gängigen Aktionen zum Debuggen in der Kontrollleiste. Visual Studio Code bietet integrierte Unterstützung für den Laufzeit-Debugger Node.js und jede Sprache, die zu Javascript transpiliert. Für weitere Sprachen können Sie Erweiterungen für den erforderlichen Debugger installieren. Debugging-Konfigurationen können Sie in der Datei launch.json speichern.

Die letzte Ansicht in der Aktivitätsleiste bietet ein Menü zum Zugriff auf verfügbare Erweiterungen auf dem Marketplace.

Der zentrale Teil der GUI ist Ihr Editor, den Sie für Ihre Codebearbeitung durch Registerkarten trennen können. Ihre Bearbeitungsansicht können ein Rastersystem oder nebeneinander angeordnete Dateien sein.

Nach der Erstellung einer neuen Datei über das Menü File öffnet sich eine leere Datei in einer neuen Registerkarte. Sobald sie gespeichert ist, wird der Name der Datei im Seitenfeld Explorer sichtbar. Sie können Ordner durch einen Rechtsklick auf die Seitenleiste Explorer und durch Klicken auf New Folder erstellen. Sie können einen Ordner erweitern, indem Sie auf seinen Namen klicken, sowie Dateien und Ordner in obere Teile der Hierarchie ziehen und ablegen, um sie an einen neuen Ort zu verschieben.

Sie können Zugriff auf ein Terminal erhalten, indem Sie STRG+UMSCHALT+` eingeben oder im oberen Dropdownmenü auf Terminal klicken und New Terminal auswählen. Das Terminal öffnet sich in einem unteren Feld und sein Arbeitsverzeichnis wird auf den Arbeitsbereich des Projekts festgelegt, der die im Seitenbereich Explorer gezeigten Dateien und Ordner erhält.

Sie haben nun einen Überblick über die Code-Server-Benutzeroberfläche und einige der am häufigsten verwendeten Funktionen.

Zusammenfassung

Jetzt haben Sie den Code-Server, eine vielseitige Cloud-IDE, auf Ihrem Ubuntu 20.04-Server installiert, auf Ihrer Domäne verfügbar gemacht und mit Let’s Encrypt gesichert. Jetzt können Sie einzeln oder als Team an Projekten arbeiten. Die Ausführung einer Cloud-IDE gibt Ressourcen auf Ihrem lokalen Computer frei und ermöglicht es Ihnen, die Ressourcen bei Bedarf zu skalieren. Weitere Informationen finden Sie in der Visual Studio Code Dokumentation, wo Sie zusätzliche Funktionen und detaillierte Anweisungen zu anderen Komponenten des Code-Servers nachlesen können.

Wenn Sie Code-Server auf Ihrem DigitalOcean Kubernetes-Cluster ausführen möchten, sehen Sie sich unser Tutorial So richten Sie die Code-Server-Cloud-IDE-Plattform auf DigitalOcean Kubernetes ein an.