One place for hosting & domains

      Comment utiliser Visual Studio Code pour le développement à distance via le plugin Remote-SSH


      Introduction

      Visual Studio Code est un environnement de développement intégré (IDE) populaire pour les développeurs. Son grand choix de plugins, sa conception minimale et son support cross-platform en font une solution idéale pour les développeurs de tous niveaux. Ce tutoriel met l’accent sur l’utilisation du plugin Remote-SSH pour activer le développement de logiciels à distance. Avec ce plugin, vous pouvez éditer des fichiers sur votre poste de travail local, mais aussi exécuter des tâches de développement telles que l’exécution de programmes, les tests unitaires ou l’analyse statique sur un serveur distant.

      Il existe de nombreuses raisons pour lesquelles cela peut vous être bénéfique. Par exemple, vous pouvez avoir un poste de travail Windows et vouloir développer sur Windows, mais votre code tournera au final sur Linux. Vous pouvez avoir besoin de davantage de mémoire vive ou de puissance de traitement que n’en possède votre machine actuelle, ou vous souhaitez maintenir le code à l’écart de votre machine personnelle en raison d’une politique d’entreprise, ou du désir de préserver votre poste de travail.

      Dans ce tutoriel, vous allez activer le plugin Remote-SSH, configurer Visual Studio Code pour exécuter le code sur le serveur distant, et exécuter le code de votre installation locale de Visual Studio Code sur le serveur distant.

      Conditions préalables

      Pour suivre ce guide, vous aurez besoin des éléments suivants :

      • Une machine de développement locale fonctionnant sous Windows, MacOSX ou Linux. Ce tutoriel ne fonctionnera pas sur les dispositifs ChromeOS.
      • Visual Studio Code, que vous pouvez télécharger et installer depuis le site web officiel.
      • Une paire de clés SSH générée :
      • Un serveur Ubuntu 18.04 configuré en suivant le guide de configuration initiale du serveur Ubuntu 18.04, comprenant un utilisateur non root sudo activé et un pare-feu.

      Étape 1 — Installation du plugin Remote-SSH

      Extensions Marketplace​​​ est l’endroit où vous pouvez télécharger les extensions prises en charge et les extensions tierces pour une variété d’outils et de langages de programmation différents. C’est là que vous allez rechercher le plugin Remote-SSH en vue de l’installer.

      Sur le côté gauche de l’IDE, il existe une rangée verticale de cinq icônes. L’icône du bas, qui ressemble à quatre carrés dans une boîte avec le carré supérieur droit qui explose, est l’icône d’Extensions Marketplace :

      Emplacement de l'icône Extensions Marketplace

      Vous pouvez également accéder à cette section en appuyant sur Ctrl+Shift+X. Lorsque vous ouvrirez cette page, vous verrez des suggestions de plugins à télécharger et à installer.

      Une fois que vous avez ouvert Extensions Marketplace, tapez Remote-SSH dans la barre de recherche d’Extensions Marketplace. Lorsque vous trouvez le plugin, sélectionnez-le et cliquez ensuite sur le bouton vert Install pour installer l’extension.

      Recherche du plugin Remote SSH

      L’extension est maintenant installée. Ensuite, vous allez configurer l’extension afin de pouvoir vous connecter à votre serveur.

      Étape 2 — Configuration du plugin Remote-SSH et connexion à votre serveur

      Maintenant que vous avez installé le plugin, vous pouvez le configurer pour vous connecter à un serveur. Pour ce faire, vous aurez besoin des éléments d’information suivants :

      • L’IP ou le nom d’hôte du serveur.
      • Le nom d’utilisateur avec lequel vous allez vous connecter.
      • La clé privée que vous utiliserez pour authentifier votre utilisateur.

      Vous utiliserez ces informations pour créer un fichier de configuration SSH que Visual Studio Code peut utiliser pour SSH vers le serveur afin de synchroniser les fichiers et d’exécuter le code en votre nom. Vous allez créer cette configuration en utilisant Visual Studio Code.

      Maintenant que vous avez installé le plugin Remote-SSH, vous verrez une petite boîte verte dans le coin en bas à gauche de l’interface Visual Studio Code. Si vous survolez la boîte avec le pointeur de votre souris, la fenêtre contextuelle indiquera Open a remote window. Le bouton ressemble à un signe “supérieur à” situé un peu au-dessous d’un signe “inférieur à” (><), comme l’illustre l’image suivante :

      Bouton vert de l'interface Open a remote window

      Cliquez sur le bouton, et une boîte de dialogue apparaît en haut, au centre. Sélectionnez Remote-SSH : Open Configuration File… dans la liste :

      Selecting Configure SSH in the UI

      L’invite suivante vous demandera quel fichier de configuration vous voulez ouvrir. Si vous êtes sous Windows, vous verrez deux emplacements : un dans votre répertoire utilisateur personnel, et un dans l’emplacement d’installation pour SSH. Vous devez utiliser le fichier dans votre répertoire utilisateur lors de la configuration du serveur.

      Sélectionnez le fichier et votre éditeur ouvrira le fichier config. Ajoutez le code suivant au fichier pour définir la connexion à votre serveur, en remplaçant les sections surlignées par les informations de votre serveur :

      config

      Host my_remote_server
          HostName your_server_ip_or_hostname
          User sammy
          IdentityFile /location/of/your/private/key
      

      Voici comment fonctionne ce fichier de configuration :

      • Host : spécifie un nom pour votre hôte. Cela vous permet d’utiliser un nom ou abrégé au lieu de l’adresse IP complète ou du nom d’hôte lors de la connexion au serveur.
      • HostName : le nom d’hôte réel du serveur, qui est soit une adresse IP, soit un nom de domaine entièrement qualifié.
      • User : l’utilisateur que vous voulez utiliser pour vous connecter.
      • IdentityFile: : le chemin vers votre clé privée SSH. Sur les systèmes Mac et Linux, vous le trouverez dans votre répertoire personnel, dans un répertoire .ssh caché, généralement appelé id_rsa. Si vous êtes sous Windows, vous avez spécifié un emplacement pour enregistrer ce fichier lorsque vous l’avez créé en utilisant putty-gen.

      Spécifiez les valeurs appropriées dans votre fichier et enregistrez le fichier.

      Visual Studio Code est maintenant configuré et prêt à vous connecter à votre serveur. Cliquez sur le bouton vert Open a remote window​​​​​​ dans le coin inférieur gauche et sélectionnez Remote-SSH : Connect to Host…

      Connexion au serveur depuis Visual Studio Code

      Une fois que vous avez fait tout cela, les serveurs disponibles et configurés apparaîtront dans le menu déroulant. Sélectionner le serveur auquel vous voulez vous connecter à partir de cette liste.

      Si c’est la première fois que vous vous connectez à ce serveur depuis votre machine, vous serez probablement invité à utiliser la boîte de dialogue de vérification des empreintes digitales SSH, comme celle qui figure dans l’image suivante :

      Confirmer votre empreinte digitale SSH

      Cela permet de s’assurer que vous vous connectez réellement au serveur auquel vous pensez. Vous pouvez le vérifier en vous connectant manuellement à votre serveur et en exécutant ssh-keygen -l -f /etc/ssh/ssh_host_key.pub pour visualiser l’empreinte digitale du serveur. Si cette empreinte digitale est la même que celle qui vous est présentée dans Visual Studio Code, alors vous vous connectez effectivement au serveur auquel vous pensez, vous pouvez donc cliquer sur Continue.

      Visual Studio Code ouvre par défaut une nouvelle fenêtre lorsqu’une nouvelle connexion est établie. Une nouvelle fenêtre apparaîtra avec l’écran d’accueil. Vous saurez que votre connexion a réussi si vous voyez SSH : your_ip_address_or_hostname dans la boîte verte, située dans le coin inférieur gauche. Cela signifie que Visual Studio Code est connecté et communique avec votre serveur distant.

      Connexion SSH réussie

      Maintenant que vous êtes connecté, vous pouvez exécuter des commandes et du code à partir de votre éditeur.

      Étape 3 — Exécution de code sur le serveur distant

      Le plugin Remote-SSH est configuré, et il est temps d’exécuter du code sur votre machine distante. Ouvrez une fenêtre de terminal en sélectionnant Terminal dans la barre de navigation en haut de la fenêtre Visual Studio et en cliquant sur New Terminal. Vous pouvez également ouvrir un terminal en appuyant sur CTRL+Shift+`. Le terminal qui est ouvert est un terminal sur votre serveur distant, et non un terminal sur votre machine locale.

      Lorsque le terminal s’ouvre, lancez la commande suivante pour afficher l’adresse IP de votre serveur afin de vérifier que vous êtes connecté à votre serveur distant :

      Vous verrez la sortie suivante dans votre terminal :

      Output

      1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000 link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00 inet 127.0.0.1/8 scope host lo valid_lft forever preferred_lft forever inet6 ::1/128 scope host valid_lft forever preferred_lft forever 2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000 link/ether 16:cb:05:5b:30:f1 brd ff:ff:ff:ff:ff:ff inet your_server_ip brd your_broadcast_address scope global eth0 valid_lft forever preferred_lft forever ...

      Pour tester la capacité d’exécution de code distant, créez un nouveau fichier Python appelé hello.py dans votre éditeur. Lorsque vous êtes connecté à votre serveur distant, tous les fichiers créés par Visual Studio Code sont enregistrés sur ce serveur, et non sur votre machine locale.

      Ajoutez le contenu suivant au fichier :

      hello.py

      print("Hello Sammy!")
      

      Pour exécuter ce programme sur votre serveur, ouvrez un terminal dans Visual Studio Code à partir du menu navigation ou en appuyant sur la séquence de touches CTRL+Shift+`. Comme cette session de terminal est connectée à votre serveur distant, exécutez la commande suivante dans le terminal pour exécuter votre programme hello.py :

      La sortie de votre programme sera affichée.

      Exécuter votre script Python

      Vous pouvez également exécuter le fichier à partir du menu contextuel Debug en sélectionnant Run without Debugging.

      Remarque : Si vous avez des extensions de développement installées dans Visual Studio Code, telle que l’extension Python, vous devrez réinstaller ces extensions sur votre serveur via Extensions Marketplace. Si vous avez déjà installé ces plugins dans Visual Studio Code, lorsque vous les recherchez à nouveau, le Marketplace indiquera Install on SSH: hostname. Faites toujours attention au contexte de développement dans lequel vous vous trouvez, car c’est là que Visual Studio Code installera vos plugins et créera vos fichiers. Si vous essayez d’exécuter votre code sans que ces plugins soient installés, des boîtes de dialogue d’erreur apparaîtront dans le coin inférieur droit de l’écran, vous invitant à les installer sur votre serveur distant. Une fois que vous les aurez installés, vous devrez probablement recharger Visual Studio Code. Lorsque vous le relancerez, il continuera à fonctionner sur le serveur distant sans que vous ayez à vous reconnecter manuellement.

      Conclusion

      Le code Visual Studio est maintenant configuré pour le développement sur un serveur distant utilisant SSH. L’exécution à distance avec un IDE offre de nombreux avantages, notamment la possibilité de tester rapidement le fonctionnement de votre code sur différents systèmes d’exploitation et pour différentes spécifications matérielles. Tant que vous disposez d’une connexion Internet, vous pouvez vous connecter à votre serveur et travailler sur votre code depuis n’importe quel ordinateur, et vous pourrez développer en utilisant un environnement Linux même si vous utilisez Windows comme système d’exploitation principal.



      Source link