Gérer son hébergement web avec Visual Studio Code via SFTP

Objectif

Si vous disposez d’un hébergement web OVHcloud, vous pouvez accéder à un espace de stockage qui vous permet de gérer votre site internet. L’accès à cet espace de stockage est possible via le protocole SFTP. Même s’il est possible de se connecter avec un terminal, vous pouvez également utiliser l’environnement de développement intégré (IDE) Visual Studio Code pour gérer les dossiers et fichiers de votre site web.

Découvrez comment administrer votre site internet via Visual Studio Code.

Prérequis

• Disposer d'une offre d'hébergement web OVHcloud
• Installer Microsoft Visual Studio Code sur votre machine

Accès à l'espace client OVHcloud

• Lien direct : Hébergements
• Pour accéder à vos services : Web Cloud > Hébergements > Sélectionnez votre hébergement web

En pratique

Installer l’extension SFTP pour Visual Studio Code

Après avoir démarré Visual Studio Code, dirigez-vous dans le menu horizontal en haut de l'interface, cliquez sur View puis Extensions.

Pour effectuer la même action avec le raccourci clavier, sélectionnez :

• Ctrl + Shift + X si vous êtes sur Windows,
• Maj + Command + X si vous êtes sur macOS.

En haut à gauche de l’interface, entrez le nom de l’extension « SFTP/FTP sync » de Natizyskunk et cliquez sur Install.

Il est également possible d’installer l’extension « SFTP/FTP sync » depuis la marketplace de Visual Studio.

Initialiser le projet en local

Pour synchroniser les fichiers de votre site web présents sur l’hébergement web depuis Visual Studio Code, renseignez l’emplacement de votre projet en local. Pour cela, créez un dossier à l’emplacement souhaité.

Retournez dans Visual Studio Code dans le menu horizontal en haut de l'interface, cliquez sur View puis Command Palette pour afficher l'éditeur de commandes.

Pour effectuer la même action avec le raccourci clavier, sélectionnez :

• Ctrl + Shift + P si vous êtes sur Windows,
• Maj + Command + P si vous êtes sur macOS.

Entrez la commande suivante : SFTP: Config.

Grâce à cette commande, Visual Studio Code va créer le fichier de configuration « sftp.json » à la racine du dossier local précédemment créé. Mais comme Visual Studio Code ne connait pas encore l’emplacement de votre projet en local, le message suivant devrait apparaitre :

Cliquez sur Open Folder, dirigez-vous à l’emplacement du dossier local de votre choix et cliquez sur Select Folder pour confirmer.

Dans Visual Studio Code, entrez à nouveau la commande SFTP: Config. Un fichier de configuration nommé « sftp.json » apparaît dans Visual Studio Code.

Ce fichier est présent dans le dossier .vscode, lui-même positionné à la racine de votre projet local.

Configurer le fichier sftp.json

Avant de travailler sur votre projet, téléchargez-le dans votre dossier local précédemment créé. Cependant, dans un premier temps, assurez-vous que le fichier « sftp.json » est correctement configuré. Les informations utiles sont présentes dans votre espace client OVHcloud. Dans la partie Web Cloud, cliquez sur Hébergements. Sélectionnez l'hébergement concerné, puis cliquez sur l'onglet FTP - SSH.

Dans le fichier « sftp.json » , rentrez les valeurs pour les entrées suivantes :

name

Repérez-le aux deux emplacements surlignés en orange.

host

Toujours dans l’onglet FTP-SSH, le nom d'hôte (host) est visible sous la mention Serveur FTP et SFTP.

username

Repérez le nom d'utilisateur (username) dans la colonne Login du tableau.

remotePath

Retrouvez le chemin distant (remotePath) sous la mention chemin du répertoire home. Cependant, si plusieurs utilisateurs sont configurés, le chemin indiqué peut être différent. Dans ce cas, remplacez le nom d'utilisateur mentionné après home/ par celui de votre choix dans liste Login de votre hébergement web.

Exemple : Si votre nom d'utilisateur est « john-smith » vous obtiendrez home/john-smith

Enfin, n'oubliez pas d'ajouter cette ligne dans le fichier « sftp.json » : "openSsh": true

Voici un exemple de fichier « sftp.json » :

{
    "name": "<name>",
    "host": "<host>",
    "protocol": "sftp",
    "port": 22,
    "username": "myusername",
    "password": "mypassword",
    "remotePath": "/home/myusername",
    "uploadOnSave": false,
    "useTempFile": false,
    "openSsh": true
}

Pour plus de détail concernant les options du fichier « sftp.json » , reportez-vous à la documentation du projet.

Télécharger le projet en local

Une fois le fichier « sftp.json » configuré, téléchargez le contenu de votre projet pour récupérer l’ensemble des dossiers et fichiers de votre site web. Pour ce faire, rendez-vous dans Visual Studio Code et entrez la commande suivante : SFTP: Download Project.

Visual Studio Code vous demande de sélectionner le dossier que vous souhaitez télécharger sur votre hébergement web. Saisissez la valeur name précédement définie dans le fichier « sftp.json » .

S'il est demandé, saisissez le mot de passe associé à l’utilisateur renseigné dans le fichier « sftp.json » , puis cliquez sur enter. Après le téléchargement, vous visualisez l’ensemble des dossiers et fichiers de votre projet dans l’explorateur de fichiers situé dans la colonne à gauche de l’interface Visual Studio Code.

Effectuer des modifications sur les fichiers

Maintenant que le projet est téléchargé en local sur votre machine, vous pouvez facilement éditer, ajouter ou supprimer des fichiers sur Visual Studio Code.

Si vous souhaitez que vos modifications locales soient synchronisées chaque fois que vous sauvegardez un fichier, ajoutez cette ligne dans le fichier « sftp.json » : "uploadOnSave": true

Pour désactiver cette fonction, tout en la gardant dans le fichier « sftp.json », remplacez la valeur true par false.

Jusqu'à présent, nous avons seulement mentionné les commandes : SFTP: Config et SFTP: Download Project. Il existe d'autres commandes que vous pouvez observer par autocomplétion en saisissant SFTP: dans l'éditeur de commande.

Retrouvez la liste des commandes ici.

À présent, vous êtes en mesure d'accéder et de modifier le contenu de votre hébergement web via Visual Studio Code. Ce guide a pour but de présenter d'une manière efficace la gestion d'un projet depuis Visual Studio Code. Il convient pour une première expérience. Néanmoins, si vous modifiez plusieurs fichiers et que ces derniers sont synchronisés sur votre hébergement web, il vous sera impossible de voir l'historique de vos modifications pour éventuellement revenir dessus ou rattraper une erreur.

Aller plus loin

Se connecter à l'espace de stockage FTP de son hébergement web

Utiliser FileZilla avec votre hébergement OVHcloud

Utiliser l'accès SSH de son hébergement web. N'oubliez pas que pour utiliser le SSH, vous devez disposer d'une offre d'hébergement web Pro ou Performance.

Pour des prestations spécialisées (référencement, développement, etc.), contactez les partenaires OVHcloud.

Si vous souhaitez bénéficier d'une assistance à l'usage et à la configuration de vos solutions OVHcloud, nous vous proposons de consulter nos différentes offres de support.

Échangez avec notre communauté d'utilisateurs.