Développement distant en SSH avec VSCode

Dans cet article, nous allons voir comment développer directement sur un serveur distant avec VS Code, en éditant les fichiers stockés sur le serveur sans garder de copie locale ni faire d'upload manuel.

Mon cas d'usage était simple : je devais exécuter un script Python sur un serveur Linux qui pouvait accéder à une base de données Oracle. Mais mon environnement de développement local (mon ordinateur ou une VM Windows) ne pouvait pas joindre la base à cause de restrictions réseau.

Trois articles liés : Comment se connecter à votre serveur d'hébergement en SSH pour mettre en place la connexion par clé, sans mot de passe, sur laquelle repose cette extension ; One Docker Image for Production and Devcontainers pour l'approche inverse — amener l'environnement du serveur sur votre machine plutôt que le contraire ; et Ouvrir un DevContainer sur un serveur distant avec VSCode Remote SSH pour l'étape suivante — ouvrir un devcontainer sur l'host distant afin d'atteindre des services inaccessibles depuis votre machine locale.

Le résultat​

Une fois l'extension Remote - SSH connectée (on voit ça plus bas), VS Code édite les fichiers et exécute les commandes directement sur l'host distant — pas d'upload, pas de copie locale :

Pourquoi ça fonctionne​

• Aucun transfert de fichier manuel — l'éditeur lit et écrit directement sur le système de fichiers distant.
• Le terminal intégré tourne sur l'host distant lui-même, exactement comme si vous étiez connecté en SSH.
• Un seul outil pour éditer et exécuter — plus besoin d'une session SSH d'un côté et d'un client SFTP de l'autre.

Entrons dans le vif du sujet : le développement distant avec VS Code et SSH.

Installation — simuler un serveur en local avec Docker​

On va d'abord simuler un serveur en local avec Docker, histoire d'apprendre le workflow sans risque. Ensuite, on refera les mêmes étapes sur un vrai serveur de production.

Créons un container Docker qui jouera le rôle de serveur SSH Linux, pour s'entraîner à s'y connecter depuis VS Code.

Créer le container Docker qui servira de serveur SSH​

Créez un Dockerfile avec le contenu ci-dessous.

Ensuite, il faut construire l'image Docker et créer le container. Pour le build, lancez docker build -t ssh-server .. Puis créez le container avec docker run -d -p 2222:22 --name remote-dev ssh-server.

$ docker build -t ssh-server .
$ docker run -d -p 2222:22 --name remote-dev ssh-server▋

Le container joue le rôle de serveur SSH et (pour cette démo) crée un utilisateur christophe avec le mot de passe p@ssword.

Tester notre container​

Testez le container en acceptant l'empreinte de l'host et en saisissant le mot de passe (p@ssword) quand il est demandé.

$ ssh christophe@localhost -p 2222

The authenticity of host '[localhost]:2222 ([127.0.0.1]:2222)' can't be established.
ECDSA key fingerprint is SHA256:/XRLXCojjc9ykoYiuM0aEhDKu5MyZuUU793NokTqxlI.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added '[localhost]:2222' (ECDSA) to the list of known hosts.

christophe@localhost's password:
▋

Une fois connecté, lancez des commandes comme ls -alh, hostname ou whoami.

Ce test rapide montre que le container fonctionne et qu'on peut s'y connecter en SSH.

Autres démos​

L'extension Remote - SSH​

Notre objectif : démarrer VS Code et éditer des fichiers directement sur le serveur.

Pour ça, il faut installer l'extension Remote - SSH de Microsoft.

Une fois installée, un nouveau bouton apparaît sur la gauche : Remote Explorer. Cliquez dessus et, dans le nouveau panneau, sélectionnez Remotes (Tunnels/SSH) dans la liste déroulante. (Si vous ne le voyez pas, vérifiez que l'extension est bien installée.)

Cliquez sur le bouton + pour créer une nouvelle connexion :

VS Code vous demande alors la chaîne de connexion SSH.

Dans notre exemple, ce sera ssh christophe@localhost -p 2222 parce que :

• L'utilisateur défini dans notre Dockerfile est christophe,
• Notre serveur est localhost (puisqu'il s'agit d'un container Docker qui tourne sur notre machine), et
• Le port à utiliser est 2222 (celui qu'on a indiqué dans la commande docker run).

VS Code vous demandera ensuite quel fichier de configuration SSH mettre à jour.

VS Code va créer ou mettre à jour le fichier de configuration SSH choisi et afficher quelque chose comme ceci :

Maintenant, si vous cliquez sur la cible SSH dans le panneau de gauche, vous verrez le serveur remote-dev avec une icône de connexion à côté :

Sélectionnez le type d'OS distant (Linux), authentifiez-vous, puis ouvrez le dossier home de l'utilisateur. Vous pouvez créer des fichiers (par exemple hello.sh), les rendre exécutables et les lancer depuis le terminal intégré. Un hostname affiche le nom d'host du container (pas celui de votre machine locale).

Pour bien voir la différence, quittez VS Code, retournez dans votre terminal et lancez ssh christophe@localhost -p 2222.

On retrouve bien notre fichier hello.sh :

On refait la même chose sur un vrai serveur de production​

D'abord, assurez-vous que votre configuration SSH et vos clés sont en place pour vous connecter au serveur de production.

J'ai expliqué comment créer une connexion SSH vers un serveur d'hébergement (PlanetHoster, dans mon cas) dans cet article : Comment se connecter à votre serveur d'hébergement en SSH.

Si vous avez suivi ce guide, vous devriez pouvoir vous connecter à votre serveur de production avec des clés SSH et un alias configuré dans ~/.ssh/config (par exemple planethoster).

Host planethoster?
    HostName node30-eu.n0c.com
    User john_doe
    Port 5022?
    IdentityFile ~/.ssh/id_ed25519_planethoster?

Dans VS Code, ouvrez le panneau Remote Explorer et choisissez Remotes (Tunnels/SSH). Sélectionnez l'host configuré (par exemple planethoster) et cliquez sur l'icône de connexion. Choisissez l'OS (Linux) et le dossier à ouvrir (généralement le home de l'utilisateur). Une fois connecté, vos modifications et vos commandes dans le terminal agissent directement sur l'host distant — aucun upload nécessaire.

Vous êtes maintenant connecté à votre serveur de production via VS Code et l'extension Remote - SSH — exactement le résultat montré en début d'article. Si vous modifiez des fichiers, vous modifiez directement ceux du serveur. Plus rien à uploader.

Sous le capot (à sauter si vous voulez juste l'utiliser)​

Conclusion​

L'extension Remote - SSH de VS Code vous permet de développer directement sur des hosts distants avec toute la puissance de votre éditeur et de vos outils locaux. Combinée à un workflow sûr (tests en local, clés SSH, bonnes pratiques de sécurité évoquées plus haut), c'est une option très efficace quand des contraintes réseau empêchent le développement en local.

Les commandes lancées dans le terminal intégré de VS Code s'exécutent sur l'host distant, comme si vous y étiez connecté en SSH.

En début d'article, je disais ne pas pouvoir joindre une base de données depuis mon ordinateur à cause de restrictions réseau. Avec l'extension Remote - SSH, se connecter au serveur depuis l'éditeur devient possible, et plutôt simple.