So richten Sie die Eclipse-Theia-Cloud-IDE-Plattform unter Ubuntu 18.04 ein

Die Einführung von Cloud-IDE-Plattformen (IDE: Integrated Development Environment) nimmt zu, da Entwickler-Tools zunehmend cloudbasiert sind. Cloud-IDEs sind per Webbrowser über beliebige moderne Geräte zugänglich und bieten zahlreiche Vorteile für echtzeitbasierte Zusammenarbeit. Eine Cloud-IDE bietet Ihnen und Ihrem Team eine einheitliche Entwicklungs- und Testumgebung und minimiert gleichzeitig Plattform-Inkompatibilitäten. Cloud-IDEs sind über Webbrowser zugänglich und auf allen modernen Geräten verfügbar.

Eclipse Theia ist eine erweiterbare Cloud-IDE, die auf einem Remote-Server läuft und von einem Webbrowser aus zugänglich ist. Aussehen und Verhalten sind ähnlich wie bei Microsoft Visual Studio Code​​​, wodurch es viele Programmiersprachen unterstützt, ein flexibles Layout und ein integriertes Terminal hat. Was Eclipse Theia von anderer Cloud-IDE-Software unterscheidet, ist die Erweiterbarkeit; sie kann mit benutzerdefinierten Erweiterungen modifiziert werden, damit Sie eine Cloud-IDE für Ihre Bedürfnisse erstellen können.

In diesem Tutorial stellen Sie Eclipse Theia für Ihren Ubuntu-18.04-Server mit Docker Compose, einem Tool zur Container-Orchestrierung, bereit. Sie machen es auf Ihrer Domäne mit nginx-proxy verfügbar, einem automatisierten System für Docker, das den Prozess der Konfiguration von Nginx vereinfacht, damit es als Reverseproxy für einen Container fungieren kann. Zusätzlich sichern Sie es mit einem kostenlosen Let’s Encrypt TLS-Zertifikat, das Sie mithilfe des spezialisierten Add-on bereitstellen. Zum Schluss wird Eclipse Theia auf Ihrem Ubuntu-18.04-Server ausgeführt, über HTTPS verfügbar sein und der Benutzer wird sich anmelden müssen.

• Ein Ubuntu-18.04-Server mit Rootberechtigung und einem sekundären Konto ohne Rootberechtigung. Sie können dies einrichten, indem Sie sich an den Leitfaden zur Ersteinrichtung des Servers für Ubuntu 18.04 halten. Für dieses Tutorial ist der Benutzer ohne Rootberechtigung sammy​​​.
• Docker, das auf Ihrem Server installiert ist. Folgen Sie Schritt 1 und Schritt 2 in So installieren Sie Docker unter Ubuntu 18.04. Eine Einführung zu Docker finden Sie in Das Docker-Ökosystem: Leitfaden für gemeinsame Komponenten.
• Docker Compose, das auf Ihrem Server installiert ist. Folgen Sie Schritt 1 in So installieren Sie Docker Compose unter Ubuntu 18.04.
• Ein vollständig registrierter Domänenamen. Dieses Tutorial verwendet durchgehend theia.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.
• Ein DNS-Eintrag mit theia.your_domain, der auf die öffentliche IP-Adresse Ihres Servers verweist. Sie finden in dieser Einführung in DigitalOcean DNS Details dazu, wie Sie sie hinzufügen können.

In diesem Abschnitt stellen Sie nginx-proxy und sein Add-on Let’s Encrypt mit Docker Compose bereit. Das aktiviert die automatische Bereitstellung und Erneuerung von TLS-Zertifikaten, damit Eclipse Theia auf Ihrer Domäne über HTTPS zugänglich sein wird.

Zum Zwecke dieses Tutorials speichern Sie alle Dateien unter ~/eclipse-theia. Erstellen Sie das Verzeichnis, indem Sie den folgenden Befehl ausführen:

mkdir ~/eclipse-theia

Navigieren Sie dorthin:

cd ~/eclipse-theia

