Guida Definitiva allo sviluppo remoto con Visual Studio Code via SSH

Visual Studio Code è dotato di una funzionalità che consente di modificare i file direttamente sul server remoto. Si chiama Remote development, e apre scenari davvero rivoluzionari alla metodologia di lavoro per i programmatori web (PHP, HTML, JS, ...) che, fino ad ora, erano costretti a configurare tutto lo stack applicativo (Apache/Nginx, PHP, MySQL, Redis, Memcache, ...) sul proprio PC locale per lavorare agevolmente, oppure copiare i file in locale, modificarli e ricaricarli (magari via FTP!) sul server per visualizzare le modifiche. Ebbene: in questa guida vedremo proprio come configurare Visual Studio Code per lo sviluppo remoto (Remote development), di modo da ottenere i risultati ottimali

Il flusso di lavoro che otterremo al termine della procedura è esattamente quello descritto:

1. i file che compongono il progetto software al quale stiamo lavorando risiederanno unicamente sul server remoto
2. dal nostro PC di lavoro potremo sfogliare le cartelle, aggiungere e modificare i file sul server remoto direttamente da Visual Studio Code
3. le modifiche apportate saranno "live" immediatamente, ad ogni salvataggio, senza alcun ritardo

I requisiti

Affinché sia possibile lo sviluppo remoto ci servono:

1. il nostro tradizionale PC da lavoro Windows 10 o Windows 11 (le generazioni precedenti non sono immediatamente compatibili), Linux o Mac sul quale installeremo Visual Studio Code
2. un server remoto
3. l'accesso in SSH al server remoto in questione

Per quanto riguarda il server remoto: sono supportate varie versioni/edizioni/distribuzioni di Windows, Linux e Mac, ma è opportuno consultare puntualmente la lista completa. Per la mia prova ho utilizzato con successo sia un server fisico con Ubuntu Server 22.04, sia Ubuntu Server in esecuzione all'interno di un container Docker. Evidenzio, dopo aver trascorso una notte insonne, che l'immagine Docker di Alpine non è ancora compatibile (o, perlomeno, richiede un livello di effort elevato).

Preciso infine che è proprio necessario utilizzare SSH. Come chiaramente indicato sulla documentazione ufficiale, un più semplice accesso FTP non sarebbe compatibile. Sebbene sia vero che l'estensione ftp-simple promette di sopperire a questa carenza, la mia prova pratica ha evidenziato enormi lacune, tali da renderla inutilizzabile per chi vuole "fare sul serio".

Sviluppo remoto con Visual Studio Code, Passo 1: Preparare il server

Come dicevamo, è necessario disporre di un server remoto con lo stack applicativo (Apache/Nginx, PHP, MySQL, Redis, Memcache, ...). Se ancora non ce l'hai, puoi configurarlo seguendo questa guida:

» Leggi: Installare e configurare un server web: La Grande Guida ad Apache/Nginx, PHP, MySQL su Windows e Linux

Va da sé che è una pessima, pessima idea lavorare direttamente sui file "di produzione"! Come minimo, vorremo creare una copia della cartella sul server che ospita il progetto al quale vogliamo lavorare e, tramite un <VirtualHost> di Apache (server{} in Nginx), far rispondere la copia ad un dominio come dev.miosito.com, per poi collegare a quella cartella Visual Studio Code e lavorare lì dentro.

Sviluppo remoto con Visual Studio Code, Passo 2: Configurare l'accesso SSH

A questo punto è indispensabile configurare l'accesso SSH dal nostro PC "di lavoro" (quello sul quale eseguiremo Visual Studio Code) al server remoto.

Innanzitutto, dobbiamo riuscire a stabilire un collegamento SSH "semplice", magari utilizzando la sintassi base ssh mio-utente-remoto@miosito.com per poi inserire la password. Abbiamo dettagliato la procedura in questo approfondimento dedicato:

» Leggi: SSH con Windows, Linux, Mac: la Guida Definitiva

Raggiunto il risultato, dobbiamo fare un passo oltre e configurare tutto quanto affinché sia possibile accedere in SSH senza digitare la password, ma utilizzando lo "scambio delle chiavi" che si ottengono tramite ssh-keygen. L'approfondimento dedicato è qui:

» Leggi: [guida] Come creare una chiave SSH da PC Windows, Linux, Mac e accedere ai server senza password

L'ultima cosa da fare per quanto riguarda la connessione SSH è configurare un "profilo di connessione" per il server al quale vogliamo collegarci. Nello specifico, dobbiamo modificare il file .ssh/config (si trova nella "home" dell'utente) aggiungendo qualcosa di simile a questo:

Host mioserver

HostName mioserver.com

User mioUsernameSsh

Port 22

StrictHostKeyChecking no

La guida dettagliata al file .ssh/config è disponibile qui:

» Leggi: [guida] Come configurare la connessione SSH con tunnel, proxy e chiavi diverse: guida al file .ssh/config (con esempi pratici, Windows 10 e Linux)

