Comment configurer la plate-forme Eclipse Theia Cloud IDE sur Ubuntu 18.04

Avec la migration des outils de développement vers le cloud, l’adoption des plateformes IDE (Integrated Development Environment) cloud est en pleine croissance. Les IDE cloud sont accessibles depuis chaque type de dispositif moderne via les navigateurs web, et ils offrent de nombreux avantages pour les scénarios de collaboration en temps réel. Travailler dans un IDE cloud fournit un environnement de développement et de test unifié pour vous et votre équipe, tout en minimisant les incompatibilités de plate-forme. Accessible via les navigateurs web, les IDE cloud sont disponibles à partir de tout type de dispositif moderne.

Eclipse Theia est un IDE cloud extensible fonctionnant sur un serveur distant et accessible depuis un navigateur web. Visuellement, il est conçu de manière à ressembler et se comporter de manière similaire à Microsoft Visual Studio Code, ce qui signifie qu’il prend en charge de nombreuses langues de programmation, dispose d’un schéma flexible et d’un terminal intégré. Ce qui différencie Eclipse Theia d’autres logiciels IDE cloud est son extensibilité ; il peut être modifié en utilisant des extensions personnalisées, ce qui vous permet de créer un IDE cloud adapté à vos besoins.

Dans ce tutoriel, vous allez déployer Eclipse Theia sur votre serveur Ubuntu 18.04 en utilisant Docker Compose, un outil d’orchestration de conteneurs. Vous allez l’exposer sur votre domaine en utilisant nginx-proxy, un système automatisé pour Docker qui simplifie le processus de configuration de Nginx pour faire office de proxy inverse pour un conteneur. Vous allez également le sécuriser en utilisant un certificat gratuit Let’s Encrypt TLS, que vous allez fournir en utilisant son add-on dédié. Au bout du compte, vous disposerez d’Eclipse Theia sur votre serveur Ubuntu 18.04, disponible via HTTPS et requérant que l’utilisateur se connecte.

• Un serveur Ubuntu 18.04 avec des privilèges root, et un compte secondaire non root. Vous pouvez configurer ceci en suivant notre Guide de configuration initiale du serveur pour Ubuntu 18.04. Pour ce tutoriel, l’utilisateur non root est sammy.
• Docker installé sur votre serveur. Suivez Étape 1 et Étape 2 de Comment installer Docker sur Ubuntu 18.04. Pour une introduction sur Docker, consultez L’écosystème Docker : Une introduction sur les composants communs.
• Docker Compose installé sur votre serveur. Suivez Étape 1 de Comment installer Docker Compose sur Ubuntu 18.04.
• Un nom de domaine entièrement enregistré. Ce tutoriel utilisera theia.your-domain tout au long du cours. Vous pouvez acheter un nom de domaine sur Namecheap, en obtenir un gratuitement sur Freenom, ou utiliser le registraire de domaine de votre choix.
• Un enregistrement DNS de type A avec theia.your-domain pointant sur l’adresse IP publique de votre serveur. Vous pouvez suivre cette introduction à DigitalOcean DNS pour plus de détails sur la façon de les ajouter.

Dans cette section, vous allez déployer nginx-proxy et son add-on Let’s Encrypt en utilisant Docker Compose. Cela permettra de fournir et de renouveler automatiquement le certificat TLS, de sorte que lorsque vous déployez Eclipse Theia il sera accessible sur votre domaine via HTTPS.

Aux fins de ce tutoriel, vous allez stocker tous les fichiers sous ~/eclipse-theia. Créez le répertoire en exécutant la commande suivante :

mkdir ~/eclipse-theia

Naviguez jusqu’à lui :

cd ~/eclipse-theia

Vous allez stocker la configuration Docker Compose pour nginx-proxy dans un fichier nommé nginx-proxy-compose.yaml. Créez celui-ci avec votre éditeur de texte :

nano nginx-proxy-compose.yaml

Ajoutez les lignes suivantes :

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"

Ici, vous définissez deux services que Docker Compose exploitera, nginx-proxy et son compagnon Let’s Encrypt Pour le proxy, vous spécifiez jwilder/nginx-proxy en tant qu’image, mappez les ports HTTP et HTTPS, et définissez les volumes qui lui seront accessibles pendant l’exécution.

