Avez-vous déjà perdu une journée à essayer de monter une stack WordPress locale qui, au final, se comporte différemment de votre serveur de production? XAMPP, Docker, les machines virtuelles: chaque option lâche au pire moment. La version de PHP n’est pas la bonne, une extension est manquante, ou le client ouvre une page et tombe sur un écran blanc que vous n’avez jamais rencontré en local.

Visual Studio Code peut se connecter à un serveur distant via SSH aussi simplement que vous ouvrez un dossier sur votre portable. Rien de magique: votre code part directement sur une instance Amazon EC2 où un serveur web complet avec WordPress tourne déjà.

Voici un guide pas à pas pour configurer VS Code + AWS EC2 pour le développement de plugins et de thèmes WordPress. De la création d’un utilisateur Linux à la sauvegarde de votre espace de travail, sans aucune omission et avec l’explication de chaque étape.

💡 Aperçu rapide:

• Créer un utilisateur sudo sur un serveur Ubuntu et configurer les clés SSH
• Préparer votre poste client Windows: OpenSSH, fichier de configuration et clé privée
• Connecter VS Code au serveur via Remote-SSH et ouvrir votre dossier WordPress
• Sauvegarder l’espace de travail pour un accès rapide à votre projet

Prérequis

Avant de mettre en place le développement distant, assurez-vous que le côté serveur est prêt. Je pars du principe que vous êtes sous Windows 10 ou une version ultérieure et que vous commencez tout juste à vous familiariser avec l’infrastructure cloud. Passez les étapes que vous avez déjà réalisées.

Instance Amazon EC2 avec Ubuntu et OpenLiteSpeed

Nous utilisons une Amazon Machine Image basée sur Ubuntu avec le serveur web OpenLiteSpeed et une stack LAMP complète optimisée pour WordPress. Si vous n’avez pas encore configuré le serveur, la configuration minimale requise est Ubuntu 20.04 ou 22.04 LTS et au moins 2 Go de RAM. Avec moins de 2 Go, composer et wp-cli planteront sur des erreurs de mémoire insuffisante sur des projets de taille moyenne.

Utilisateur Linux avec sudo

L’accès root est inutile et dangereux pour le travail quotidien. Créez un utilisateur standard avec les privilèges sudo. DigitalOcean explique la procédure dans leur guide. En résumé, deux commandes à passer depuis root ou avec le préfixe sudo:

1
adduser example

Saisissez le mot de passe deux fois; pour les autres invites, vous pouvez simplement appuyer sur Entrée. Ajoutez ensuite l’utilisateur au groupe sudo:

1
usermod -aG sudo example

Paire de clés SSH

L’accès SSH repose sur une paire de clés. La clé privée (un fichier sans extension ou en .pem) est stockée sur votre machine Windows. La clé publique (un fichier .pub) est placée sur le serveur dans la liste des clés autorisées. Générons une paire directement sur le serveur:

1
su - example
2
mkdir .ssh
3
chmod 700 .ssh
4
touch .ssh/authorized_keys
5
chmod 600 .ssh/authorized_keys
6
ssh-keygen

Lorsque ssh-keygen vous demande une saisie, appuyez trois fois sur Entrée (laissez la phrase de passe vide; dans notre scénario, elle n’est pas nécessaire). Ajoutez maintenant la clé publique à la liste des clés autorisées et affichez la clé privée à l’écran:

1
cat .ssh/id_rsa.pub >> .ssh/authorized_keys
2
cat .ssh/id_rsa

Vous verrez un bloc comme celui-ci:

1
-----BEGIN RSA PRIVATE KEY-----
2
...
3
-----END RSA PRIVATE KEY-----

Copiez l’intégralité du contenu (y compris les lignes de délimitation) et enregistrez-le dans un fichier texte sur votre ordinateur. Le chemin ressemblera à ceci:

1
C:\Users\Example\.ssh\aws-example-user.pem

Le nom du fichier est libre. Créez le dossier .ssh dans votre profil Windows, au même emplacement que le fichier de configuration de l’étape suivante.

Fichier de configuration SSH pour Visual Studio Code

VS Code lit les paramètres de connexion dans le fichier de configuration SSH standard. Créez un fichier texte nommé config (sans extension) dans le dossier C:\Users\Example\.ssh\ avec le contenu suivant (pour plus de détails sur le format, consultez man ssh_config):

1
Host aws-ec2
2
    HostName your-server-ip-or-domain.com
3
    User example
