Skip to content

Tutto per WordPress, lo sviluppo web — e non solo

🛠 Sviluppo WordPress remoto con VS Code su Amazon EC2

🛠 Sviluppo WordPress remoto con VS Code su Amazon EC2

Hai mai perso una giornata cercando di avviare uno stack WordPress locale che poi si comporta in modo diverso dal server di produzione? XAMPP, Docker, macchine virtuali: ogni opzione si rompe nel momento peggiore. La versione PHP è sbagliata, manca un'estensione, oppure il cliente apre una pagina e vede una schermata bianca che tu non hai mai incontrato in locale.

Visual Studio Code può connettersi a un server remoto via SSH con la stessa facilità con cui apri una cartella sul tuo portatile. Nessuna magia: il tuo codice arriva direttamente su un'istanza Amazon EC2 dove un web server completo con WordPress è già in funzione.

Ecco una guida passo passo per configurare VS Code + AWS EC2 per lo sviluppo di plugin e temi WordPress. Dalla creazione di un utente Linux al salvataggio del workspace, senza lacune e con la spiegazione di ogni passaggio.

💡 Panoramica rapida:

  • Creare un utente sudo su un server Ubuntu e configurare le chiavi SSH
  • Preparare il client Windows: OpenSSH, file di configurazione e chiave privata
  • Connettere VS Code al server via Remote-SSH e aprire la cartella WordPress
  • Salvare il workspace per un accesso rapido al progetto

Prerequisiti

Prima di impostare lo sviluppo remoto, assicurati che il lato server sia pronto. Do per scontato che tu stia usando Windows 10 o versioni successive e che tu stia iniziando ora a familiarizzare con l'infrastruttura cloud. Salta i passaggi che hai già completato.

Istanza Amazon EC2 con Ubuntu e OpenLiteSpeed

Utilizziamo un'Amazon Machine Image basata su Ubuntu con il web server OpenLiteSpeed e uno stack LAMP completo ottimizzato per WordPress. Se non hai ancora configurato il server, i requisiti minimi sono Ubuntu 20.04 o 22.04 LTS e almeno 2 GB di RAM. Con meno di 2 GB, composer e wp-cli andranno in crash per errori di memoria esaurita su progetti di medie dimensioni.

Utente Linux con sudo

L'accesso root non è necessario ed è pericoloso per il lavoro quotidiano. Crea un utente normale con privilegi sudo. DigitalOcean spiega la procedura nella loro guida. In breve, due comandi da root o con il prefisso sudo:

1adduser example

Inserisci la password due volte; per le richieste successive puoi semplicemente premere Invio. Poi aggiungi l'utente al gruppo sudo:

1usermod -aG sudo example

Coppia di chiavi SSH

L'accesso SSH si basa su una coppia di chiavi. La chiave privata (un file senza estensione o .pem) viene conservata sulla tua macchina Windows. La chiave pubblica (un file .pub) viene inserita sul server nell'elenco delle chiavi autorizzate. Generiamo una coppia direttamente sul server:

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

Quando ssh-keygen ti chiede qualcosa, premi Invio tre volte (lascia la passphrase vuota; nel nostro scenario non serve). Ora aggiungi la chiave pubblica all'elenco autorizzato e mostra la chiave privata a schermo:

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

Vedrai un blocco simile a questo:

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

Copia l'intero contenuto (incluse le righe delimitatrici) e salvalo in un file di testo sul tuo computer. Il percorso potrebbe essere simile a questo:

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

Il nome del file è arbitrario. Crea la cartella .ssh all'interno del tuo profilo Windows, nella stessa posizione del file di configurazione del passaggio successivo.

File di configurazione SSH per Visual Studio Code

VS Code legge le impostazioni di connessione dal file di configurazione SSH standard. Crea un file di testo denominato config senza estensione nella cartella C:\Users\Example\.ssh\ con il seguente contenuto (per maggiori dettagli sul formato, consulta man ssh_config):

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