Les volumes sont des répertoires sur votre serveur auxquels le service défini aura un accès complet, et que vous allez utiliser plus tard pour configurer l’authentification de l’utilisateur. Pour ce faire, vous allez utiliser le premier volume de la liste, qui fait correspondre le répertoire /etc/nginx/htpasswd local au même répertoire dans le conteneur. Dans ce dossier, nginx-proxy s’attend à trouver un fichier nommé exactement comme le domaine cible, qui contient des informations de connexion pour l’authentification de l’utilisateur au format htpasswd (username:hashed_password).

Pour l’add-on, vous nommez l’image Docker et vous autorisez l’accès au socket Docker en définissant un volume Ensuite, vous précisez que l’add-on devrait hériter de l’accès aux volumes définis pour nginx-proxy. Les deux services ont un l’option restart réglée sur always, ce qui oblige Docker à redémarrer les conteneurs en cas de crash ou de reboot du système.

Enregistrez et fermez le fichier.

Déployez la configuration en exécutant :

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

Ici, dans le nom de fichier nginx-proxy-compose.yaml, vous passez au paramètre -f de la commande docker-compose, qui spécifie le fichier à exécuter. Ensuite, vous passez le verbe up qui le charge de faire fonctionner les conteneurs. Le drapeau -d active le mode détaché, ce qui signifie que Docker Compose exécutera les conteneurs en arrière-plan.

La sortie finale ressemblera à ceci :

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

Vous avez déployé nginx-proxy et son compagnon Let’s Encrypt en utilisant Docker Compose. Vous allez maintenant installer Eclipse Theia sur votre domaine et le sécuriser

Dans cette section, vous allez créer un fichier contenant toutes les combinaisons de connexion autorisées qu’un utilisateur devra saisir. Ensuite, vous allez déployer Eclipse Theia sur votre serveur en utilisant Docker Compose et l’exposer sur votre domaine sécurisé en utilisant nginx-proxy.

Comme indiqué à l’étape précédente, nginx-proxy s’attend à ce que les combinaisons de connexion se trouvent dans un fichier nommé d’après le domaine exposé, au format htpasswd et stocké dans le répertoire /etc/nginx/htpasswd dans le conteneur. Le répertoire local qui correspond au répertoire virtuel ne doit pas nécessairement être le même, comme cela a été précisé dans la configuration nginx-proxy.

Pour créer des combinaisons de connexion, vous allez d’abord devoir installer htpasswd en exécutant la commande suivante :

sudo apt install apache2-utils

Le package apache2-utils contient l’utilitaire htpasswd.

Créez le répertoire /etc/nginx/htpasswd :

sudo mkdir -p /etc/nginx/htpasswd

Créez un fichier qui va stocker les logins de votre domaine :

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

N’oubliez pas de remplacer theia.your_domain par votre domaine Eclipse Theia.

Pour ajouter un nom d’utilisateur et une combinaison de mots de passe, exécutez la commande suivante :

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

Remplacez username par le nom d’utilisateur que vous souhaitez ajouter. Vous devrez indiquer un mot de passe à deux reprises. Après quoi, htpasswd ajoutera le nom d’utilisateur et le couple de mots de passe hachés à la fin du fichier. Vous pouvez répéter cette commande pour autant de logins que vous souhaitez ajouter.

Maintenant, vous allez créer une configuration pour le déploiement d’Eclipse Theia. Vous allez la stocker dans un fichier nommé eclipse-theia-compose.yaml. Créez celui-ci avec votre éditeur de texte :

nano eclipse-theia-compose.yaml

Ajoutez les lignes suivantes :

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

Dans cette configuration, vous définissez un service unique appelé eclipse-theia avec restart défini sur always et theiaide/theia:next comme l’image du conteneur. Vous définissez également init sur vrai pour que Docker utilise init comme le principal gestionnaire de processus lors de l’exécution de Eclipse Theia à l’intérieur du conteneur.

Ensuite, vous précisez deux variables d’environnement dans la section environnement : VIRTUAL_HOST et LETSENCRYPT_HOST. La première est passée sur nginx-proxy et lui indique à quel domaine le conteneur doit être exposé, tandis que la seconde est utilisée par son add-on Let’s Encrypt et précise pour quel domaine demander des certificats TLS. À moins que vous n’indiquiez un joker comme valeur pour VIRTUAL_HOST, elles doivent être identiques.