4
    IdentityFile C:\Users\Example\.ssh\aws-example-user.pem

Explication des directives:

• Host: un nom arbitraire affiché dans VS Code (titre de la fenêtre et indicateur de connexion dans le coin inférieur gauche);
• HostName: l’adresse IP ou le domaine de votre instance EC2;
• User: le nom d’utilisateur Ubuntu créé précédemment;
• IdentityFile: le chemin absolu vers la clé privée sur votre machine Windows.

Client OpenSSH sous Windows

Windows 10 et 11 incluent un client SSH intégré, mais il peut être désactivé par défaut. Ouvrez Paramètres → Applications → Fonctionnalités facultatives → Ajouter une fonctionnalité. Recherchez Client OpenSSH dans la liste et cliquez sur Installer.

Visual Studio Code et l’extension Remote Development

Téléchargez VS Code: soit la version stable (icône bleue), soit l’édition Insiders (icône verte, mises à jour plus fréquentes). Il n’y a aucune différence pour le développement à distance.

Juste après l’installation, ajoutez le pack d’extension Remote Development de Microsoft. Le pack inclut trois extensions. Deux d’entre elles (Remote, Containers et WSL) peuvent être désactivées; elles ne sont pas nécessaires pour notre tâche. Conservez uniquement Remote, SSH.

Configuration du développement à distance

Connexion au serveur

• Appuyez sur F1 ou cliquez sur le bouton orange foncé dans le coin inférieur gauche de la fenêtre.
• Commencez à taper Remote-SSH; la suggestion d’autocomplétion Remote-SSH: Connect to Host… apparaîtra. Sélectionnez-la et appuyez sur Entrée.
• Dans la liste déroulante, choisissez le nom spécifié dans la directive Host de votre fichier de configuration, par exemple SSH: aws-ec2. VS Code récupère la liste des hôtes directement depuis votre fichier config.
• Terminé, vous êtes connecté. Une nouvelle fenêtre s’ouvrira; vous pouvez fermer l’ancienne.

La connexion est rapide et l’éditeur reste réactif car seuls les diffs de fichiers sont envoyés sur le réseau, et non l’interface utilisateur complète.

Création d’un espace de travail

• Ouvrez Fichier → Ouvrir le dossier… (ou appuyez sur Ctrl+K, puis Ctrl+O; appuyez sur ces touches de manière séquentielle, pas simultanément).
• Dans la fenêtre de navigation qui apparaît, allez à la racine de WordPress, par exemple /var/www/example.com/. Vous pouvez coller le chemin manuellement et cliquer sur OK.

Tous les fichiers WordPress apparaîtront dans le panneau Explorateur sur la gauche. Pour ajouter d’autres dossiers du serveur à l’espace de travail (par exemple, le répertoire d’un autre plugin ou thème), utilisez Fichier → Ajouter un dossier à l’espace de travail….

Sauvegardez maintenant cette vue en tant qu’espace de travail pour pouvoir revenir au projet en un seul clic:

• Appuyez sur F1, commencez à taper save work, et sélectionnez Espaces de travail: Enregistrer l’espace de travail sous….
• Enregistrez le fichier sous le nom wp.code-workspace à un emplacement pratique sur le serveur (l’extension .code-workspace sera ajoutée automatiquement).
• Fermez et rouvrez VS Code; l’espace de travail apparaîtra dans Fichier → Récent ou se chargera automatiquement s’il s’agissait du dernier ouvert.

Pour basculer entre plusieurs espaces de travail, utilisez F1 → open work → sélectionnez dans la liste.

Lien symbolique (optionnel)

Si vous développez un plugin spécifique, il est pratique de placer ses fichiers sources dans le répertoire personnel de l’utilisateur et de créer un lien symbolique vers WordPress:

1
ln -s /home/example/wp /var/www/dev.example.com/wp-content/plugins/my-plugin

Le chemin de gauche est le dossier réel du projet; le chemin de droite est le lien symbolique à l’intérieur de wp-content/plugins. Cela isole le code du plugin du cœur de WordPress et simplifie le contrôle de version.

⁉️🤔 Foire aux questions

Suis-je obligé d’utiliser Amazon EC2, ou un autre VPS peut-il convenir?

