One place for hosting & domains

      plateforme

      Comment mettre en place la plate-forme cloud IDE de code-server sur Ubuntu 20.04


      L’auteur a choisi 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, la création et l’adoption de plateformes cloud IDE (Integrated Development Environment) se développent. Les plateformes cloud IDE permettent une collaboration en temps réel entre les équipes de développeurs pour travailler dans un environnement de développement unifié qui minimise les incompatibilités et améliore la productivité. Accessibles via les navigateurs web, les plateformes cloud IDE sont disponibles à partir de tout type d’appareil moderne.

      code-server est un code Microsoft Visual Studio fonctionnant sur un serveur distant et accessible directement depuis votre navigateur. Visual Studio Code est un éditeur de code moderne avec un support Git intégré, un débogueur de code, une autocomplétion intelligente et des fonctionnalités personnalisables et extensibles. Cela signifie que vous pouvez utiliser divers appareils fonctionnant avec différents systèmes d’exploitation, et que vous disposez toujours d’un environnement de développement cohérent.

      Dans ce tutoriel, vous allez installer la plateforme IDE du serveur cloud sur votre machine Ubuntu 20.04 et l’exposer à votre domaine, sécurisé par des certificats Let’s Encrypt TLS gratuits. Au final, vous disposerez du code Microsoft Visual Studio sur votre serveur Ubuntu 20.04, disponible dans votre domaine et protégé par un mot de passe.

      Conditions préalables

      • Un serveur fonctionnant sous Ubuntu 20.04 avec au moins 2 Go de RAM, un accès root, et un compte sudo, non root. Vous pouvez le configurer en suivant ce guide de configuration initiale du serveur.

      • Nginx installé sur votre serveur. Pour vous guider, suivez les étapes 1 à 4 du guide Comment installer Nginx sur Ubuntu 20.04.

      • Un nom de domaine entièrement enregistré pour héberger code-server, pointé vers votre serveur. Ce tutoriel utilisera code-server.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 bureau d’enregistrement de domaine de votre choix. Pour DigitalOcean, vous pouvez suivre cette introduction à DigitalOcean DNS pour savoir comment les ajouter.

      Étape 1 – Installez code-server

      Dans cette section, vous allez configurer code-server sur votre serveur. Cela implique le téléchargement de la dernière version et la création d’un service systemd qui maintiendra code-server toujours en fonctionnement en arrière-plan. Vous préciserez également une politique de redémarrage du service, afin que code-server reste disponible après d’éventuels crashs ou redémarrages.

      Vous stockerez toutes les données relatives à code-server dans un dossier nommé ~/code-server. Créez-le en exécutant la commande suivante :

      Naviguez jusqu’à lui :

      Vous devrez vous rendre à la page des versions de Github relatives à code-server et choisir la dernière version de Linux (le fichier contiendra « linux » dans son nom). Au moment de la rédaction de ces lignes, la dernière version était 3.3.1. Téléchargez-le en utilisant wget, en exécutant la commande suivante :

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

      Ensuite, déballez les archives en exécutant :

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

      Vous obtiendrez un dossier nommé exactement comme le fichier original que vous avez téléchargé, qui contient le code source de code-server. Copiez-le dans /usr/lib/code-server afin de pouvoir y accéder dans tout le système en exécutant la commande suivante :

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

      Ensuite, créez un lien symbolique dans /usr/bin/code-server, pointant sur l’exécutable de code-server :

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

      Ensuite, créez un dossier pour code-server, où seront stockées les données des utilisateurs :

      • sudo mkdir /var/lib/code-server

      Maintenant que vous avez téléchargé code-server et que vous l’avez rendu disponible dans tout le système, vous allez créer un service systemd pour que code-server fonctionne en arrière-plan à tout moment.

      Vous allez stocker la configuration du service dans un fichier nommé code-server.service, dans le répertoire /lib/systemd/system, où systemd stocke ses services. Créez-le avec votre éditeur de texte :

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

      Ajoutez les lignes suivantes :

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

      [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
      

      Ici, vous devez d’abord préciser la description du service. Ensuite, vous indiquez que le service nginx doit être lancé avant celui-ci. Après la section [Unit], vous définissez le type de service (simple signifie que le processus doit être simplement exécuté) et fournissez la commande qui sera exécutée.

      Vous spécifiez également que l’exécutable du serveur de code global doit être lancé avec quelques arguments spécifiques au serveur de code. --bind-addr 127.0.0.1:8080 le lie à localhost sur le port 8080, il n’est donc directement accessible que depuis l’intérieur de votre serveur. --user-data-dir /var/lib/code-server définit son répertoire de données utilisateur, et --auth password spécifie qu’il doit authentifier les visiteurs avec un mot de passe, spécifié dans la variable d’environnement PASSWORD déclarée sur la ligne au-dessus. 

      N’oubliez pas de remplacer <^>your_password<^> avec le mot de passe de votre choix, puis enregistrez et fermez le fichier.

      La ligne suivante indique à systemd de redémarrer code-server dans tous les cas de dysfonctionnement (par exemple, lorsqu’il se bloque ou que le processus est interrompu). La section [Install] ordonne à systemd de démarrer ce service lorsqu’il devient possible de se connecter à votre serveur.

      Démarrez le service code-server en exécutant la commande suivante :

      • sudo systemctl start code-server

      Vérifiez qu’il est correctement démarré en observant son état :

      • sudo systemctl status code-server

      Vous verrez un résultat similaire à :

      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

      Pour que code-server démarre automatiquement après un redémarrage du serveur, activez son service en exécutant la commande suivante :

      • sudo systemctl enable code-server

      Dans cette étape, vous avez téléchargé code-server et l’avez rendu disponible dans le monde entier. Ensuite, vous lui avez créé un service systemd et l’avez activé, de sorte que code-server démarre à chaque mise en marche du serveur. Maintenant, vous allez l’exposer à votre domaine en configurant Nginx pour servir de proxy inverse entre le visiteur et code-server.

      Étape 2 – Exposez code-server à votre domaine

      Dans cette section, vous allez configurer Nginx comme proxy inverse pour code server.

      Comme vous l’avez appris lors de l’étape préalable de Nginx, les fichiers de configuration de son site sont stockés sous /etc/nginx/sites-available et doivent ensuite être liés par un lien symbolique à /etc/nginx/sites-enabled pour devenir actifs.

      Vous allez stocker la configuration pour exposer code-server à votre domaine dans un fichier nommé code-server.conf, sous /etc/nginx/sites-available. Commencez par le créer à l’aide de votre éditeur :

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

      Ajoutez les lignes suivantes :

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

      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;
          }
      }
      

      Remplacez code-server.your-domain par le domaine de votre choix, puis enregistrez et fermez le fichier.

      Dans ce fichier, vous définissez que Nginx doit écouter le port HTTP 80. Ensuite, vous spécifiez un server_name (nom de serveur) qui indique à Nginx pour quel domaine accepter les requêtes et appliquer cette configuration particulière. Dans le bloc suivant, pour l’emplacement racine (/), vous spécifiez que les requêtes doivent être transmises dans les deux sens au code-server fonctionnant à localhost:8080. Les trois lignes suivantes (commençant par proxy_set_header) ordonnent à Nginx de reporter certains en-têtes de requête HTTP qui sont nécessaires au bon fonctionnement des WebSockets, dont code-server fait un usage intensif.

      Pour rendre cette configuration de site active, vous devrez en créer un lien symbolique dans le dossier /etc/nginx/sites-enabled en exécutant :

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

      Pour tester la validité de la configuration, exécutez la commande suivante :

      Vous verrez la sortie suivante :

      Output

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

      Pour que la configuration prenne effet, vous devez redémarrer Nginx :

      • sudo systemctl restart nginx

      Votre installation de code-server est désormais accessible à votre domaine. Dans l’étape suivante, vous le sécuriserez en appliquant un certificat Let’s Encrypt TLS gratuit.

      Étape 3 – Sécurisez votre domaine

      Dans cette section, vous sécuriserez votre domaine à l’aide d’un certificat TLS Let’s Encrypt, que vous fournirez en utilisant Certbot.

      Pour installer la dernière version de Certbot et son plugin Nginx, exécutez la commande suivante :

      • sudo apt install certbot python3-certbot-nginx

      Dans le cadre des conditions préalables, vous avez activé ufw (Uncomplicated Firewall) et l’avez configuré pour permettre le trafic HTTP non crypté. Pour pouvoir accéder au site sécurisé, vous devez le configurer de manière à ce qu’il accepte le trafic crypté en exécutant la commande suivante :

      Le résultat sera :

      Output

      Rule added Rule added (v6)

      Comme pour Nginx, vous devrez le recharger pour que la configuration prenne effet :

      Le résultat sera :

      Output

      Firewall reloaded

      Ensuite, dans votre navigateur, naviguez jusqu’au domaine que vous avez utilisé pour code-server. Vous verrez l’invite de connexion à code-server.

      invite de connexion à code-server

      code-server vous demande votre mot de passe. Saisissez celui que vous avez défini à l’étape précédente et appuyez sur Entrée IDE. Vous allez maintenant entrer dans code-server et voir immédiatement l’interface graphique de son éditeur.

      Interface graphique code-server

      Maintenant que vous avez vérifié que code-server était correctement exposé à votre domaine, vous allez installer des certificats TLS Let’s Encrypt pour le sécuriser, en utilisant Certbot.

      Si vous souhaitez demander des certificats pour votre domaine, exécutez la commande suivante :

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

      Dans cette commande, vous lancez certbot dans le but de demander des certificats pour votre domaine – vous passez le nom de domaine avec le paramètre -d. Le drapeau --nginx lui indique de modifier automatiquement la configuration du site Nginx pour prendre en charge le HTTPS. N’oubliez pas de remplacer code-server.your-domain par votre nom de domaine.

      Si c’est la première fois que vous utilisez Certbot, il vous sera demandé de fournir une adresse électronique pour les avis urgents et d’accepter les conditions de service du FEP. Certbot demandera alors des certificats pour votre domaine à Let’s Encrypt. Il vous demandera ensuite si vous souhaitez rediriger tout le trafic HTTP vers le HTTPS :

      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):

      Il est recommandé de choisir la deuxième option afin de maximiser la sécurité. Après avoir saisi votre sélection, appuyez sur ENTER.

      Le résultat sera similaire à celui-ci :

      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

      Cela signifie que Certbot a généré avec succès des certificats TLS et les a appliqués à la configuration Nginx de votre domaine. Vous pouvez maintenant recharger votre domaine de code-server dans votre navigateur et observer un cadenas à gauche de l’adresse du site, ce qui signifie que votre connexion est correctement sécurisée.

      Maintenant que code-server est accessible à votre domaine via un reverse proxy Nginx sécurisé, vous êtes prêt à revoir l’interface utilisateur de code-server.

      Étape 4 – Utilisez l’interface code-server

      Dans cette section, vous utiliserez certaines des fonctionnalités de l’interface code-server. Comme code-server est un code Visual Studio fonctionnant dans le cloud, il a la même interface que l’édition autonome de bureau.

      Sur le côté gauche de l’IDE, il y a une rangée verticale de six boutons qui ouvrent les fonctionnalités les plus utilisées dans un panneau latéral connu sous le nom de Barre d’activité.

      Interface utilisateur code-server- 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, le premier bouton ouvre le menu général dans une liste déroulante, tandis que la deuxième vue ouvre le panneau Explorer 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. La vue suivante donne accès à une fonctionnalité de recherche et de remplacement

      Vient ensuite, dans l’ordre par défaut, votre vision des systèmes de contrôle des sources, comme Git. Visual Studio Code prend également en charge d’autres fournisseurs de contrôle de source et vous trouverez dans cette documentation des instructions supplémentaires sur les flux de travail de contrôle de source avec l’éditeur.

      Volet Git avec context-menu (menu contextuel) ouvert

      L’option de débogueur de la Barre d’activité fournit toutes les actions communes de débogage dans le panneau. Visual Studio Code est livré avec un support intégré pour le débugueur d’exécution Node.js et tout langage qui se transpose en Javascript. Pour les autres langues, vous pouvez installer des extensions pour le debogueur requis. Vous pouvez enregistrer des configurations de débogage dans le fichier launch.json

      Debugger View avec launch.json ouvert

      La vue finale dans la barre d’activité fournit un menu pour accéder aux extensions disponibles sur le Marché.

      code-server GUI - Onglets

      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.

      Vue de l'éditeur sous forme de grille

      Après avoir créé un nouveau fichier via le menu Fichier, un fichier vide s’ouvrira dans un nouvel onglet, et une fois enregistré, le nom du fichier sera visible dans le panneau latéral de l’explorateur. La création de dossiers peut se faire en cliquant avec le bouton droit de la souris sur la barre latérale de l’Explorateur et en cliquant 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.

      Interface graphique code-server - Nouveau dossier

      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 code-server et examiné certaines des caractéristiques les plus couramment utilisées.

      Conclusion

      Vous disposez maintenant de code-server, un IDE cloud polyvalent, installé sur votre serveur Ubuntu 20.04, exposé à votre domaine et sécurisé à l’aide de certificats Let’s Encrypt. Vous pouvez désormais travailler sur des projets individuellement, ainsi que dans un cadre de collaboration en équipe. L’utilisation d’un IDE cloud libère des ressources sur votre machine locale et vous permet d’augmenter les ressources en cas de besoin. Pour plus d’informations, consultez la documentation relative à Visual Studio Code pour accéder à des fonctionnalités supplémentaires et des instructions détaillées sur les autres composants de code-server.

      Si vous souhaitez utiliser code-server sur votre cluster Kubernetes de DigitalOcean , consultez notre tutoriel Comment mettre en place la plateforme cloud IDE code-server sur Kubernetes de DigitalOcean.



      Source link

      Comment configurer la plate-forme Eclipse Theia Cloud IDE sur DigitalOcean Kubernetes


      L’auteur a choisi le Free and Open Source Fund pour recevoir une donation dans le cadre du programme Write for DOnations.

      Introduction

      Avec la migration des outils de développement vers le cloud, la création et l’adoption de plateformes IDE (Integrated Development Environment) en nuage se développent. 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. Parce qu’ils sont basés nativement sur les technologies cloud, ils sont capables d’utiliser le cluster pour réaliser des tâches qui peuvent largement dépasser la puissance et la fiabilité d’un seul ordinateur de développement.

      Eclipse Theia est un IDE cloud extensible fonctionnant sur un serveur distant et accessible depuis un navigateur web. Visuellement, il est conçu pour 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 configurer la version par défaut de la plateforme Eclipse Theia cloud IDE sur votre cluster DigitalOcean Kubernetes et l’exposer à votre domaine, sécurisé par des certificats Let’s Encrypt et exigeant que le visiteur s’authentifie. Au bout du compte, vous disposerez d’Eclipse Theia sur cluster Kubernetes, disponible via HTTPS et exigeant que le visiteur se connecte.

      Conditions préalables

      • Un cluster DigitalOcean Kubernetes avec votre connexion configurée comme kubectl par défaut. Les instructions sur la façon de configurer kubectl sont indiquées dans l’étape Se connecter à votre cluster lorsque vous créez votre cluster. Pour créer un cluster Kubernetes sur DigitalOcean, voir notre Kubernetes Quickstart.

      • Le gestionnaire de paquets Helm installé sur votre machine locale, et Tiller installé sur votre cluster. Pour ce faire, suivez les étapes 1 et 2 du tutoriel Comment installer un logiciel sur les clusters de Kubernetes avec le gestionnaire de paquets de Helm.

      • Le Nginx Ingress Controller et le Cert Manager installés sur votre cluster en utilisant Helm afin d’exposer Eclipse Theia en utilisant Ingress Resources. Pour ce faire, suivez Comment configurer une entrée Nginx sur DigitalOcean Kubernetes en utilisant Helm.

      • Un nom de domaine entièrement enregistré pour héberger Eclipse Theia. 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 bureau d’enregistrement de domaine de votre choix.

      Étape 1 — Installation et exposition d’Eclipse Theia

      Pour commencer, vous allez installer Eclipse Theia sur votre cluster DigitalOcean Kubernetes. Ensuite, vous allez l’exposer au domaine de votre choix en utilisant une entrée Nginx.

      Comme vous avez créé deux exemples de déploiements et une ressource comme faisant partie des conditions préalables, vous pouvez les supprimer librement en exécutant les commandes suivantes :

      • kubectl delete -f hello-kubernetes-ingress.yaml
      • kubectl delete -f hello-kubernetes-first.yaml
      • kubectl delete -f hello-kubernetes-second.yaml

      Pour les besoins de ce tutoriel, vous allez stocker la configuration du déploiement sur votre machine locale, dans un fichier nommé eclipse-theia.yaml. Créez-le en utilisant la commande suivante :

      Ajoutez les lignes suivantes au fichier :

      eclipse-theia.yaml

      apiVersion: v1
      kind: Namespace
      metadata:
        name: theia
      ---
      apiVersion: networking.k8s.io/v1beta1
      kind: Ingress
      metadata:
        name: theia-next
        namespace: theia
        annotations:
          kubernetes.io/ingress.class: nginx
      spec:
        rules:
        - host: theia.your_domain
          http:
            paths:
            - backend:
                serviceName: theia-next
                servicePort: 80
      ---
      apiVersion: v1
      kind: Service
      metadata:
       name: theia-next
       namespace: theia
      spec:
       ports:
       - port: 80
         targetPort: 3000
       selector:
         app: theia-next
      ---
      apiVersion: apps/v1
      kind: Deployment
      metadata:
        labels:
          app: theia-next
        name: theia-next
        namespace: theia
      spec:
        selector:
          matchLabels:
            app: theia-next
        replicas: 1
        template:
          metadata:
            labels:
              app: theia-next
          spec:
            containers:
            - image: theiaide/theia:next
              imagePullPolicy: Always
              name: theia-next
              ports:
              - containerPort: 3000
      

      Cette configuration définit un espace de noms, un déploiement, un service et une Ingress (entrée réseau). L’espace de noms est appelé theia et contiendra tous les objets Kubernetes liés à Eclipse Theia, séparés du reste du cluster. Le déploiement consiste en un exemple de l’image Docker theiaide/theia:next avec le port 3000 exposé sur le conteneur. Le service recherche le déploiement et renvoie le port conteneur au port HTTP habituel, 80, permettant l’accès in-cluster à Eclipse Theia.

      L’Ingress contient une règle pour servir le service au port 80 en externe sur le domaine de votre choix. Dans ses annotations, vous spécifiez que le Nginx Ingress Controller doit être utilisé pour le traitement de la requête. N’oubliez pas de remplacer theia.votre_domaine par le domaine souhaité (que vous avez pointé vers l’équilibreur de charge de votre cluster), puis enregistrez et fermez le fichier.

      Enregistrez et quittez le fichier.

      Ensuite, créez la configuration dans Kubernetes en exécutant la commande suivante :

      • kubectl create -f eclipse-theia.yaml

      Vous verrez la sortie suivante :

      Output

      namespace/theia created ingress.networking.k8s.io/theia-next created service/theia-next created deployment.apps/theia-next created

      Vous pouvez voir la création du module Eclipse Theia en exécutant :

      • kubectl get pods -w -n theia

      La sortie finale ressemblera à ceci :

      Output

      NAME READY STATUS RESTARTS AGE theia-next-847d8c8b49-jt9bc 0/1 ContainerCreating 0 22s

      Après un certain temps, le statut va passer à RUNNING, ce qui signifie que vous avez bien installé Eclipse Theia sur votre cluster.

      Naviguez vers votre domaine dans votre navigateur. Vous verrez l’interface graphique par défaut de l’éditeur Eclipse Theia.

      Interface graphique par défaut de l'éditeur Eclipse Theia.

      Vous avez déployé Eclipse Theia sur votre cluster Kubernetes DigitalOcean et l’avez exposé au domaine de votre choix avec une Ingress. Ensuite, vous allez sécuriser l’accès à votre déploiement Eclipse Theia en activant l’authentification de la connexion.

      Étape 2 — Activation de l’authentification de la connexion pour votre domaine

      Dans cette étape, vous allez activer l’authentification du nom d’utilisateur et du mot de passe pour le déploiement d’Eclipse Theia. Vous y parviendrez en établissant d’abord une liste de combinaisons de connexion valides à l’aide de l’utilitaire htpasswd. Ensuite, vous créerez un secret Kubernetes contenant cette liste et configurerez l’entrée pour authentifier les visiteurs en fonction de celle-ci. En fin de compte, votre domaine ne sera accessible que lorsque le visiteur entrera une combinaison de nom d’utilisateur et de mot de passe valide. Cela empêchera les invités et autres visiteurs indésirables d’accéder à Eclipse Theia.

      L’utilitaire htpasswd vient du serveur web Apache et est utilisé pour créer des fichiers qui stockent les listes des combinaisons d’identifiants. Le format des fichiers htpasswd est une combinaison username:hashed_password par ligne, ce qui correspond au format attendu par le Nginx Ingress Controller pour la liste.

      Commencez par installer htpasswd sur votre système en exécutant la commande suivante :

      • sudo apt install apache2-utils -y

      Vous allez stocker la liste dans un fichier appelé auth. Créez-le en exécutant :

      Ce fichier doit être nommé auth parce que le Nginx Ingress Controller s’attend à ce que le secret contienne une clé appelée data.auth. S’il est manquant, le contrôleur renverra l’état HTTP 503 Service Indisponible.

      Ajoutez une combinaison nom d’utilisateur et mot de passe à auth en exécutant la commande suivante :

      N’oubliez pas de remplacer username par le nom d’utilisateur de votre choix. Un mot de passe vous sera demandé et la combinaison sera ajoutée dans le fichier auth. Vous pouvez répéter cette commande pour le nombre d’utilisateurs que vous souhaitez ajouter.

      Remarque : si le système sur lequel vous travaillez n’a pas de htpasswd installé, vous pouvez utiliser une version Dockerisée à la place.

      Vous devrez avoir Docker installé sur votre machine. Pour obtenir des instructions sur la façon de procéder, consultez les documents officiels.

      Exécutez la commande suivante pour utiliser une version dockerisée :

      • docker run --rm -it httpd htpasswd -n <username>

      N’oubliez pas de remplacer <username> par le nom d’utilisateur que vous voulez utiliser. Un mot de passe vous sera demandé. La combinaison hachée de login sera écrite sur la console, et vous devrez l’ajouter manuellement à la fin du fichier auth. Répétez ce processus pour le nombre de logins que vous souhaitez ajouter.

      Lorsque vous avez terminé, créez un nouveau secret dans Kubernetes avec le contenu du fichier, en exécutant la commande suivante :

      • kubectl create secret generic theia-basic-auth --from-file=auth -n theia

      Vous pouvez voir le secret avec :

      • kubectl get secret theia-basic-auth -o yaml -n theia

      La sortie ressemblera à :

      Output

      apiVersion: v1 data: auth: c2FtbXk6JGFwcjEkVFMuSDdyRWwkaFNSNWxPbkc0OEhncmpGZVFyMzEyLgo= kind: Secret metadata: creationTimestamp: "..." name: theia-basic-auth namespace: default resourceVersion: "10900" selfLink: /api/v1/namespaces/default/secrets/theia-basic-auth uid: 050767b9-8823-4fd3-b498-5f11074f768b type: Opaque

      Ensuite, vous devrez modifier l’Ingress pour qu’elle utilise le secret. Ouvrez la configuration du déploiement pour modification :

      Ajoutez les lignes surlignées à votre fichier :

      eclipse-theia.yaml

      apiVersion: v1
      kind: Namespace
      metadata:
        name: theia
      ---
      apiVersion: networking.k8s.io/v1beta1
      kind: Ingress
      metadata:
        name: theia-next
        namespace: theia
        annotations:
          kubernetes.io/ingress.class: nginx
          nginx.ingress.kubernetes.io/auth-type: basic
          nginx.ingress.kubernetes.io/auth-secret: theia-basic-auth
          nginx.ingress.kubernetes.io/auth-realm: 'Authentication Required - Eclipse Theia'
      spec:
        rules:
        - host: theia.your_domain
          http:
            paths:
            - backend:
                serviceName: theia-next
                servicePort: 80
      ...
      

      Tout d’abord, dans l’annotation auth-type​​​1​​​, vous spécifiez que le type d’authentification est basic. Cela signifie que Nginx demandera à l’utilisateur de saisir un nom d’utilisateur et un mot de passe. Ensuite, dans auth-secret, vous spécifiez que le secret qui contient la liste des combinaisons valables est theia-basic-auth, que vous venez de créer. L’annotation auth-realm restante spécifie un message qui sera montré à l’utilisateur pour expliquer pourquoi l’authentification est nécessaire.  Vous pouvez changer le message contenu dans ce champ à votre convenance.

      Enregistrez et fermez le fichier.

      Pour propager les changements à votre cluster, exécutez la commande suivante :

      • kubectl apply -f eclipse-theia.yaml

      Vous verrez la sortie :

      Output

      namespace/theia unchanged ingress.networking.k8s.io/theia-next configured service/theia-next unchanged deployment.apps/theia-next unchanged

      Accédez à votre domaine dans votre navigateur, où il vous sera demandé de vous connecter.

      Vous avez activé l’authentification de base sur votre Ingress en le configurant pour utiliser le secret contenant les combinaisons hachées de nom d’utilisateur et de mot de passe. Dans l’étape suivante, vous allez sécuriser davantage l’accès en ajoutant des certificats TLS, afin que le trafic entre vous et votre déploiement Eclipse Theia reste crypté.

      Étape 3 — Appliquer les certificats HTTPS Let’s Encrypt

      Maintenant,vous allez sécuriser votre installation Eclipse Theia en appliquant des certificats Let’s Encrypt à votre Ingress, que Cert-Manager fournira automatiquement. Après avoir terminé cette étape, votre installation Eclipse Theia sera accessible via HTTPS.

      Ouvrez eclipse-theia.yaml​​​​ pour le modifier :

      Ajoutez les lignes surlignées à votre fichier, en veillant à remplacer l’espace réservé au domaine par le vôtre :

      eclipse-theia.yaml

      apiVersion: v1
      kind: Namespace
      metadata:
        name: theia
      ---
      apiVersion: networking.k8s.io/v1beta1
      kind: Ingress
      metadata:
        name: theia-next
        namespace: theia
        annotations:
          kubernetes.io/ingress.class: nginx
          nginx.ingress.kubernetes.io/auth-type: basic
          nginx.ingress.kubernetes.io/auth-secret: theia-basic-auth
          nginx.ingress.kubernetes.io/auth-realm: 'Authentication Required - Eclipse Theia'
          cert-manager.io/cluster-issuer: letsencrypt-prod
      spec:
        tls:
        - hosts:
          - theia.your_domain
          secretName: theia-prod
        rules:
        - host: theia.your_domain
          http:
            paths:
            - backend:
                serviceName: theia-next
                servicePort: 80
      ...
      

      Tout d’abord, vous spécifiez le ClusterIssuer letsencrypt-prod que vous avez créé dans le cadre des conditions préalables en tant qu’émetteur ; il sera utilisé dans le but de fournir des certificats pour cette Ingress. Ensuite, dans la section tls, vous spécifiez le domaine exact qui doit être sécurisé, ainsi qu’un nom pour un secret qui détiendra ces certificats.

      Enregistrez et quittez le fichier.

      Appliquez les changements à votre cluster en exécutant la commande suivante :

      • kubectl apply -f eclipse-theia.yaml

      La sortie ressemblera à :

      Output

      namespace/theia unchanged ingress.networking.k8s.io/theia-next configured service/theia-next unchanged deployment.apps/theia-next unchanged

      Il faudra quelques minutes pour que les certificats soient provisionnés et entièrement appliqués. Vous pouvez suivre les progrès en observant la sortie de la commande suivante :

      • kubectl describe certificate theia-prod -n theia

      Lorsque ce sera terminé, la fin de la sortie ressemblera à ceci :

      Output

      ... Events: Type Reason Age From Message ---- ------ ---- ---- ------- Normal GeneratedKey 42m cert-manager Generated a new private key Normal Requested 42m cert-manager Created new CertificateRequest resource "theia-prod-3785736528" Normal Issued 42m cert-manager Certificate issued successfully

      Rafraîchissez votre domaine dans votre navigateur. Vous verrez un cadenas vert à l’extrémité gauche de la barre d’adresse, ce qui signifie que la connexion est sécurisée.

      Vous avez configuré l’Ingress pour utiliser les certificats Let’s Encrypt, ce qui rend votre déploiement Eclipse Theia plus sécurisé. Vous pouvez maintenant revoir l’interface utilisateur par défaut d’Eclipse Theia.

      Étape 4 — Utilisation de l’interface d’Eclipse Theia

      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.

      Interface graphique Eclipse Theia - 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’aurez enregistré, vous pourrez visualiser son nom 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.

      Interface graphique Eclipse Theia - Nouveau dossier

      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

      Debugger View avec launch.json ouvert

      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.

      Vue de l'éditeur sous forme de grille

      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.

      Terminal ouvert

      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.

      Conclusion

      Vous disposez maintenant d’Eclipse Theia, un IDE cloud polyvalent, installé sur votre cluster DigitalOcean Kubernetes. Vous l’avez sécurisé avec un certificat gratuit Let’s Encrypt TLS et vous avez configuré l’instance de façon à exiger des identifiants de connexion de la part du visiteur. 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.



      Source link