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

De Get Docs
Aller à :navigation, rechercher

L'auteur a sélectionné le Free and Open Source Fund pour recevoir un don dans le cadre du programme Write for DOnations.

Introduction

Avec la migration des outils de développement vers le cloud, l'adoption des plates-formes cloud IDE (Integrated Development Environment) se développe. Les IDE cloud sont accessibles depuis tous les types d'appareils modernes via des navigateurs Web et 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. Accessibles via les navigateurs Web, les IDE cloud sont disponibles à partir de tous les types d'appareils modernes.

Eclipse Theia est un IDE cloud extensible exécuté sur un serveur distant et accessible depuis un navigateur Web. Visuellement, il est conçu pour ressembler et se comporter de la même manière que Microsoft Visual Studio Code, ce qui signifie qu'il prend en charge de nombreux langages de programmation, a une disposition flexible et dispose d'un terminal intégré. Ce qui distingue Eclipse Theia des autres logiciels IDE cloud, c'est son extensibilité ; il peut être modifié à l'aide d'extensions personnalisées, qui vous permettent de créer un IDE cloud adapté à vos besoins.

Dans ce didacticiel, vous allez déployer Eclipse Theia sur votre serveur Ubuntu 18.04 à l'aide de Docker Compose, un outil d'orchestration de conteneurs. Vous l'exposerez sur votre domaine à l'aide de nginx-proxy, un système automatisé pour Docker qui simplifie le processus de configuration de Nginx pour qu'il serve de proxy inverse pour un conteneur. Vous le sécuriserez également à l'aide d'un certificat Let's Encrypt TLS gratuit, que vous fournirez à l'aide de son module complémentaire spécialisé. Au final, Eclipse Theia s'exécutera sur votre serveur Ubuntu 18.04 disponible via HTTPS et obligera l'utilisateur à se connecter.

Conditions préalables

Étape 1 - Déployer nginx-proxy avec Let's Encrypt

Dans cette section, vous allez déployer nginx-proxy et son module complémentaire Let's Encrypt [1] à l'aide de Docker Compose. Cela activera le provisionnement et le renouvellement automatiques du certificat TLS, de sorte que lorsque vous déployez Eclipse Theia, il sera accessible sur votre domaine via HTTPS.

Pour les besoins de ce didacticiel, vous stockerez tous les fichiers sous ~/eclipse-theia. Créez le répertoire en exécutant la commande suivante :

mkdir ~/eclipse-theia

Accédez-y :

cd ~/eclipse-theia

Vous allez stocker la configuration Docker Compose pour nginx-proxy dans un fichier nommé nginx-proxy-compose.yaml. Créez-le à l'aide de votre éditeur de texte :

nano nginx-proxy-compose.yaml

Ajoutez les lignes suivantes :

~/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"

Ici, vous définissez deux services que Docker Compose exécutera, nginx-proxy et son compagnon Let's Encrypt. Pour le proxy, vous spécifiez jwilder/nginx-proxy comme 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, que vous utiliserez ultérieurement pour configurer l'authentification des utilisateurs. Pour ce faire, vous utiliserez le premier volume de la liste, qui mappe le répertoire local /etc/nginx/htpasswd sur le même dans le conteneur. Dans ce dossier, nginx-proxy s'attend à trouver un fichier nommé exactement comme le domaine cible, contenant les identifiants de connexion pour l'authentification de l'utilisateur au format htpasswd (username:hashed_password).

Pour le module complémentaire, vous nommez l'image Docker et autorisez l'accès au socket de Docker en définissant un volume. Ensuite, vous spécifiez que le module complémentaire doit hériter de l'accès aux volumes définis pour nginx-proxy. Les deux services ont restart défini sur always, ce qui ordonne à Docker de redémarrer les conteneurs en cas de plantage ou de redémarrage 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, vous transmettez le nom de fichier nginx-proxy-compose.yaml au paramètre -f de la commande docker-compose, qui spécifie le fichier à exécuter. Ensuite, vous passez le verbe up qui lui demande d'exécuter 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 :

OutputCreating 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 à l'aide de Docker Compose. Vous allez maintenant configurer Eclipse Theia sur votre domaine et le sécuriser.

Étape 2 - Déployer Dockerized Eclipse Theia

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

