Tutorial

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

Published on April 24, 2020
Deutsch
So richten Sie die Eclipse-Theia-Cloud-IDE-Plattform unter Ubuntu 18.04 ein

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 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.

Voraussetzungen

Schritt 1 – Einsatz von nginx-proxy mit Let’s Encrypt

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:

  1. mkdir ~/eclipse-theia

Navigieren Sie dorthin:

  1. 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:

  1. nano nginx-proxy-compose.yaml

Fügen Sie die folgenden Zeilen hinzu:

~/eclipse-theia/nginx-proxy-compose.yaml
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:

  1. 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.

Schritt 2 – Einsatz des dockerisierten Eclipse Theia

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:

  1. sudo apt install apache2-utils

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

Erstellen Sie das Verzeichnis /etc/nginx/htpasswd:

  1. sudo mkdir -p /etc/nginx/htpasswd

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

  1. 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:

  1. 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:

  1. nano eclipse-theia-compose.yaml

Fügen Sie die folgenden Zeilen hinzu:

~/eclipse-theia/eclipse-theia-compose.yaml
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:

  1. 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.

Eclipse Theia GUI

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

Schritt 3 – Verwendung der Eclipse-Theia-Benutzeroberfläche

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.

Eclipse-Theia-GUI – Seitenbereich

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.

Eclipse-Theia-GUI – New Folder

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.

Debugger-Ansicht mit launch.json geöffnet

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.

Rasteransicht des Editors

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.

Terminal geöffnet

Sie haben sich nun einen Überblick über die Eclipse-Theia-Benutzeroberfläche und einige der am häufigsten verwendeten Funktionen verschafft.

Zusammenfassung

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Savic

author



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Become a contributor for community

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

DigitalOcean Documentation

Full documentation for every DigitalOcean product.

Resources for startups and SMBs

The Wave has everything you need to know about building a business, from raising funding to marketing your product.

Get our newsletter

Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

New accounts only. By submitting your email you agree to our Privacy Policy

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.