Prima di proseguire oltre, dobbiamo sincerarci che, mettendo insieme tutto quello che abbiamo fatto fin qui, sia possibile stabilire la connessione SSH al server remoto semplicemente impartendo qualcosa di simile a ssh mioserver. Se abbiamo raggiunto l'obbiettivo, configurare Visual Studio Code e iniziare a lavorare sarà facilissimo.

Sviluppo remoto con Visual Studio Code, Passo 3: Installare Visual Studio Code

Se ancora non l'abbiamo fatto, procediamo a scaricare ed installare Visual Studio Code. È gratuito, senza alcuna limitazione, disponibile in versioni per Windows, Linux e Mac. Si scarica da qui:

» Download: Visual Studio Code

L'interfaccia del programma si presenta in inglese, ma una notifica che propone di installare la traduzione in italiano dovrebbe comparire dopo pochi istanti

Così non fosse, è possibile installare Italian Language Pack for Visual Studio Code cercando italian nella sezione delle estensioni installabili (ultima icona nella barra di sinistra)

Per rendere effettiva la traduzione è necessario riavviare Visual Studio Code.

Sviluppo remoto con Visual Studio Code, Passo 4: Installare Remote Development

Per abilitare lo sviluppo remoto con Visual Studio Code passiamo alla sezione dedicata alle estensioni installabili (ultima icona nella barra di sinistra). Da qui:

1. cercare remote ssh nel campo in alto
2. fra i risultati, cliccare su Remote - SSH
3. cliccare Installa a centro pagina

Così facendo, verrà installa automaticamente anche una seconda estensione di nome Remote - SSH: Editing Configuration Files: si tratta di un comodo strumento di supporto che ci supporta nella modifica dei file di configurazione SSH

Segnalo, per completezza, che la documentazione ufficiale indica di installare Remote Development, e non l'estensione che ho appena raccomandato. In realtà, Remote Development è un extension pack che raccoglie semplicemente molteplici estensioni in un unico download, fra le quali anche la nostra Remote - SSH. Le altre estensioni, però, non sono particolarmente utili o interessanti per gli scopi correnti, e potremo comunque sempre installarle in seguito se necessario.

Sviluppo remoto con Visual Studio Code, Passo 5: Connessione al server remoto

Ci siamo quasi! Il prossimo passo prevede di cliccare sul piccolo pulsante verde con il simbolo >< che è comparso nell'angolo in basso a sinistra in seguito all'installazione dell'estensione Remote - SSH.

Dal menu a tendina apertosi in alto, selezionare Connetti la finestra corrente all'host

Si aprirà così la lista dei "profili di connessione" configurati in precedenza nel file .ssh/config.

Procediamo dunque a cliccare sul server remoto al quale vogliamo connetterci - nello screenshot seguente, ad esempio, si vede l'unico profilo che ho configurato sul mio PC: ha nome zzdev (è il valore che ho associato al campo Host nel file .ssh/config)

Dobbiamo infine indicare quale sia il sistema operativo in uso sul server al quale ci stiamo connettendo

Attendiamo ancora qualche secondo e, a meno di errori o problemi, la dicitura verde nell'angolo in basso a sinistra dovrebbe trasformarsi in qualcosa di simile a >< SSH: zzdev.

Cosa fare in caso di problemi

Se il Passo precedente si è concluso con un errore, significa che c'è un problema nello stabilire il collegamento SSH.

La prima cosa da fare è dunque aprire il Terminale e tentare la connessione da lì, utilizzando lo stesso "profilo di connessione" SSH che abbiamo appena tentato di utilizzare in SSH. Nel mio caso, dunque, avrei impartito qualcosa di simile a ssh zzdev

Nell'improbabile caso che da Terminale tutto funzioni:

1. torna a Visual Studio Code
2. dalla barra dei menu in alto, clicca Terminale -> Nuovo terminale
3. spostati su OUTPUT
4. dal menu a tendina sulla destra, quello che probabilmente legge Attività, seleziona Remote - SSH

Otterrai così il log dettagliato della connessione, esaminando il quale potresti scoprire cosa è andato storto.

Sviluppo remoto con Visual Studio Code, Passo 6: Aprire la cartella remota

Una volta che la connessione SSH è stabilita:

1. clicca sulla prima icona nella barra di sinistra di Visual Studio Code
2. clicca Apri cartella

Dovrai ora digitare il percorso nel quale si trova il tuo progetto sul server remoto - l'autocompletamento viene in nostro soccorso suggerendoci le cartelle valide, per fortuna!

In caso la cartella desiderata non venisse mostrata o fosse inaccessibile, consulta il Passo relativo alla modifica dei file, poco più sotto. La soluzione è analoga.

Una volta raggiunta la cartella desiderata clicca OK, spunta la casella e conferma che si tratta di un progetto sicuro

