Comment configurer la plate-forme Cloud IDE du serveur de code 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, la création et l'adoption de plates-formes cloud IDE (Integrated Development Environment) se développent. Les IDE cloud 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 IDE cloud sont disponibles à partir de tous les types d'appareils modernes.

code-server est Microsoft Visual Studio Code exécuté sur un serveur distant et accessible directement depuis votre navigateur. Visual Studio Code est un éditeur de code moderne avec prise en charge Git intégrée, un débogueur de code, une saisie semi-automatique intelligente et des fonctionnalités personnalisables et extensibles. Cela signifie que vous pouvez utiliser différents appareils exécutant différents systèmes d'exploitation et toujours disposer d'un environnement de développement cohérent.

Dans ce didacticiel, vous allez configurer la plate-forme IDE cloud du serveur de code sur votre machine Ubuntu 18.04 et l'exposer sur votre domaine, sécurisée avec des certificats TLS Let's Encrypt gratuits. Au final, vous aurez Microsoft Visual Studio Code en cours d'exécution sur votre serveur Ubuntu 18.04, disponible sur votre domaine et protégé par un mot de passe.

Conditions préalables

  • Un serveur exécutant Ubuntu 18.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 savoir comment procéder, suivez les étapes 1 à 4 de Comment installer Nginx sur Ubuntu 18.04.
  • Un nom de domaine entièrement enregistré pour héberger code-server, pointé vers votre serveur. Ce didacticiel utilisera code-server.your-domain tout au long. 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 plus de détails sur la façon de les ajouter.

Étape 1 - Installation du serveur de code

Dans cette section, vous allez configurer code-server sur votre serveur. Cela implique de télécharger la dernière version et de créer un service systemd qui maintiendra le serveur de code toujours en cours d'exécution en arrière-plan. Vous spécifierez également une stratégie de redémarrage pour le service, afin que le serveur de code reste disponible après d'éventuels plantages ou redémarrages.

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

mkdir ~/code-server

Accédez-y :

cd ~/code-server

Vous devrez vous rendre sur la page Github releases de code-server et choisir la dernière version de Linux (le fichier contiendra "linux" dans son nom). Au moment de la rédaction, la dernière version était 3.2.0. Téléchargez-le en utilisant wget en exécutant la commande suivante :

wget https://github.com/cdr/code-server/releases/download/3.2.0/code-server-3.2.0-linux-x86_64.tar.gz

Ensuite, décompressez l'archive en exécutant :

tar -xzvf code-server-3.2.0-linux-x86_64.tar.gz

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

sudo cp -r code-server-3.2.0-linux-x86_64 /usr/lib/code-server

Créez ensuite un lien symbolique en /usr/bin/code-server, pointant vers l'exécutable du serveur de code :

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

Ensuite, créez un dossier pour code-server, où il stockera les données utilisateur :

sudo mkdir /var/lib/code-server

Maintenant que vous avez téléchargé code-server et que vous l'avez rendu disponible à l'échelle du système, vous allez créer un service systemd pour que code-server continue de fonctionner en arrière-plan à tout moment.

Vous stockerez 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 à l'aide de 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 spécifiez d'abord la description du service. Ensuite, vous indiquez que le service nginx doit être démarré 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 global code-server doit être démarré avec quelques arguments spécifiques à code-server. --bind-addr 127.0.0.1:8080 le lie à localhost au 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 par le mot de passe souhaité, puis enregistrez et fermez le fichier.

La ligne suivante indique à systemd de redémarrer code-server dans tous les événements de dysfonctionnement (par exemple, lorsqu'il se bloque ou que le processus est tué). 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 a démarré correctement en observant son état :

sudo systemctl status code-server

Vous verrez une sortie similaire à :

Output● code-server.service - code-server
   Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled)
   Active: active (running) since Tue 2020-05-12 20:53:29 UTC; 11s ago
 Main PID: 3236 (node)
    Tasks: 14 (limit: 2362)
   CGroup: /system.slice/code-server.service
           ├─3236 /usr/lib/code-server/node /usr/lib/code-server/out/node/entry.js --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth pas
           └─3258 /usr/lib/code-server/node /usr/lib/code-server/out/node/entry.js --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth pas

May 12 20:53:29 code-server-update systemd[1]: Started code-server.
May 12 20:53:30 code-server-update code-server[3236]: info  code-server 3.2.0 fd36a99a4c78669970ebc4eb05768293b657716f
May 12 20:53:30 code-server-update code-server[3236]: info  HTTP server listening on http://127.0.0.1:8080
May 12 20:53:30 code-server-update code-server[3236]: info    - Using custom password for authentication
May 12 20:53:30 code-server-update code-server[3236]: info    - Not serving HTTPS
May 12 20:53:30 code-server-update code-server[3236]: info  Automatic updates are enabled

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 avez créé un service systemd pour celui-ci et l'avez activé, de sorte que code-server démarrera à chaque démarrage du serveur. Ensuite, vous l'exposerez sur votre domaine en configurant Nginx pour qu'il serve de proxy inverse entre le visiteur et le serveur de code.

Étape 2 - Exposer le serveur de code sur votre domaine

Dans cette section, vous allez configurer Nginx en tant que proxy inverse pour code-server.

Comme vous l'avez appris à l'étape préalable de Nginx, ses fichiers de configuration de site sont stockés sous /etc/nginx/sites-available et doivent ensuite être liés symboliquement à /etc/nginx/sites-enabled pour devenir actifs.