Comme expliqué à 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é sous le répertoire /etc/nginx/htpasswd dans le conteneur. Le répertoire local qui correspond au répertoire virtuel n'a pas besoin d'être le même, comme cela a été spécifié dans la configuration nginx-proxy.

Pour créer des combinaisons de connexion, vous devez d'abord 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 stockera les identifiants 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 une combinaison nom d'utilisateur/mot 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. Un mot de passe vous sera demandé deux fois. Après l'avoir fourni, htpasswd ajoutera la paire nom d'utilisateur et mot de passe haché à 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 déployer Eclipse Theia. Vous le stockerez dans un fichier nommé eclipse-theia-compose.yaml. Créez-le à l'aide de votre éditeur de texte :

nano eclipse-theia-compose.yaml

Ajoutez les lignes suivantes :

~/eclipse-theia/eclipse-theia-composer.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

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

Ensuite, vous spécifiez deux variables d'environnement dans la section environment : VIRTUAL_HOST et LETSENCRYPT_HOST. Le premier est transmis à nginx-proxy et lui indique à quel domaine le conteneur doit être exposé, tandis que le second est utilisé par son module complémentaire Let's Encrypt et spécifie pour quel domaine demander des certificats TLS. À moins que vous ne spécifiiez un caractère générique comme valeur pour VIRTUAL_HOST, ils doivent être identiques.

N'oubliez pas de remplacer theia.your_domain par le domaine de votre choix, puis enregistrez et fermez le fichier.

Déployez maintenant 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, accédez au domaine que vous utilisez pour Eclipse Theia. Votre navigateur vous montrera une invite vous demandant de vous connecter. Après avoir fourni les informations d'identification correctes, vous entrerez dans Eclipse Theia et verrez immédiatement son interface graphique d'éditeur. Dans votre barre d'adresse, vous verrez un cadenas indiquant que la connexion est sécurisée. Si vous ne le voyez pas immédiatement, attendez quelques minutes que les certificats TLS soient provisionnés, puis rechargez la page.

Maintenant que vous pouvez accéder en toute sécurité à votre IDE cloud, vous allez commencer à utiliser l'éditeur à l'étape suivante.

Étape 3 - Utilisation de l'interface Eclipse Theia

Dans cette section, vous allez explorer certaines des fonctionnalités de l'interface Eclipse Theia.

Sur le côté gauche de l'IDE, il y a une rangée verticale de quatre boutons ouvrant les fonctionnalités les plus couramment utilisées dans un panneau latéral.

Cette barre est personnalisable, vous pouvez donc déplacer ces vues vers un ordre différent ou les supprimer de la barre. Par défaut, la première vue ouvre le panneau Explorateur qui fournit une navigation arborescente dans la structure du projet. Vous pouvez gérer vos dossiers et fichiers ici, en les créant, en les supprimant, en les déplaçant et en 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 enregistré, vous pouvez afficher le nom du fichier dans le panneau latéral de l'explorateur. Pour créer des dossiers, cliquez avec le bouton 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 faisant glisser et déposer des fichiers et des dossiers vers les parties supérieures de la hiérarchie pour les déplacer vers un nouvel emplacement.

Les deux options suivantes permettent d'accéder à la fonctionnalité de recherche et de remplacement. Après cela, le suivant fournit une vue des systèmes de contrôle de code source que vous utilisez peut-être, 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 les configurations de débogage dans le fichier launch.json.

La partie centrale de l'interface graphique est votre éditeur, que vous pouvez séparer par des onglets pour l'édition de votre code. Vous pouvez changer 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 coloration 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 dossiers affichés dans le panneau latéral de l'explorateur.

Vous avez exploré une vue d'ensemble de haut niveau de l'interface Eclipse Theia et passé en revue certaines des fonctionnalités les plus couramment utilisées.

Conclusion

Vous avez maintenant Eclipse Theia, un IDE cloud polyvalent, installé sur votre serveur Ubuntu 18.04 à l'aide de Docker Compose et nginx-proxy. Vous l'avez sécurisé avec un certificat Let's Encrypt TLS gratuit et configuré l'instance pour exiger les identifiants de connexion de l'utilisateur. Vous pouvez travailler sur votre code source et vos documents avec celui-ci individuellement ou collaborer avec votre équipe. Vous pouvez également essayer de créer 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 la Theia docs.