N’oubliez pas de remplacer theia.your_domain par le domaine que vous souhaitez, puis de sauvegarder et de fermer le fichier.

Maintenant, déployez Eclipse Theia en exécutant :

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

La sortie finale ressemblera à :

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

Ensuite, dans votre navigateur, naviguez vers le domaine que vous utilisez pour Eclipse Theia. Votre navigateur affichera une invite vous demandant de vous connecter. Après avoir fourni les identifiants corrects, vous entrerez dans Eclipse Theia et verrez immédiatement l’interface graphique de son éditeur. Dans votre barre d’adresse, vous verrez un cadenas qui indique que la connexion est sécurisée. Si cela n’apparaît pas immédiatement, attendez quelques minutes que les certificats TLS soient fournis, puis rechargez la page.

Maintenant que vous pouvez accéder en toute sécurité à votre IDE cloud, vous allez commencer à utiliser l’éditeur au cours de la prochaine étape.

Dans cette section, vous allez explorer certaines des caractéristiques de l’interface d’Eclipse Theia.

Sur le côté gauche de l’IDE, se trouve une rangée verticale de quatre boutons qui ouvrent les caractéristiques les plus couramment utilisées dans un panneau latéral.

Cette barre est personnalisable de sorte que vous pouvez modifier l’ordre de ces vues ou les retirer de la barre. Par défaut, la première vue ouvre le panneau de l’explorateur qui permet une navigation arborescente de la structure du projet. Vous pouvez gérer vos dossiers et fichiers ici - en les créant, les supprimant, les déplaçant et les renommant si nécessaire.

Après avoir créé un nouveau fichier via le menu Fichier, vous verrez un fichier vide ouvert dans un nouvel onglet. Une fois que vous l’enregistrez, vous pouvez visualiser le nom du fichier dans le panneau latéral de l’explorateur. Pour créer des dossiers, faites un clic droit sur la barre latérale de l’explorateur et cliquez sur Nouveau dossier. Vous pouvez développer un dossier en cliquant sur son nom ainsi qu’en glissant et déposant des fichiers et des dossiers dans les parties supérieures de la hiérarchie afin de les déplacer vers un nouvel emplacement.

Les deux options suivantes donnent accès à la fonctionnalité de recherche et de remplacement. La suivante donne un aperçu des systèmes de contrôle de source que vous pourriez utiliser, tels que Git.

La vue finale est l’option de débogage, qui fournit toutes les actions courantes de débogage dans le panneau. Vous pouvez enregistrer des configurations de débogage dans le fichier launch.json

La partie centrale de l’interface graphique est votre éditeur, que vous pouvez séparer en onglets pour éditer votre code. Vous pouvez modifier votre vue d’édition en un système de grille ou en fichiers côte à côte. Comme tous les IDE modernes, Eclipse Theia prend en charge la surbrillance syntaxique de votre code.

Vous pouvez accéder à un terminal en tapant ``CTRL+SHIFT+``` ou en cliquant sur Terminal dans le menu supérieur, et en sélectionnant Nouveau terminal. Le terminal s’ouvrira dans un panneau inférieur et son répertoire de travail sera défini sur l’espace de travail du projet, qui contient les fichiers et les dossiers affichés dans le panneau latéral de l’explorateur.

Vous avez exploré un aperçu de haut niveau de l’interface Eclipse Theia et examiné certaines des caractéristiques les plus couramment utilisées.

Vous disposez désormais d’Eclipse Theia, un IDE cloud polyvalent, installé sur votre serveur Ubuntu 18.04, utilisant Docker Compose et nginx-proxy. Vous l’avez sécurisé avec un certificat gratuit Let’s Encrypt TLS et vous avez configuré l’instance pour exiger des identifiants de connexion de l’utilisateur. Vous pouvez travailler avec lui sur votre code source et vos documents individuellement ou collaborer avec votre équipe. Vous pouvez également essayer de développer votre propre version d’Eclipse Theia si vous avez besoin de fonctionnalités supplémentaires. Pour plus d’informations sur la façon de procéder, consultez les docs Theia.