Vous stockerez la configuration pour exposer le serveur de code sur 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 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 demandes doivent être transmises dans les deux sens au serveur de code s'exécutant sur localhost:8080. Les trois lignes suivantes (commençant par proxy_set_header) ordonnent à Nginx de reporter certains en-têtes de requête HTTP nécessaires au bon fonctionnement de WebSockets, que code-server utilise largement.

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 :

sudo nginx -t

Vous verrez le résultat suivant :

Outputnginx: 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 devrez redémarrer Nginx :

sudo systemctl restart nginx

Vous avez maintenant votre installation de serveur de code accessible sur votre domaine. À l'étape suivante, vous le sécuriserez en appliquant un certificat Let's Encrypt TLS gratuit.

Étape 3 - Sécuriser votre domaine

Dans cette section, vous allez sécuriser votre domaine à l'aide d'un certificat Let's Encrypt TLS, que vous provisionnerez à l'aide de Certbot.

Pour installer la dernière version de Certbot, vous devrez ajouter son référentiel de packages à votre serveur en exécutant la commande suivante :

sudo add-apt-repository ppa:certbot/certbot

Vous devrez appuyer sur ENTER pour accepter.

Ensuite, installez Certbot et son plugin Nginx :

sudo apt install python-certbot-nginx

Dans le cadre des prérequis, vous avez activé ufw (pare-feu non compliqué) et l'avez configuré pour autoriser le trafic HTTP non chiffré. Pour pouvoir accéder au site sécurisé, vous devrez le configurer pour accepter le trafic chiffré en exécutant la commande suivante :

sudo ufw allow https

La sortie sera :

OutputRule added
Rule added (v6)

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

sudo ufw reload

La sortie affichera :

OutputFirewall reloaded

Ensuite, dans votre navigateur, accédez au domaine que vous avez utilisé pour code-server. Vous verrez l'invite de connexion au serveur de code.

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

Maintenant que vous avez vérifié que le serveur de code est correctement exposé sur votre domaine, vous allez installer les certificats Let's Encrypt TLS pour le sécuriser, à l'aide de Certbot.

Pour demander des certificats pour votre domaine, exécutez la commande suivante :

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

Dans cette commande, vous exécutez certbot pour demander des certificats pour votre domaine. Vous transmettez le nom de domaine avec le paramètre -d. L'indicateur --nginx lui indique de modifier automatiquement la configuration du site Nginx pour prendre en charge 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 e-mail pour les avis urgents et d'accepter les conditions d'utilisation de l'EFF. Certbot demandera ensuite des certificats pour votre domaine à Let's Encrypt. Il vous demandera ensuite si vous souhaitez rediriger tout le trafic HTTP vers HTTPS :

OutputPlease 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 sélectionner la deuxième option afin de maximiser la sécurité. Après avoir entré votre sélection, appuyez sur ENTER.

La sortie sera similaire à ceci :

OutputIMPORTANT 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 code-server dans votre navigateur et observer un cadenas à gauche de l'adresse du site, ce qui signifie que votre connexion est bien sécurisée.

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

Étape 4 - Utilisation de l'interface du serveur de code

Dans cette section, vous utiliserez certaines des fonctionnalités de l'interface du serveur de code. Étant donné que code-server est Visual Studio Code exécuté dans le cloud, il a la même interface que l'édition de bureau autonome.

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

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, le premier bouton ouvre le menu général dans une liste déroulante, tandis que la seconde vue ouvre le panneau Explorateur qui fournit une navigation arborescente de 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. La vue suivante donne accès à une fonctionnalité de recherche et de remplacement.

Ensuite, dans l'ordre par défaut, se trouve votre vue des systèmes de contrôle de code source, comme Git. Le code Visual Studio prend également en charge d'autres fournisseurs de contrôle de source et vous pouvez trouver des instructions supplémentaires pour les flux de travail de contrôle de source avec l'éditeur dans cette documentation.

L'option de débogage de la barre d'activité fournit toutes les actions courantes de débogage dans le panneau. Visual Studio Code est livré avec une prise en charge intégrée du débogueur d'exécution Node.js et de tout langage qui se transpile en Javascript. Pour les autres langages, vous pouvez installer les extensions [1] pour le débogueur requis. Vous pouvez enregistrer les configurations de débogage dans le fichier launch.json.

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

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.

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 être effectuée 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 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.

Vous pouvez accéder à un terminal en saisissant CTRL+SHIFT+` , ou en cliquant sur Terminal dans le menu déroulant 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 du serveur de code et passé en revue certaines des fonctionnalités les plus couramment utilisées.

Conclusion

Vous avez maintenant code-server, un IDE cloud polyvalent, installé sur votre serveur Ubuntu 18.04, exposé sur 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'exécution d'un IDE cloud libère des ressources sur votre machine locale et vous permet de mettre à l'échelle les ressources en cas de besoin. Pour plus d'informations, consultez la documentation Visual Studio Code pour des fonctionnalités supplémentaires et des instructions détaillées sur d'autres composants de code-server.

Si vous souhaitez exécuter code-server sur votre cluster DigitalOcean Kubernetes, consultez notre didacticiel sur Comment configurer la plate-forme Cloud IDE de code-server sur DigitalOcean Kubernetes.