Speichern Sie die Docker-Compose-Konfiguration für nginx-proxy in einer Datei namens nginx-proxy-compose.yaml. Erstellen Sie sie mit Ihrem Texteditor:

nano nginx-proxy-compose.yaml

Fügen Sie die folgenden Zeilen hinzu:

version: '2'

services:
  nginx-proxy:
    restart: always
    image: jwilder/nginx-proxy
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - "/etc/nginx/htpasswd:/etc/nginx/htpasswd"
      - "/etc/nginx/vhost.d"
      - "/usr/share/nginx/html"
      - "/var/run/docker.sock:/tmp/docker.sock:ro"
      - "/etc/nginx/certs"

  letsencrypt-nginx-proxy-companion:
    restart: always
    image: jrcs/letsencrypt-nginx-proxy-companion
    volumes:
      - "/var/run/docker.sock:/var/run/docker.sock:ro"
    volumes_from:
      - "nginx-proxy"

Hier definieren Sie zwei Dienste, die Docker Compose ausführen wird, nginx-proxy und seinen Let’s Encrypt-Begleiter. Für den Proxy geben Sie jwilder/nginx-proxy als Image ein, ordnen Sie HTTP- und HTTPS-Ports zu und definieren Sie Volumes, die während der Laufzeit zugänglich sind.

Volumes sind Verzeichnisse auf Ihrem Server, auf die der definierte Dienst vollen Zugriff haben wird, was Sie später zum Einrichten der Benutzerauthentifizierung verwenden werden. Dazu verwenden Sie das erste Volume aus der Liste, das das lokale Verzeichnis /etc/nginx/htpasswd dem gleichen im Container zuordnet. In diesem Ordner erwartet nginx-proxy eine Datei mit dem gleichen Namen wie die Zieldomäne, die Anmeldeangaben für die Benutzerauthentifizierung im Format htpasswd enthält (​​​username:hashed_password​​​).

Für das Add-on benennen Sie das Docker-Image und ermöglichen Zugriff auf das Docker-Socket, indem Sie ein Volume definieren. Dann geben Sie an, dass das Add-on Zugriff auf die Volumes erben soll, die für nginx-proxy definiert sind. Bei beiden Diensten ist restart auf always eingestellt, wodurch Docker angewiesen wird, die Container im Falle eines Absturzes oder System-Neustarts neu zu starten.

Speichern und schließen Sie die Datei.

Stellen Sie die Konfiguration bereit, indem Sie Folgendes ausführen:

docker-compose -f nginx-proxy-compose.yaml up -d

Hier übergeben Sie den Dateinamen nginx-proxy-compose.yaml an den Parameter -f des Befehls docker-compose, der die Datei angibt, die ausgeführt wird. Dann übergeben Sie das Verb up, das die Anweisung zur Ausführung der Container gibt. Das Flag -d ermöglicht den getrennten Modus. Das bedeutet, dass Docker Compose die Container im Hintergrund ausführt.

Die endgültige Ausgabe sieht ungefähr so aus:

Output
Creating network "eclipse-theia_default" with the default driver
Pulling nginx-proxy (jwilder/nginx-proxy:)...
latest: Pulling from jwilder/nginx-proxy
8d691f585fa8: Pull complete
5b07f4e08ad0: Pull complete
...
Digest: sha256:dfc0666b9747a6fc851f5fb9b03e65e957b34c95d9635b4b5d1d6b01104bde28
Status: Downloaded newer image for jwilder/nginx-proxy:latest
Pulling letsencrypt-nginx-proxy-companion (jrcs/letsencrypt-nginx-proxy-companion:)...
latest: Pulling from jrcs/letsencrypt-nginx-proxy-companion
89d9c30c1d48: Pull complete
668840c175f8: Pull complete
...
Digest: sha256:a8d369d84079a923fdec8ce2f85827917a15022b0dae9be73e6a0db03be95b5a
Status: Downloaded newer image for jrcs/letsencrypt-nginx-proxy-companion:latest
Creating eclipse-theia_nginx-proxy_1 ... done
Creating eclipse-theia_letsencrypt-nginx-proxy-companion_1 ... done

