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

L’auteur a choisi le Free and Open Source Fund comme récipiendaire d’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 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 cloud IDE de code-server sur votre machine Ubuntu 18.04 et l’exposer à votre domaine, sécurisé par des certificats TLS Let’s Encrypt gratuits. Au final, vous disposerez du code Microsoft Visual Studio sur votre serveur Ubuntu 18.04, disponible sur votre domaine et protégé par un mot de passe.

Conditions préalables

• Un serveur fonctionnant sous 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 obtenir un guide sur la façon de procéder, suivez les étapes 1 à 4 de Comment installer Nginx sous Ubuntu 18.04.

• Les deux enregistrements DNS suivants ont été configurés pour votre serveur. Vous pouvez suivre cette introduction à DigitalOcean DNS pour savoir comment les ajouter.

  • Un enregistrement A avec your-domain pointant à l’adresse IP publique de votre serveur.
  • Un enregistrement A avec your-domain pointant à l’adresse IP publique de votre serveur.

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

Étape 1 - Installez code-server

Dans cette section, vous allez mettre en place 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 plantages 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 :

mkdir ~/code-server

Naviguez jusqu’à lui :

cd ~/code-server

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, la dernière version était 2.1692. Téléchargez-le en utilisant wget et en exécutant la commande suivante :

wget https://github.com/cdr/code-server/releases/download/2.1692-vsc1.39.2/code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

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

tar -xzvf code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

Vous obtiendrez un dossier nommé exactement comme le fichier original que vous avez téléchargé, qui contient l’exécutable du code-server. Naviguez jusqu’à lui :

cd code-server2.1692-vsc1.39.2-linux-x86_64

Copiez l’exécutable du code-server dans /usr/local/bin afin de pouvoir y accéder à l’échelle du système en exécutant la commande suivante :

sudo cp code-server /usr/local/bin

Ensuite, créez un dossier pour code-server, dans lequel 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 :

[Unit]
Description=code-server
After=nginx.service

[Service]
Type=simple
Environment=PASSWORD=your_password
ExecStart=/usr/local/bin/code-server --host 127.0.0.1 --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 de code-server global doit être lancé avec quelques arguments spécifiques à server-code. --host 127.0.0.1 le lie à localhost, de sorte qu’il n’est 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 de lui.

N’oubliez pas de remplacer your_password par 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 statut :

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 Mon 2019-12-09 20:07:28 UTC; 4s ago
 Main PID: 5216 (code-server)
    Tasks: 23 (limit: 2362)
   CGroup: /system.slice/code-server.service
           ├─5216 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password
           └─5240 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password

Dec 09 20:07:28 code-server-ubuntu-1804 systemd[1]: Started code-server.
Dec 09 20:07:29 code-server-ubuntu-1804 code-server[5216]: info  Server listening on http://127.0.0.1:8080
Dec 09 20:07:29 code-server-ubuntu-1804 code-server[5216]: info    - Using custom password for authentication
Dec 09 20:07:29 code-server-ubuntu-1804 code-server[5216]: 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 démarrage du serveur. Ensuite, vous l’exposerez à 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 :

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 :

sudo nginx -t

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, vous devez ajouter son dépôt de paquets à votre serveur en exécutant la commande suivante :

sudo add-apt-repository ppa:certbot/certbot

Vous devez appuyer sur ENTER pour accepter.

Ensuite, installez Certbot et son plugin Nginx :

sudo apt install python-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 :

sudo ufw allow https

Le résultat sera :

Output
Rule added
Rule added (v6)

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

sudo ufw reload

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.

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

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

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. Le code de Visual Studio prend également en charge d’autres fournisseurs de contrôle des sources, et vous trouverez dans cette documentation des instructions supplémentaires sur les flux de travail de contrôle des sources avec l’éditeur.

L’option de débogueur de la barre d’activité fournit toutes les actions communes de débogage dans le panneau. Le code Visual Studio est livré avec un support intégré pour le débogueur 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

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

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.

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

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, d’un IDE cloud polyvalent, installé sur votre serveur Ubuntu 18.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 sur le code de Visual Studio pour afficher 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 IDE de code-server sur les Kubernetes de DigitalOcean.