Tout serveur sous Ubuntu avec un accès SSH fonctionne. DigitalOcean, Linode, Vultr, Hetzner: la procédure d’installation est identique. La seule exigence est de disposer d’au moins 2 Go de RAM pour un développement WordPress confortable avec le débogage. Cette approche ne fonctionnera pas sur un hébergement mutualisé; vous avez besoin d’un accès root ou sudo. VS Code Remote SSH n’est pas lié à un fournisseur cloud spécifique: vous pouvez vous connecter à n’importe quelle machine exécutant sshd, même un Raspberry Pi sur votre réseau local. La seule différence est la latence; plus le centre de données est proche, plus l’éditeur est réactif.

Dois-je payer pour le trafic lorsque je travaille via VS Code Remote SSH?

Le trafic est minime. VS Code n’envoie que les modifications de fichiers et les commandes de terminal via SSH; aucun pixel d’interface ni binaire d’extension ne transite. Une journée de développement typique reste dans la limite de quelques dizaines de mégaoctets. Les extensions (y compris Remote-SSH elle-même) sont installées sur le serveur une seule fois lors de la première connexion, ce qui représente quelques centaines de mégaoctets en coût unique. Si vous avez une limite de trafic stricte, désactivez les mises à jour automatiques des extensions sur l’hôte distant via F1 → Preferences: Configure Runtime Arguments et ajoutez "remote.extensionDownloader.enabled": false. Mais pour la grande majorité des utilisateurs, cela est inutile.

Puis-je travailler depuis un serveur distant sur une tablette ou un téléphone?

Techniquement, oui, via VS Code pour le Web dans un navigateur, mais avec des réserves. La version navigateur ne prend pas en charge Remote SSH directement. Une solution de contournement: installez VS Code Server sur l’instance (un produit distinct, ne le confondez pas avec Remote SSH) et connectez-vous-y depuis votre navigateur. Pour une tablette avec un clavier, c’est un scénario viable; pour un téléphone, cela relève davantage du gadget. Une option plus pratique consiste à emporter un ordinateur portable léger ou un Chromebook avec un sous-système Linux: toute la charge de calcul reste sur le serveur, et le client utilise un minimum de ressources.

Que dois-je faire si la connexion se coupe pendant de longues périodes d’inactivité?

Configurez le keepalive dans votre configuration SSH. Ajoutez deux lignes à la section de votre hôte dans le fichier C:\Users\Example\.ssh\config: ServerAliveInterval 60 et ServerAliveCountMax 5. Le client enverra un paquet keepalive toutes les 60 secondes et maintiendra la connexion même en cas de perte de jusqu’à cinq paquets consécutifs, ce qui permet à la connexion de survivre jusqu’à 5 minutes de silence réseau complet. Une alternative: exécutez tmux ou screen sur le serveur pour les processus de longue durée afin d’éviter de perdre la session terminal en cas de coupure de la connexion.

Est-il sûr de stocker une clé privée en clair sur une machine Windows?

Un fichier .pem sans phrase de passe est, oui, une chaîne en clair que toute personne ayant accès à votre compte Windows peut lire. Mesures de protection par ordre de sécurité croissant: (1) définissez une phrase de passe lors de la création de la clé (ssh-keygen vous le demandera; ne tapez pas Entrée, saisissez une phrase de passe à la place); (2) stockez la clé sur une partition chiffrée (BitLocker est activé par défaut dans Windows 11 Pro); (3) pour les environnements de production, utilisez un agent SSH avec une clé matérielle (YubiKey). Pour un environnement de développement, une option de compromis est une clé avec phrase de passe: VS Code la mémorisera pour la durée de la session, vous n’aurez besoin de la saisir qu’une fois par jour, mais la clé devient inutilisable sans la phrase de passe, même si le fichier fuit.

Que choisir pour le travail quotidien: Remote SSH ou une stack locale

Remote SSH via VS Code n’est pas une solution miracle. Si vous écrivez un plugin qui n’a besoin que de wp-cli et de tests unitaires, une configuration Docker locale avec wordpress-develop se construira en une minute et ne nécessite pas d’accès à Internet. Mais si vous déboguez une intégration avec une API externe, testez la compatibilité multi-navigateurs ou montrez l’avancement à un client, un serveur distant avec un environnement de production l’emporte.

Pour une approche combinée, gardez une instance EC2 de développement en fonctionnement continu (une t3.small réservée a un prix raisonnable) et connectez-vous-y à tout moment, de n’importe où. Le code réside sur le serveur, les sauvegardes automatiques sont activées et vous n’êtes pas lié à une machine spécifique. Essayez: après une semaine de développement à distance, vous ne voudrez plus revenir à XAMPP.