Sie haben nginx-proxy und seinen Let’s-Encrypt-Begleiter mit Docker Compose bereitgestellt. Jetzt richten Sie Eclipse Theia auf Ihrer Domäne ein und sichern es.

In diesem Abschnitt erstellen Sie eine Datei mit allen erlaubten Anmelde-Kombinationen, die ein Benutzer eingeben muss. Dann stellen Sie Eclipse Theia für Ihren Server mit Docker Compose bereit und machen es auf Ihrer gesicherten Domäne mit nginx-proxy verfügbar.

Wie im vorigen Schritt erklärt geht nginx-proxy davon aus, dass Anmelde-Kombinationen sich in einer Datei befinden, die nach der verfügbar gemachten Domäne benannt wurde, das Format htpasswd hat und unter dem Verzeichnis /etc/nginx/htpasswd im Container gespeichert ist. Das lokale Verzeichnis, das dem virtuellen zugeordnet ist, muss nicht das gleiche sein, das in der Konfiguration nginx-proxy angegeben wurde.

Um Anmelde-Kombinationen zu erstellen, müssen Sie zunächst htpasswd installieren, indem Sie folgenden Befehl ausführen:

sudo apt install apache2-utils

Das apache2-utils-Paket enthält das htpasswd-Dienstprogramm.

Erstellen Sie das Verzeichnis /etc/nginx/htpasswd:

sudo mkdir -p /etc/nginx/htpasswd

Erstellen Sie eine Datei, welche die Anmeldungen für Ihre Domäne speichert:

sudo touch /etc/nginx/htpasswd/theia.your_domain

Vergessen Sie nicht, theia.your_domain​​​ durch Ihre Eclipse-Theia-Domäne zu ersetzen.

Führen Sie den folgenden Befehl aus, um eine Kombination aus Benutzernamen und Passwort hinzuzufügen:

sudo htpasswd /etc/nginx/htpasswd/theia.your_domain username

Ersetzen Sie username durch den Benutzernamen, den Sie hinzufügen möchten. Sie werden zweimal nach einem Passwort gefragt. Nachdem Sie es angegeben haben, fügt htpasswd den Benutzernamen und ein Passwort-Paar mit Hash am Ende der Datei hinzu. Sie können diesen Befehl für so viele Anmeldungen wiederholen, wie Sie hinzufügen möchten.

Jetzt erstellen Sie eine Konfiguration, um Eclipse Theia bereitzustellen. Speichern Sie diese in einer Datei namens eclipse-theia-compose.yaml. Erstellen Sie sie mit Ihrem Texteditor:

nano eclipse-theia-compose.yaml

Fügen Sie die folgenden Zeilen hinzu:

version: '2.2'

services:
  eclipse-theia:
    restart: always
    image: theiaide/theia:next
    init: true
    environment:
      - VIRTUAL_HOST=theia.your_domain
      - LETSENCRYPT_HOST=theia.your_domain

In dieser Konfiguration definieren Sie einen einzelnen Dienst namens eclipse-theia, bei dem restart auf always eingestellt ist und theiaide/theia:next als das Container-Image. Außerdem stellen Sie init auf true ein, um Docker anzuweisen, init als Haupt-Prozessmanager zu verwenden, wenn Eclipse Theia im Container ausgeführt wird.

Dann bestimmen Sie zwei Umgebungsvariablen im Abschnitt environment: VIRTUAL_HOST und LETSENCRYPT_HOST. Erstere wird an nginx-proxy übergeben und teilt ihm mit, auf welcher Domäne der Container verfügbar sein soll. Letztere wird von ihrem Let’s-Encrypt-Add-on benutzt und gibt an, für welche Domäne TLS-Zertifikate angefordert werden sollen. Wenn Sie nicht eine Wildcard als Wert für VIRTUAL_HOST angeben, müssen sie gleich sein.

