{"id":2014,"date":"2022-12-21T20:59:53","date_gmt":"2022-12-21T19:59:53","guid":{"rendered":"https:\/\/www.webodesign.net\/?page_id=2014"},"modified":"2023-01-06T15:23:59","modified_gmt":"2023-01-06T14:23:59","slug":"configuration-de-vs-code-pour-developper-a-distance-via-ssh","status":"publish","type":"page","link":"https:\/\/www.webodesign.net\/?page_id=2014","title":{"rendered":"Configuration de VS Code pour d\u00e9velopper \u00e0 distance via SSH"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-2716982c alignfull uagb-is-root-container\"><div class=\"uagb-container-inner-blocks-wrap\">\n<div class=\"wp-block-uagb-container uagb-block-c2155330\">\n<div class=\"wp-block-uagb-advanced-heading uagb-block-1c03b56d\"><p class=\"uagb-heading-text\">Configuration de VS Code pour d\u00e9velopper \u00e0 distance via SSH<\/p><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained\" style=\"border-style:none;border-width:0px;border-radius:0px\">\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-1b7994c1     \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tSommaire\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap\">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#1-installation-dun-client-openssh-sous-windows-10\" class=\"uagb-toc-link__trigger\">1. Installation d&#039;un client OpenSSH sous Windows 10<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#11-installation-dopenssh-avec-les-param\u00e8tres-windows\" class=\"uagb-toc-link__trigger\">1.1. Installation d\u2019OpenSSH avec les Param\u00e8tres Windows<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#12-installation-dopenssh-avec-powershell\" class=\"uagb-toc-link__trigger\">1.2. Installation d&#039;OpenSSH avec PowerShell<\/a><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#2-cr\u00e9ation-des-cl\u00e9s-dauthentification-public-et-priv\u00e9e\" class=\"uagb-toc-link__trigger\">2. Cr\u00e9ation des cl\u00e9s d\u2019authentification public et priv\u00e9e<\/a><li class=\"uagb-toc__list\"><a href=\"#3-installation-et-configuration-de-visual-studio-code\" class=\"uagb-toc-link__trigger\">3. Installation et configuration de Visual Studio Code<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#31-installation-de-visual-studio-code\" class=\"uagb-toc-link__trigger\">3.1. Installation de Visual Studio Code<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#32-configuration-de-vs-code-installation-du-plugin-remote-ssh\" class=\"uagb-toc-link__trigger\">3.2. Configuration de VS Code \u2013 installation du Plugin Remote-SSH<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#4-configuration-du-plugin-remote-ssh-connexion-au-serveur-vps\" class=\"uagb-toc-link__trigger\">4. Configuration du Plugin Remote-SSH \u2013 Connexion au serveur VPS<\/a><\/ul><\/ul><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-15\" style=\"padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px\">\n<div class=\"wp-block-column is-layout-constrained wp-container-13\">\n<div class=\"wp-block-group is-layout-flow\">\n<p>Apr\u00e8s avoir install\u00e9 et configur\u00e9 WordPress, nous voulons d\u00e9velopper des sous-sites en parall\u00e8le pour tester la programmation PHP, Javascript sur un serveur NodeJSdans, Python pour le machine learning, et beaucoup d\u2019autres projets.<\/p>\n\n\n\n<p>Nous allons donc configurer la connexion \u00e0 notre serveur Debian avec Visual Studio Code \u00e0 l&rsquo;aide de l&rsquo;extension Visual Studio Code Remote &#8211; SSH. Il y a de nombreuses \u00e9tapes de configuration. Nous allons les d\u00e9taill\u00e9es une part unes dans le bon ordre.<\/p>\n\n\n\n<p>Nous cr\u00e9erons ensuite une application web Node.js Express pour montrer comment on peut modifier et d\u00e9boguer sur une machine distante avec VS Code comme on le ferait si le code source \u00e9tait local.<\/p>\n\n\n\n<h3 class=\"has-text-color wp-block-heading\" id=\"1-i-achat-nom-de-domaine\" style=\"color:#fffdf8;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:1px\">1. Installation d&rsquo;un client OpenSSH sous Windows 10<\/h3>\n\n\n\n<div class=\"wp-block-group has-border-color has-vivid-cyan-blue-border-color has-background is-layout-flow\" style=\"border-style:dotted;border-width:2px;border-radius:8px;background-color:#fffdf8;padding-right:7px;padding-bottom:15px;padding-left:7px\">\n<div class=\"qubely-block-accordion  qubely-block-d34844\" data-item-toggle=\"true\">\n<div class=\"wp-block-qubely-accordion-item qubely-block-735f7c\"><div class=\"qubely-accordion-item qubely-type-fill qubely-accordion-active\"><div class=\"qubely-accordion-panel qubely-icon-position-right\"><span class=\"qubely-accordion-panel-handler\" role=\"button\"><span class=\"qubely-accordion-panel-handler-label\">1. Installation d&rsquo;un client OpenSSH sous Windows 10<\/span><span class=\"qubely-accordion-icon fa fa-plus\"><\/span><\/span><\/div><div class=\"qubely-accordion-body\" style=\"display:block\"><div itemprop=\"text\">\n<p>Nous utilisions pour l\u2019instant le logiciel puTTY pour \u00e9tablir les connexions SSH chiffr\u00e9s et s\u00e9curis\u00e9s avec le VPS.<\/p>\n\n\n\n<p>Visual Studio code ne reconnait pas le client putty. Nous allons donc nous servir du client openssh livr\u00e9 pr\u00e9install\u00e9 mais pas obligatoirement activ\u00e9 avec Windows 10. Nous allons donc voir de mani\u00e8re de l\u2019installer et l\u2019activer.<\/p>\n\n\n\n<div class=\"wp-block-uagb-advanced-heading uagb-block-94fc7dd0\"><h4 class=\"uagb-heading-text\">1.1. Installation d\u2019OpenSSH avec les Param\u00e8tres Windows<\/h4><\/div>\n\n\n\n<p>Les deux composants OpenSSH peuvent \u00eatre install\u00e9s \u00e0 l\u2019aide des Param\u00e8tres Windows sur les appareils Windows Server&nbsp;2019 et Windows&nbsp;10.<\/p>\n\n\n\n<p>Pour installer les composants OpenSSH&nbsp;:<\/p>\n\n\n\n<ul>\n<li>Dans Windows 10, ouvrir Param\u00e8tres, s\u00e9lectionnez Applications &gt; Applications et fonctionnalit\u00e9s, puis Fonctionnalit\u00e9s facultatives.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"600\" height=\"295\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-01.png\" alt=\"\" class=\"wp-image-2023\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-01.png 600w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-01-300x148.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n\n<ul>\n<li>Parcourir la liste pour voir si OpenSSH est d\u00e9j\u00e0 install\u00e9. Si ce n\u2019est pas le cas, s\u00e9lectionnez Ajouter une fonctionnalit\u00e9 en haut de la page, puis&nbsp;:<\/li>\n\n\n\n<li>Rechercher OpenSSH Client et cliquez sur Installer.<\/li>\n\n\n\n<li>Rechercher OpenSSH Server et cliquez sur Installer.<\/li>\n<\/ul>\n\n\n\n<p>Une fois l\u2019installation termin\u00e9e, revenez \u00e0 Applications &gt; Applications et fonctionnalit\u00e9s et Fonctionnalit\u00e9s facultatives. Vous devriez voir OpenSSH dans la liste.<\/p>\n\n\n\n<p>Dans le cas ci-dessous, on voit que le client OpenSSH est d\u00e9j\u00e0 install\u00e9.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"534\" height=\"583\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-02.png\" alt=\"\" class=\"wp-image-2024\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-02.png 534w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-02-275x300.png 275w\" sizes=\"(max-width: 534px) 100vw, 534px\" \/><\/figure>\n\n\n\n<p>Pour installer le serveur OpenSSH&nbsp;:<\/p>\n\n\n\n<ul>\n<li>Cliquer sur [+ \/ Ajouter une fonctionnalit\u00e9], puis on entrer dans le champ de recherche \u00ab\u00a0Open SSH\u00a0\u00bb,<\/li>\n\n\n\n<li>S\u00e9lectionner la case \u00e0 cocher<\/li>\n<\/ul>\n\n\n\n<p>Cliquer sur le bouton \u00ab&nbsp;Installer&nbsp;\u00bb<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"760\" height=\"325\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-03.png\" alt=\"\" class=\"wp-image-2025\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-03.png 760w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-03-300x128.png 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-uagb-advanced-heading uagb-block-f6a3d6ff\"><h4 class=\"uagb-heading-text\">1.2. Installation d&rsquo;OpenSSH avec PowerShell<\/h4><\/div>\n\n\n\n<p>Pour installer OpenSSH avec PowerShell, ex\u00e9cutez PowerShell en tant qu\u2019administrateur. Pour vous assurer qu\u2019OpenSSH est disponible, ex\u00e9cutez l\u2019applet de commande suivante&nbsp;:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;powershell&quot;,&quot;mime&quot;:&quot;application\/x-powershell&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;PowerShell&quot;,&quot;modeName&quot;:&quot;powershell&quot;}\">Get-WindowsCapability -Online | Where-Object Name -like 'OpenSSH*'<\/pre><\/div>\n\n\n\n<p>La sortie suivante doit \u00eatre retourn\u00e9e si aucun n\u2019est d\u00e9j\u00e0 install\u00e9&nbsp;:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;shell&quot;,&quot;mime&quot;:&quot;text\/x-sh&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;showPanel&quot;:false,&quot;language&quot;:&quot;Shell&quot;,&quot;modeName&quot;:&quot;shell&quot;}\">Name  : OpenSSH.Client~~~~0.0.1.0\nState : NotPresent\n\nName  : OpenSSH.Server~~~~0.0.1.0\nState : NotPresent<\/pre><\/div>\n\n\n\n<p>Ensuite, installez les composants serveur ou client selon vos besoins&nbsp;:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;powershell&quot;,&quot;mime&quot;:&quot;application\/x-powershell&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;PowerShell&quot;,&quot;modeName&quot;:&quot;powershell&quot;}\"># Install the OpenSSH Client\nAdd-WindowsCapability -Online -Name OpenSSH.Client~~~~0.0.1.0\n\n# Install the OpenSSH Server\nAdd-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0\n<\/pre><\/div>\n\n\n\n<p>Quel que soit le composant, la sortie suivante devrait \u00eatre retourn\u00e9e&nbsp;:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;shell&quot;,&quot;mime&quot;:&quot;text\/x-sh&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;showPanel&quot;:false,&quot;language&quot;:&quot;Shell&quot;,&quot;modeName&quot;:&quot;shell&quot;}\">Path          :\nOnline        : True\nRestartNeeded : False<\/pre><\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"has-text-color wp-block-heading\" id=\"2-ii-installation-de-phpmyadmin\" style=\"color:#fffdf8;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:1px\">2. Cr\u00e9ation des cl\u00e9s d\u2019authentification public et priv\u00e9e<\/h3>\n\n\n\n<div class=\"wp-block-group has-border-color has-vivid-cyan-blue-border-color has-background is-layout-flow\" style=\"border-style:dotted;border-width:2px;border-radius:8px;background-color:#fffdf8;padding-right:7px;padding-bottom:15px;padding-left:7px\">\n<div class=\"qubely-block-accordion  qubely-block-d34844\" data-item-toggle=\"true\">\n<div class=\"wp-block-qubely-accordion-item qubely-block-3fe8d0\"><div class=\"qubely-accordion-item qubely-type-fill qubely-accordion-active\"><div class=\"qubely-accordion-panel qubely-icon-position-right\"><span class=\"qubely-accordion-panel-handler\" role=\"button\"><span class=\"qubely-accordion-panel-handler-label\">2. Cr\u00e9ation des cl\u00e9s d\u2019authentification public et priv\u00e9e<\/span><span class=\"qubely-accordion-icon fa fa-plus\"><\/span><\/span><\/div><div class=\"qubely-accordion-body\" style=\"display:block\"><div itemprop=\"text\">\n<p class=\"has-vivid-cyan-blue-color has-text-color has-medium-font-size\"><strong>R\u00e9utilisation de la cl\u00e9 g\u00e9n\u00e9r\u00e9e dans PuTTYGen\u00a0:<\/strong><\/p>\n\n\n\n<p>Le logiciel PuTTYGen avait \u00e9t\u00e9 utilis\u00e9 pour configurer l&rsquo;authentification par cl\u00e9 publique SSH pour notre h\u00f4te virtuel priv\u00e9 accueillant le syst\u00e8me Debian. VS Code n\u2019\u00e9tant pas compatible avec PuTTY, nous devons convertir notre cl\u00e9 priv\u00e9e afin que d&rsquo;autres clients SSH (celui que nous avons install\u00e9 dans l\u2019\u00e9tape pr\u00e9c\u00e9dente) puissent l&rsquo;utiliser.<\/p>\n\n\n\n<p>Nous utiliserons la paire de cl\u00e9 client\/priv\u00e9 de l\u2019utilisateur remi. La cl\u00e9 publique (\u00ab&nbsp;Public_key_remi&nbsp;\u00bb) est d\u00e9j\u00e0 install\u00e9e sur le serveur VPS, donc il n\u2019y a pas de manipulation \u00e0 op\u00e9rer c\u00f4t\u00e9 serveur. Par contre nous allons convertir la cl\u00e9 priv\u00e9 \u00ab&nbsp;Private_key_remi.ppk&nbsp;\u00bb et la convertir en un format acceptable pour VS Code&nbsp;; nous la nommerons \u00ab&nbsp;Private_key_remi_other.ppk&nbsp;\u00bb.<\/p>\n\n\n\n<p style=\"text-decoration:underline\">Pour ce faire :<\/p>\n\n\n\n<ul>\n<li>Ouvrir PuTTYGen localement et charger la cl\u00e9 priv\u00e9e que l\u2019on veut convertir.<\/li>\n\n\n\n<li>S\u00e9lectionner Conversions &gt; Exporter la cl\u00e9 OpenSSH dans le menu de l&rsquo;application. Enregistrer la cl\u00e9 convertie dans un emplacement local sous le r\u00e9pertoire .ssh dans le dossier de profil utilisateur (par exemple C:\\Users\\notre_ruser\\.ssh).<\/li>\n\n\n\n<li>V\u00e9rifier que ce nouveau fichier local nous appartient et qu&rsquo;aucun autre utilisateur ne dispose des autorisations n\u00e9cessaires pour y acc\u00e9der.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"has-text-color wp-block-heading\" id=\"3-iii-cr%C3%A9ation-dun-admin-pour-phpmyadmin\" style=\"color:#fffdf8;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:1px\">3. Installation et configuration de Visual Studio Code<\/h3>\n\n\n\n<div class=\"wp-block-group has-border-color has-vivid-cyan-blue-border-color has-background is-layout-flow\" style=\"border-style:dotted;border-width:2px;border-radius:8px;background-color:#fffdf8;padding-right:7px;padding-bottom:15px;padding-left:7px\">\n<div class=\"qubely-block-accordion  qubely-block-d34844\" data-item-toggle=\"true\">\n<div class=\"wp-block-qubely-accordion-item qubely-block-bec6f9\"><div class=\"qubely-accordion-item qubely-type-fill qubely-accordion-active\"><div class=\"qubely-accordion-panel qubely-icon-position-right\"><span class=\"qubely-accordion-panel-handler\" role=\"button\"><span class=\"qubely-accordion-panel-handler-label\">3. Installation et configuration de Visual Studio Code<\/span><span class=\"qubely-accordion-icon fa fa-plus\"><\/span><\/span><\/div><div class=\"qubely-accordion-body\" style=\"display:block\"><div itemprop=\"text\">\n<div class=\"wp-block-uagb-advanced-heading uagb-block-5da169fa\"><h4 class=\"uagb-heading-text\">3.1. Installation de Visual Studio Code<\/h4><\/div>\n\n\n\n<p>Tout d\u2019abord il faut <a href=\"https:\/\/code.visualstudio.com\/Download\">t\u00e9l\u00e9charger VS Code<\/a>, puis l\u2019installer.<\/p>\n\n\n\n<p>Je suis sous Windows, j\u2019ai donc choisi de t\u00e9l\u00e9charger le \u00ab&nbsp;System Installer x64&nbsp;\u00bb.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"600\" height=\"396\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-05.png\" alt=\"\" class=\"wp-image-2026\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-05.png 600w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-05-300x198.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-uagb-advanced-heading uagb-block-457ef626\"><h4 class=\"uagb-heading-text\">3.2. Configuration de VS Code \u2013 installation du Plugin Remote-SSH<\/h4><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-6\">\n<div class=\"wp-block-column is-layout-flow\">\n<p>Le \u00ab Extensions Marketplace \u00bb est l&rsquo;endroit o\u00f9 l\u2019on peut t\u00e9l\u00e9charger des extensions pour une grande vari\u00e9t\u00e9 d&rsquo;outils et de langages de programmation :<\/p>\n\n\n\n<ul>\n<li>S\u00e9lectionner \u00ab Extensions \u00bb en cliquant sur le bouton encadr\u00e9 en rouge sur l\u2019image ci-contre.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow\" style=\"flex-basis:120px\">\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"95\" height=\"106\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-06.png\" alt=\"\" class=\"wp-image-2027\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<ul>\n<li>Dans le champ destin\u00e9 aux recherches, entrer \u00ab french \u00bb pour installer le plugin \u00ab French Language Pack \u00bb afin de traduite menus et autres libell\u00e9s en langue Francaise. <\/li>\n\n\n\n<li>S\u00e9lectionner le plugin, puis cliquer sur le bouton \u00ab Install \u00bb. <\/li>\n\n\n\n<li>Ouvrir la palette de commande (menu \u00ab View\/Command Palette\u2026 ou Ctrl+Shift+P), puis saisir \u00ab display \u00bb dans le champ de recherche. <\/li>\n\n\n\n<li>S\u00e9lectionner \u00ab Configure Display Language \u00bb, puis \u00ab Fran\u00e7ais \u00bb. Une boite de dialogue indique que les changements prendont effets apr\u00e8s avoir red\u00e9marr\u00e9 VS Code. Cliquer sur \u00ab Restart \u00bb.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"184\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-07-1024x184.png\" alt=\"\" class=\"wp-image-2028\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-07-1024x184.png 1024w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-07-300x54.png 300w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-07-768x138.png 768w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-07.png 1462w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul>\n<li>S\u00e9lectionner une seconde fois le bouton \u00ab Extensions \u00bb. Rechercher \u00ab&nbsp;Remote-SSH&nbsp;\u00bb.<\/li>\n\n\n\n<li>S\u00e9lectionner le champ dans la liste, puis, cliquer sur \u00ab&nbsp;Installer&nbsp;\u00bb.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"178\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-08-1024x178.png\" alt=\"\" class=\"wp-image-2029\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-08-1024x178.png 1024w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-08-300x52.png 300w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-08-768x133.png 768w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-08.png 1227w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-9\">\n<div class=\"wp-block-column is-layout-flow\">\n<ul>\n<li>On constate les \u00e9l\u00e9ments ajout\u00e9s&nbsp;:<ul><li>Les extensions \u00ab&nbsp;Remote \u2013 SSH&nbsp;\u00bb, \u00ab&nbsp;Remote \u2013 SSH: Editing Configuration Files\u201d et \u201cRemote Explorer\u201d ont \u00e9t\u00e9 install\u00e9s<\/li><\/ul><ul><li>Le bouton (entour\u00e9 en rouge) \u00ab&nbsp;Explorateur distant&nbsp;\u00bb<\/li><\/ul>\n<ul>\n<li>Cet \u00e9l\u00e9ment montre dans quel contexte VS Code est ex\u00e9cut\u00e9 (local ou distant) et si on clique sur l&rsquo;\u00e9l\u00e9ment, les commandes \u00ab&nbsp;Remote \u2013 SSH&nbsp;\u00bb s&rsquo;affichent.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow\" style=\"flex-basis:220px\">\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"200\" height=\"101\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-09.png\" alt=\"\" class=\"wp-image-2030\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">nano \/etc\/postfix\/sasl_passwd<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"201\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-10-1024x201.png\" alt=\"\" class=\"wp-image-2031\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-10-1024x201.png 1024w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-10-300x59.png 300w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-10-768x151.png 768w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-10.png 1210w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"has-text-color wp-block-heading\" id=\"3-iii-cr%C3%A9ation-dun-admin-pour-phpmyadmin\" style=\"color:#fffdf8;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:1px\">4. Configuration du Plugin Remote-SSH \u2013 Connexion au serveur VPS<\/h3>\n\n\n\n<div class=\"wp-block-group has-border-color has-vivid-cyan-blue-border-color has-background is-layout-flow\" style=\"border-style:dotted;border-width:2px;border-radius:8px;background-color:#fffdf8;padding-right:7px;padding-bottom:15px;padding-left:7px\">\n<div class=\"qubely-block-accordion  qubely-block-d34844\" data-item-toggle=\"true\">\n<div class=\"wp-block-qubely-accordion-item qubely-block-3dc0e2\"><div class=\"qubely-accordion-item qubely-type-fill qubely-accordion-active\"><div class=\"qubely-accordion-panel qubely-icon-position-right\"><span class=\"qubely-accordion-panel-handler\" role=\"button\"><span class=\"qubely-accordion-panel-handler-label\">4. Configuration du Plugin Remote-SSH \u2013 Connexion au serveur VPS<\/span><span class=\"qubely-accordion-icon fa fa-plus\"><\/span><\/span><\/div><div class=\"qubely-accordion-body\" style=\"display:block\"><div itemprop=\"text\">\n<p>Maintenant que le plugin \u00ab&nbsp;Remote-SSH&nbsp;\u00bb est install\u00e9, il faut le configurer pour se connecter \u00e0 notre serveur distant. Pour ce faire, nous avons besoin des informations suivantes :<\/p>\n\n\n\n<ul>\n<li>Adresse IP ou nom d&rsquo;h\u00f4te du serveur.<\/li>\n\n\n\n<li>Nom d&rsquo;utilisateur avec lequel vous vous connecterez.<\/li>\n\n\n\n<li>Cl\u00e9 priv\u00e9e que nous utiliserons pour authentifier notre utilisateur (voir \u00a72).<\/li>\n<\/ul>\n\n\n\n<p>Cliquer sur le champ \u00ab Ouvrir une fen\u00eatre distante \u00bb situ\u00e9 dans la barre d\u2019\u00e9tat tout \u00e0 gauche (couleur verte).<\/p>\n\n\n\n<p>S\u00e9lectionner \u00ab&nbsp;Ouvrir le fichier de configuration SSH&nbsp;\u00bb, puis d\u00e9finir l\u2019emplacement dans lequel sera cr\u00e9\u00e9 le fichier \u00ab&nbsp;Config&nbsp;\u00bb&nbsp;: nous choisissons le dossier dans lequel se trouve la cl\u00e9 priv\u00e9e de notre utilisateur (C:\\Users\\nom-user\\.ssh\\Config).<\/p>\n\n\n\n<p style=\"text-decoration:underline\">Voici comment fonctionne ce fichier de configuration :<\/p>\n\n\n\n<ul>\n<li>H\u00f4te : sp\u00e9cifie un nom pour notre h\u00f4te. Cela permet d&rsquo;utiliser un nom court ou une abr\u00e9viation au lieu de l&rsquo;adresse IP compl\u00e8te ou du nom d&rsquo;h\u00f4te lorsque l\u2019on se connecte au serveur.<\/li>\n\n\n\n<li>HostName : nom d&rsquo;h\u00f4te r\u00e9el du serveur, qui est soit une adresse IP, soit un nom de domaine complet.<\/li>\n\n\n\n<li>Utilisateur : Utilisateur avec lequel on souhaite se connecter.<\/li>\n\n\n\n<li>Port&nbsp;: Notre port de communication SSH (par d\u00e9faut&nbsp;: 22)<\/li>\n\n\n\n<li>IdentityFile : chemin d&rsquo;acc\u00e8s \u00e0 notre cl\u00e9 priv\u00e9e SSH. Sur les syst\u00e8mes Mac et Linux, on le trouve dans le r\u00e9pertoire de base dans un r\u00e9pertoire .ssh cach\u00e9, g\u00e9n\u00e9ralement appel\u00e9 id_rsa.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"705\" height=\"197\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-11.png\" alt=\"\" class=\"wp-image-2033\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-11.png 705w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-11-300x84.png 300w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/figure>\n\n\n\n<p>Sauvegarder le fichier \u00ab Config \u00bb.<\/p>\n\n\n\n<p>Visual Studio Code est maintenant configur\u00e9 et pr\u00eat \u00e0 se connecter \u00e0 notre serveur distant. Cliquer sur le bouton vert \u00ab Ouvrir une fen\u00eatre distante \u00bb dans le coin inf\u00e9rieur gauche et s\u00e9lectionnez \u00ab Se connecter \u00e0 l\u2019h\u00f4te\u2026 \u00bb.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"658\" height=\"122\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-12.png\" alt=\"\" class=\"wp-image-2034\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-12.png 658w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-12-300x56.png 300w\" sizes=\"(max-width: 658px) 100vw, 658px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"662\" height=\"117\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-13.png\" alt=\"\" class=\"wp-image-2035\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-13.png 662w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-13-300x53.png 300w\" sizes=\"(max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"503\" height=\"141\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-14.png\" alt=\"\" class=\"wp-image-2036\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-14.png 503w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/vscode-access-distant-14-300x84.png 300w\" sizes=\"(max-width: 503px) 100vw, 503px\" \/><\/figure>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\" style=\"flex-basis:22%\">\n\n<div class=\"cleanlogin-container\">\t\t\n\n\t<form class=\"cleanlogin-form\" method=\"post\" action=\"https:\/\/www.webodesign.net\/?page_id=2385\" onsubmit=\"submit.disabled = true; return true;\">\n\t\t\t\n\t\t<fieldset>\n\n\t\t\t\t\t\t<div class=\"cleanlogin-field\">\n                <label for=\"log\">Identifiant<\/label>\n\t\t\t\t<input class=\"cleanlogin-field-username\" type=\"text\" name=\"log\" placeholder=\"Identifiant\" aria-label=\"Identifiant\">\n\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"cleanlogin-field\">\n                <label for=\"pwd\">Mot de passe<\/label>\n\t\t\t\t<input class=\"cleanlogin-field-password\" type=\"password\" id=\"pwd\" name=\"pwd\" placeholder=\"Mot de passe\" aria-label=\"Mot de passe\">\n                <i class=\"bi bi-eye-slash\" id=\"togglePassword\"><\/i>\n\t\t\t<\/div>\n\n\t\t\t\t\t\n\t\t\t<input type=\"hidden\" name=\"clean_login_wpnonce\" value=\"e994c14fba\">\n            \n\t\t\t\t\t<\/fieldset>\n\t\t\n\t\t<fieldset>\n\t\t\t<input class=\"cleanlogin-field\" type=\"submit\" value=\"Se connecter\" name=\"submit\">\n\t\t\t<input type=\"hidden\" name=\"action\" value=\"login\">\n\t\t\t\n\t\t\t<div class=\"cleanlogin-field cleanlogin-field-remember\">\n\t\t\t\t<input type=\"checkbox\" id=\"rememberme\" name=\"rememberme\" value=\"forever\">\n\t\t\t\t<label for=\"rememberme\">Se souvenir de moi\u00a0?<\/label>\n\t\t\t<\/div>\n\t\t<\/fieldset>\n\n\t\t\n\t\t<div class=\"cleanlogin-form-bottom\">\n\t\t\t\n            \n\t\t\t\t\t\t\t\t\t\n\t\t<\/div>\n\t\t\n\t<\/form>\n\n<\/div>\n\n<script>\nconst togglePassword = document.querySelector('#togglePassword');\nconst password = document.querySelector('#pwd');\n\ntogglePassword.addEventListener('click', function (e) {\n    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';\n    password.setAttribute('type', type);\n    this.classList.toggle('bi-eye');\n});\n<\/script>\n<\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Configuration de VS Code pour d\u00e9velopper \u00e0 distance via SSH Apr\u00e8s avoir install\u00e9 et configur\u00e9 WordPress, nous voulons d\u00e9velopper des sous-sites en parall\u00e8le pour tester la programmation PHP, Javascript sur un serveur NodeJSdans, Python pour le machine learning, et beaucoup d\u2019autres projets. Nous allons donc configurer la connexion \u00e0 notre serveur Debian avec Visual Studio [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":658,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"","meta":{"qubely_global_settings":"","qubely_interactions":"","_uag_custom_page_level_css":""},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"qubely_landscape":false,"qubely_portrait":false,"qubely_thumbnail":false},"uagb_author_info":{"display_name":"R\u00e9mi","author_link":"https:\/\/www.webodesign.net\/?author=3"},"uagb_comment_info":0,"uagb_excerpt":"Configuration de VS Code pour d\u00e9velopper \u00e0 distance via SSH Apr\u00e8s avoir install\u00e9 et configur\u00e9 WordPress, nous voulons d\u00e9velopper des sous-sites en parall\u00e8le pour tester la programmation PHP, Javascript sur un serveur NodeJSdans, Python pour le machine learning, et beaucoup d\u2019autres projets. Nous allons donc configurer la connexion \u00e0 notre serveur Debian avec Visual Studio\u2026","_links":{"self":[{"href":"https:\/\/www.webodesign.net\/index.php?rest_route=\/wp\/v2\/pages\/2014"}],"collection":[{"href":"https:\/\/www.webodesign.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.webodesign.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.webodesign.net\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webodesign.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2014"}],"version-history":[{"count":6,"href":"https:\/\/www.webodesign.net\/index.php?rest_route=\/wp\/v2\/pages\/2014\/revisions"}],"predecessor-version":[{"id":2281,"href":"https:\/\/www.webodesign.net\/index.php?rest_route=\/wp\/v2\/pages\/2014\/revisions\/2281"}],"up":[{"embeddable":true,"href":"https:\/\/www.webodesign.net\/index.php?rest_route=\/wp\/v2\/pages\/658"}],"wp:attachment":[{"href":"https:\/\/www.webodesign.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}