Spiegazione delle direttive:

  • Host: un nome arbitrario visualizzato in VS Code (titolo della finestra e indicatore di connessione nell'angolo in basso a sinistra);
  • HostName: l'indirizzo IP o il dominio della tua istanza EC2;
  • User: il nome utente Ubuntu creato in precedenza;
  • IdentityFile: il percorso assoluto della chiave privata sulla tua macchina Windows.

Client OpenSSH su Windows

Windows 10 e 11 includono un client SSH integrato, ma potrebbe essere disabilitato per impostazione predefinita. Apri Impostazioni → App → Funzionalità facoltative → Aggiungi una funzionalità. Trova OpenSSH Client nell'elenco e fai clic su Installa.

Installazione del client OpenSSH nelle funzionalità opzionali di Windows

Visual Studio Code e l'estensione Remote Development

Scarica VS Code: puoi scegliere la versione stabile (icona blu) o l'edizione Insiders (icona verde, aggiornamenti più frequenti). Per lo sviluppo remoto non c'è alcuna differenza.

Subito dopo l'installazione, aggiungi il pacchetto di estensione Remote Development di Microsoft. Il pacchetto include tre estensioni. Due di queste (Remote, Containers e WSL) possono essere disabilitate; non servono per la nostra attività. Tieni solo Remote, SSH.

Configurare lo sviluppo remoto

Connettersi al server

Selezione del comando Connetti a host di Remote-SSH nel pannello comandi di VS Code
  • Premi F1 o fai clic sul pulsante arancione scuro nell'angolo in basso a sinistra della finestra.
  • Inizia a digitare Remote-SSH; apparirà il suggerimento di completamento automatico Remote-SSH: Connetti a host.... Selezionalo e premi Invio.
  • Dall'elenco a discesa, scegli il nome specificato nella direttiva Host del tuo file di configurazione, ad esempio SSH: aws-ec2. VS Code recupera l'elenco degli host direttamente dal tuo file config.
  • Fatto, sei connesso. Si aprirà una nuova finestra; puoi chiudere quella vecchia.

La connessione è veloce e l'editor risulta reattivo perché sulla rete vengono inviate solo le differenze dei file, non l'intera interfaccia utente.

Indicatore di connessione SSH aws-ec2 nell'angolo in basso a sinistra della finestra di VS Code

Creare uno spazio di lavoro

  • Apri File → Apri cartella… (oppure premi Ctrl+K, poi Ctrl+O; premili in sequenza, non contemporaneamente).
  • Nel browser dei file che appare, naviga fino alla root di WordPress, ad esempio /var/www/example.com/. Puoi incollare il percorso manualmente e cliccare OK.

Tutti i file di WordPress appariranno nel pannello Explorer a sinistra. Per aggiungere altre cartelle del server allo spazio di lavoro (ad esempio, la directory di un altro plugin o tema), usa File → Aggiungi cartella all'area di lavoro….

Albero dei file di WordPress nella barra laterale di VS Code dopo la connessione al server

Ora salva questa vista come spazio di lavoro per poter tornare al progetto con un solo clic:

  • Premi F1, inizia a digitare save work e seleziona Area di lavoro: Salva area di lavoro con nome….
  • Salva il file con il nome wp.code-workspace in una posizione comoda sul server (l'estensione .code-workspace verrà aggiunta automaticamente).
  • Chiudi e riapri VS Code; lo spazio di lavoro apparirà in File → Recenti o verrà caricato automaticamente se era l'ultimo aperto.

Per passare da uno spazio di lavoro all'altro, usa F1open work → seleziona dalla lista.

Area di lavoro wp.code-workspace salvata nell'elenco dei progetti recenti di VS Code

Collegamento simbolico (opzionale)

Se stai sviluppando un plugin specifico, è comodo posizionare i suoi file sorgente nella home directory dell'utente e creare un symlink dentro WordPress:

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

Il percorso a sinistra è la cartella effettiva del progetto; il percorso a destra è il collegamento simbolico dentro wp-content/plugins. Questo isola il codice del plugin dal core di WordPress e semplifica il controllo di versione.

⁉️🤔 Domande frequenti

Devo usare per forza Amazon EC2, o va bene anche un altro VPS?

Qualsiasi server con Ubuntu e accesso SSH funziona. DigitalOcean, Linode, Vultr, Hetzner: la procedura di configurazione è identica. L'unico requisito sono almeno 2 GB di RAM per uno sviluppo WordPress confortevole con il debugging. Questo approccio non funziona su hosting condiviso; servono accesso root o sudo. VS Code Remote SSH non è legato a un provider cloud specifico: puoi connetterti a qualsiasi macchina con sshd attivo, anche un Raspberry Pi sulla tua rete locale. L'unica differenza è la latenza; più vicino è il data center, più reattivo sarà l'editor.

Devo pagare il traffico quando lavoro con VS Code Remote SSH?

Il traffico è minimo. VS Code invia solo le modifiche ai file e i comandi del terminale via SSH; nessun pixel dell'interfaccia o binario delle estensioni viene trasmesso avanti e indietro. Una giornata tipo di sviluppo resta nell'ordine delle decine di megabyte. Le estensioni (incluso Remote-SSH stesso) vengono installate sul server una volta sola durante la prima connessione, con un costo una tantum di qualche centinaio di megabyte. Se hai un limite di traffico molto stretto, disabilita gli aggiornamenti automatici delle estensioni sull'host remoto tramite F1 → Preferences: Configure Runtime Arguments e aggiungi "remote.extensionDownloader.enabled": false. Ma per la stragrande maggioranza degli utenti non è necessario.

Posso lavorare da un server remoto usando un tablet o un telefono?

Tecnicamente sì, tramite VS Code for the Web in un browser, ma con dei limiti. La versione browser non supporta Remote SSH direttamente. Una soluzione alternativa: configura VS Code Server sull'istanza (un prodotto separato, da non confondere con Remote SSH) e connettiti dal browser. Con un tablet dotato di tastiera è uno scenario praticabile; con un telefono è più una curiosità. Un'opzione più concreta è portarsi un portatile leggero o un Chromebook con sottosistema Linux: tutto il carico computazionale resta sul server e il client consuma risorse minime.

Cosa fare se la connessione cade durante lunghi periodi di inattività?

Configura il keepalive nella tua configurazione SSH. Aggiungi due righe alla sezione del tuo host nel file C:\Users\Example\.ssh\config: ServerAliveInterval 60 e ServerAliveCountMax 5. Il client invierà un pacchetto keepalive ogni 60 secondi e manterrà la connessione anche in caso di perdita fino a cinque pacchetti consecutivi, quindi la connessione può sopravvivere fino a 5 minuti di silenzio totale di rete. Un'alternativa: avvia tmux o screen sul server per i processi a lunga esecuzione, così da non perdere la sessione del terminale se la connessione cade.

È sicuro conservare una chiave privata in chiaro su una macchina Windows?

Un file .pem senza passphrase è, sì, una stringa in chiaro che chiunque abbia accesso al tuo account Windows può leggere. Misure di protezione in ordine crescente di sicurezza: (1) imposta una passphrase quando crei la chiave (ssh-keygen te la chiederà; non premere Invio, inserisci invece una passphrase); (2) conserva la chiave su una partizione cifrata (BitLocker è attivo di default in Windows 11 Pro); (3) per ambienti di produzione, usa un agente SSH con una chiave hardware (YubiKey). Per un ambiente di sviluppo, un compromesso è una chiave con passphrase: VS Code la ricorderà per tutta la durata della sessione, dovrai inserirla solo una volta al giorno, ma la chiave diventa inutilizzabile senza la passphrase, anche se il file dovesse trapelare.

Cosa scegliere per il lavoro quotidiano: Remote SSH o uno stack locale

Remote SSH tramite VS Code non è la panacea. Se stai scrivendo un plugin che richiede solo wp-cli e test unitari, una configurazione Docker locale con wordpress-develop compila in un minuto e non richiede accesso a internet. Ma se stai facendo debug di un'integrazione con un'API esterna, testando la compatibilità cross-browser o mostrando i progressi a un cliente, un server remoto con un ambiente di produzione vince.

Per un approccio combinato, tieni un'istanza EC2 di sviluppo sempre attiva (un t3.small riservato ha un prezzo ragionevole) e connettiti in qualsiasi momento da qualsiasi luogo. Il codice risiede sul server, i backup automatici sono attivi e non sei vincolato a una macchina specifica. Prova: dopo una settimana di sviluppo remoto, non vorrai più tornare a XAMPP.