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 :

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

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

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

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

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

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

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.