Configuration de VS Code pour développer à distance via SSH
Après avoir installé et configuré WordPress, nous voulons développer des sous-sites en parallèle pour tester la programmation PHP, Javascript sur un serveur NodeJSdans, Python pour le machine learning, et beaucoup d’autres projets.
Nous allons donc configurer la connexion à notre serveur Debian avec Visual Studio Code à l’aide de l’extension Visual Studio Code Remote – SSH. Il y a de nombreuses étapes de configuration. Nous allons les détaillées une part unes dans le bon ordre.
Nous créerons ensuite une application web Node.js Express pour montrer comment on peut modifier et déboguer sur une machine distante avec VS Code comme on le ferait si le code source était local.
1. Installation d’un client OpenSSH sous Windows 10
Nous utilisions pour l’instant le logiciel puTTY pour établir les connexions SSH chiffrés et sécurisés avec le VPS.
Visual Studio code ne reconnait pas le client putty. Nous allons donc nous servir du client openssh livré préinstallé mais pas obligatoirement activé avec Windows 10. Nous allons donc voir de manière de l’installer et l’activer.
1.1. Installation d’OpenSSH avec les Paramètres Windows
Les deux composants OpenSSH peuvent être installés à l’aide des Paramètres Windows sur les appareils Windows Server 2019 et Windows 10.
Pour installer les composants OpenSSH :
- Dans Windows 10, ouvrir Paramètres, sélectionnez Applications > Applications et fonctionnalités, puis Fonctionnalités facultatives.
- Parcourir la liste pour voir si OpenSSH est déjà installé. Si ce n’est pas le cas, sélectionnez Ajouter une fonctionnalité en haut de la page, puis :
- Rechercher OpenSSH Client et cliquez sur Installer.
- Rechercher OpenSSH Server et cliquez sur Installer.
Une fois l’installation terminée, revenez à Applications > Applications et fonctionnalités et Fonctionnalités facultatives. Vous devriez voir OpenSSH dans la liste.
Dans le cas ci-dessous, on voit que le client OpenSSH est déjà installé.
Pour installer le serveur OpenSSH :
- Cliquer sur [+ / Ajouter une fonctionnalité], puis on entrer dans le champ de recherche « Open SSH »,
- Sélectionner la case à cocher
Cliquer sur le bouton « Installer »
1.2. Installation d’OpenSSH avec PowerShell
Pour installer OpenSSH avec PowerShell, exécutez PowerShell en tant qu’administrateur. Pour vous assurer qu’OpenSSH est disponible, exécutez l’applet de commande suivante :
Get-WindowsCapability -Online | Where-Object Name -like 'OpenSSH*'
La sortie suivante doit être retournée si aucun n’est déjà installé :
Name : OpenSSH.Client~~~~0.0.1.0 State : NotPresent Name : OpenSSH.Server~~~~0.0.1.0 State : NotPresent
Ensuite, installez les composants serveur ou client selon vos besoins :
# Install the OpenSSH Client Add-WindowsCapability -Online -Name OpenSSH.Client~~~~0.0.1.0 # Install the OpenSSH Server Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0
Quel que soit le composant, la sortie suivante devrait être retournée :
Path : Online : True RestartNeeded : False
2. Création des clés d’authentification public et privée
Réutilisation de la clé générée dans PuTTYGen :
Le logiciel PuTTYGen avait été utilisé pour configurer l’authentification par clé publique SSH pour notre hôte virtuel privé accueillant le système Debian. VS Code n’étant pas compatible avec PuTTY, nous devons convertir notre clé privée afin que d’autres clients SSH (celui que nous avons installé dans l’étape précédente) puissent l’utiliser.
Nous utiliserons la paire de clé client/privé de l’utilisateur remi. La clé publique (« Public_key_remi ») est déjà installée sur le serveur VPS, donc il n’y a pas de manipulation à opérer côté serveur. Par contre nous allons convertir la clé privé « Private_key_remi.ppk » et la convertir en un format acceptable pour VS Code ; nous la nommerons « Private_key_remi_other.ppk ».
Pour ce faire :
- Ouvrir PuTTYGen localement et charger la clé privée que l’on veut convertir.
- Sélectionner Conversions > Exporter la clé OpenSSH dans le menu de l’application. Enregistrer la clé convertie dans un emplacement local sous le répertoire .ssh dans le dossier de profil utilisateur (par exemple C:\Users\notre_ruser\.ssh).
- Vérifier que ce nouveau fichier local nous appartient et qu’aucun autre utilisateur ne dispose des autorisations nécessaires pour y accéder.
3. Installation et configuration de Visual Studio Code
3.1. Installation de Visual Studio Code
Tout d’abord il faut télécharger VS Code, puis l’installer.
Je suis sous Windows, j’ai donc choisi de télécharger le « System Installer x64 ».
3.2. Configuration de VS Code – installation du Plugin Remote-SSH
Le « Extensions Marketplace » est l’endroit où l’on peut télécharger des extensions pour une grande variété d’outils et de langages de programmation :
- Sélectionner « Extensions » en cliquant sur le bouton encadré en rouge sur l’image ci-contre.
- Dans le champ destiné aux recherches, entrer « french » pour installer le plugin « French Language Pack » afin de traduite menus et autres libellés en langue Francaise.
- Sélectionner le plugin, puis cliquer sur le bouton « Install ».
- Ouvrir la palette de commande (menu « View/Command Palette… ou Ctrl+Shift+P), puis saisir « display » dans le champ de recherche.
- Sélectionner « Configure Display Language », puis « Français ». Une boite de dialogue indique que les changements prendont effets après avoir redémarré VS Code. Cliquer sur « Restart ».
- Sélectionner une seconde fois le bouton « Extensions ». Rechercher « Remote-SSH ».
- Sélectionner le champ dans la liste, puis, cliquer sur « Installer ».
- On constate les éléments ajoutés :
- Les extensions « Remote – SSH », « Remote – SSH: Editing Configuration Files” et “Remote Explorer” ont été installés
- Le bouton (entouré en rouge) « Explorateur distant »
- Cet élément montre dans quel contexte VS Code est exécuté (local ou distant) et si on clique sur l’élément, les commandes « Remote – SSH » s’affichent.
nano /etc/postfix/sasl_passwd
4. Configuration du Plugin Remote-SSH – Connexion au serveur VPS
Maintenant que le plugin « Remote-SSH » est installé, il faut le configurer pour se connecter à notre serveur distant. Pour ce faire, nous avons besoin des informations suivantes :
- Adresse IP ou nom d’hôte du serveur.
- Nom d’utilisateur avec lequel vous vous connecterez.
- Clé privée que nous utiliserons pour authentifier notre utilisateur (voir §2).
Cliquer sur le champ « Ouvrir une fenêtre distante » situé dans la barre d’état tout à gauche (couleur verte).
Sélectionner « Ouvrir le fichier de configuration SSH », puis définir l’emplacement dans lequel sera créé le fichier « Config » : nous choisissons le dossier dans lequel se trouve la clé privée de notre utilisateur (C:\Users\nom-user\.ssh\Config).
Voici comment fonctionne ce fichier de configuration :
- Hôte : spécifie un nom pour notre hôte. Cela permet d’utiliser un nom court ou une abréviation au lieu de l’adresse IP complète ou du nom d’hôte lorsque l’on se connecte au serveur.
- HostName : nom d’hôte réel du serveur, qui est soit une adresse IP, soit un nom de domaine complet.
- Utilisateur : Utilisateur avec lequel on souhaite se connecter.
- Port : Notre port de communication SSH (par défaut : 22)
- IdentityFile : chemin d’accès à notre clé privée SSH. Sur les systèmes Mac et Linux, on le trouve dans le répertoire de base dans un répertoire .ssh caché, généralement appelé id_rsa.
Sauvegarder le fichier « Config ».
Visual Studio Code est maintenant configuré et prêt à se connecter à notre serveur distant. Cliquer sur le bouton vert « Ouvrir une fenêtre distante » dans le coin inférieur gauche et sélectionnez « Se connecter à l’hôte… ».