Vergessen Sie nicht, theia.your_domain​​​ durch Ihre gewünschte Domäne zu ersetzen. Speichern und schließen Sie danach die Datei.

Stellen Sie jetzt Eclipse Theia bereit, indem Sie Folgendes ausführen:

docker-compose -f eclipse-theia-compose.yaml up -d

Der endgültige Ausgabe sieht ungefähr so aus:

Output
...
Pulling eclipse-theia (theiaide/theia:next)...
next: Pulling from theiaide/theia
63bc94deeb28: Pull complete
100db3e2539d: Pull complete
...
Digest: sha256:c36dff04e250f1ac52d13f6d6e15ab3e9b8cad9ad68aba0208312e0788ecb109
Status: Downloaded newer image for theiaide/theia:next
Creating eclipse-theia_eclipse-theia_1 ... done

Navigieren Sie anschließend in Ihrem Browser zu der Domäne, die Sie für Eclipse Theia verwenden. Ihr Browser zeigt Ihnen eine Eingabeaufforderung, mit der Sie zur Anmeldung aufgefordert werden. Nachdem Sie die richtigen Anmeldeangaben bereitgestellt haben, steigen Sie in Eclipse Theia ein und sehen sofort seine Editor-GUI. In Ihrer Adressleiste sehen Sie ein Schloss, das anzeigt, dass die Verbindung sicher ist. Wenn Sie es nicht sofort sehen, warten Sie einige Minuten darauf, dass die TLS-Zertifikate bereitgestellt werden. Laden Sie dann die Seite neu.

Nachdem Sie nun sicher auf Ihre Cloud-IDE zugreifen können, beginnen Sie im nächsten Schritt mit der Verwendung des Editors.

In diesem Abschnitt werden Sie einige Funktionen von Eclipse Theia erkunden.

Auf der linken Seite der IDE befindet sich eine vertikale Reihe von vier Schaltflächen, welche die am häufigsten verwendeten Funktionen in einem Seitenbereich ö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 Ansicht das Explorer-Feld, 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.

Nach der Erstellung einer neuen Datei über das Menü File öffnet sich eine leere Datei in einer neuen Registerkarte. Sobald sie gespeichert sind, können Sie den Namen der Datei im Seitenfeld Explorer anzeigen. Durch einen Rechtsklick auf die Explorer-Seitenleiste und Klicken auf New Folder erstellen Sie Ordner. 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.

Die beiden nächsten Optionen bieten Zugriff auf die Funktion Suchen und Ersetzen. Die darauffolgende bietet eine Ansicht von Quellcodeverwaltungssystemen, die Sie möglicherweise verwenden, wie z. B. Git.

Die letzte Ansicht ist die Debugger-Option, die alle gängigen Aktionen zum Debuggen in dem Feld bereitstellt. Debugging-Konfigurationen können Sie in der Datei launch.json speichern.

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. Eclipse Theia unterstützt, wie alle modernen IDEs, Syntaxhervorhebung für Ihren Code.

Sie können sich Zugriff auf ein Terminal verschaffen, indem Sie ``Strg+Umschalt+``` eingeben oder im oberen Menü 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 sich nun einen Überblick über die Eclipse-Theia-Benutzeroberfläche und einige der am häufigsten verwendeten Funktionen verschafft.

Sie haben jetzt Eclipse Theia, eine vielseitige Cloud IDE, auf Ihrem Ubuntu-18.04-Server mit Docker Compose und nginx-proxy installiert. Sie haben es mit einem kostenlosen Let’s Encrypt TLS-Zertifikat gesichert und eine Instanz eingerichtet, um Anmeldedaten des Benutzers anzufordern. Sie können damit an Ihrem Quellcode und Dokumenten einzeln arbeiten oder im Team zusammenarbeiten. Sie können auch versuchen, Ihre eigene Version von Eclipse Theia zu erstellen, wenn Sie zusätzliche Funktionen benötigen. Weitere Informationen dazu finden Sie unter Theia Docs.