Potrai così accedere a tutti i file presenti nella cartella. Qui, ad esempio, ho aperto un file HTML

Sviluppo remoto con Visual Studio Code, Passo 7: Creare/modificare i file

A questo punto sei libero di lavorare a tutti i file del progetto. Ad ogni salvataggio, ti basterà ricaricare il browser sulla pagina modificata per vedere "live" le modifiche apportate.

In caso dovessi ricevere un errore di "accesso negato", non dimenticare che il tuo utente SSH deve avere i privilegi per accedere ai file che vuoi modificare. Così non fosse, generalmente ti basterà accedere tramite Terminale in SSH ed impartire qualcosa di simile a:

sudo chmod ugo=rwx /mio/percorso -R

Così facendo dovresti poter risolvere rapidamente il problema e poter ricominciare a lavorare.

Puoi anche creare nuovi file e cartelle, oltre a modificare quelli preesistenti. Allo scopo, ti basta:

1. individuare, nell'alberatura di sinistra, la cartella nella quale vuoi creare il nuovo file o sotto-cartella
2. farvi click con il pulsante destro del mouse
3. scegliere Nuovo file oppure Nuova cartella

È ora sufficiente dare un nome all'elemento e il gioco è fatto! Chiaramente, come ormai hai già capito, il vantaggio di questa soluzione è che la cartella o il file appena aggiunto sarà creato direttamente sul server remoto, e non sul PC locale.

Sviluppo remoto con Visual Studio Code, Passo 8: Salvataggio automatico

Vuoi essere ancora più comodo e veloce? Ebbene: Visual Studio Code supporta il salvataggio automatico, anche per le sessioni di sviluppo remoto. Attivando l'opzione File -> Salvataggio automatico non dovrai nemmeno più salvare, ma ogni modifica apportata ad un qualsiasi file sarà salvata immediatamente e automaticamente. È comodissimo, te lo raccomando.

Sviluppo remoto con Visual Studio Code, Passo 9: Aggiungere immagini e altri file esterni

Ma... come fare per aggiungere immagini o altri file preesistenti dal PC locale al progetto remoto? Semplicissimo: basta trascinare il file desiderato dal PC locale e rilasciarlo all'interno dell'alberatura di Visual Studio Code, nella sotto-cartella desiderata

Il file verrà così caricato sul server remoto, all'interno della cartella scelta, in modo del tutto trasparente. E, ovviamente, sarà immediatamente visualizzato anche da Visual Studio Code.

Sviluppo remoto con Visual Studio Code, Passo 10: Terminale remoto

Mentre sei connesso in SSH da Visual Studio Code, non è necessario aprire una finestra di Terminale separata per impartire comandi al sistema remoto. Basta infatti cliccare sulla voce di menu Terminale -> Nuovo terminale (nella barra in alto) per attivare un'istanza integrata, già posizionata nella cartella del progetto

Sviluppo remoto con Visual Studio Code, Passo 11: Git remoto

Per chi utilizzi Git, segnalo che l'integrazione nativa di Visual Studio Code (terza icona della barra di sinistra) funziona alla perfezione, anche in abbinata allo sviluppo remoto

L'unica limitazione che ho rilevato è che, per eseguire git push, è necessario autorizzare anche le chiavi SSH del server sul repository verso il quale vogliamo pushare.

» Leggi anche: Commit! Pull! Push! - Guida rapida a Git per professionisti impegnati

In altre parole: dovremo effettuare il push con le chiavi del server remoto, e non con quelle del PC locale. Questa sezione della guida ufficiale sostiene che basti aggiungere il parametro ForwardAgent yes al "profilo di connessione" SSH all'interno di .ssh/config per utilizzare le chiavi del PC locale, ma io l'ho fatto e non ho ottenuto l'effetto cercato.

Sviluppo remoto con Visual Studio Code, Passo 12: Debugging di PHP con Xdebug

Visual Studio Code si integra perfettamente con Xdebug, permettendoci di svolgere il debug dei file PHP anche durante le sessioni di sviluppo remoto. La guida completa è disponibile qui:

» Leggi: Come usare Xdebug con Visual Studio Code: la Guida Definitiva al debug PHP (con breakpoint ed esecuzione a step per Windows 10 e Linux)

Conclusioni

In questo articolo abbiamo visto come utilizzare le funzioni di sviluppo remoto offerte da Visual Studio Code. Sto utilizzando con grande soddisfazione questa funzionalità da parecchio tempo ormai, non fosse altro per la comodità di accedere al mio lavoro di programmatore da qualsiasi PC, anche quelli sui quali non sarebbe possibile (o, comunque, sarebbe ben poco pratico) installare Nginx, PHP, MySQL e tutto il resto.

La mia esperienza è dunque molto positiva, e raccomando di provarla un po' a tutti, tanto agli sviluppatori web professionisti, quanto agli appassionati o a chi stia approcciando ora la materia per la prima volta.