Visual Studio Code: Sviluppo Remoto tramite SSH
22 Ottobre 2020

Visual Studio Code: Sviluppo Remoto tramite SSH

In questo tutorial vedremo come connettersi ad un server remoto, con Visual Studio Code,  tramite protocollo Secure Shell SSH.

Quale editor utilizzi per scrivere e modificare il tuo codice sorgente?

Io da anni uso Visual Studio Code per lo sviluppo di tutti i miei progetti.
Perché questa scelta? Rispondo con tre parole: libero, opensource, multipiattaforma (è disponibile infatti per Windows, MacOs e Linux).

Se non lo conosci, dai un’occhiata qui.

Questa immagine ha l'attributo alt vuoto; il nome del file è visualStudioCode1-1024x616.png
Finestra VisualStudio Code

Visual Studio Code viene fornito con supporto integrato per JavaScript, TypeScript e Node.js e ha un ricco ecosistema di estensioni per tutti i linguaggi (C++, C #, Java, Python, PHP, Go, ecc.) e runtime (come .NET e Unity).
Si interfaccia anche con Docker e con Git.

Con Visual Studio Code è possibile gestire tutti i nostri progetti in locale, sulla nostra macchina, con la possibilità di aprire quante più cartelle vogliamo (creando un workspace da poter salvare per riaprirlo successivamente).

SSH ovvero Secure SHell

Ma se i miei progetti risiedono su un server remoto, come posso utilizzare Visual Studio Code per poter lavorare tranquillamente da casa?

Una sola parola: SSH. Si, per collegarci al server (e lavorare sul nostro codice) useremo Visual Studio Code con una connessione SSH o Secure SHell.

Per chi non lo sapesse SSH è un protocollo che permette di stabilire una sessione remota cifrata con un altro host di una rete informatica. In genere la Secure Shell utilizza un’interfaccia a riga di comando ma, come vedremo in seguito, sarà Visual Studio ad effettuare la connessione e a dialogare con il server remoto.

Per effettuare un collegamento tramite protocollo SSH si utilizza il terminale e la seguente sintassi:

ssh <nome utente server remoto>@<indirizzo ip del server remoto>

Di default la porta in ascolto sul server è la 22 (e non è obbligatorio specificarla).
Se la porta è diversa bisognerà indicarla con il  parametro -p:

ssh <nome utente server remoto>@<indirizzo ip del server remoto> -p <numero porta>

Una volta lanciato il comando il terminale richiederà la password per l’utente inserito.
Se l’utente è abilitato all’uso della Secure Shell, verrà effettuato l’accesso al server remoto.

N.B.

Nel prossimo articolo parlerò di come creare, sulla tua macchina, delle chiavi RSA e di come utilizzarle in modo che il server remoto ti logghi senza dover inserire alcuna password. Naturalmente questa tecnologia può essere sfruttata anche in Visual Studio Code!

Estensione da installare in Visual Studio Code

Nella breve descrizione di Visual Studio Code ho accennato al fatto che esistono tantissime estensioni da poter utilizzare.

Per poter sviluppare in remoto tramite protocollo SSH, bisogna ricercare l’estensione Remote SSH:

Questa immagine ha l'attributo alt vuoto; il nome del file è Remote-ssh-uai-1440x352-1-1024x250.png

Installata l’estensione in Visual Studio Code (basta cliccare sul tastino install), possiamo iniziare a configurare gli accessi.

In che modo?

Cliccando sulle due frecce verdi in basso a sinistra

Questa immagine ha l'attributo alt vuoto; il nome del file è remote-status-bar.png

o, per chi ha Mac come me, utilizzando la combinazione di tasti fn+F1.

Comparirà un menu come questo sotto:

Questa immagine ha l'attributo alt vuoto; il nome del file è remote-ssh-commands-uai-1032x203-1-1024x201.png

Ti colleghi a più server? Crea un elenco!

Selezioniamo la seconda riga, “Remote-SSH: Open Configuration FIle…”.

Ci viene chiesto quale file di configurazione vogliamo aprire:

Utilizzando un mac (o linux) consiglio di utilizzare la prima opzione.

Effettuata la scelta verrà aperto il file di configurazione (nella location indicata) che avrà un aspetto simile a questo:

Questa immagine ha l'attributo alt vuoto; il nome del file è Schermata-2020-05-04-alle-23.20.34.png

Come si può intuire, in questo file di configurazione possiamo inserire una lista di server a cui potremo collegarci con Visual Studio Code.

Popolare il file di configurazione

Per ogni server bisognerà specificare il nome dell’host (es Server_Spagna_01), l’user con il quale ci loggheremo sul server remoto (es. pippo953) e il suo indirizzo ip (xxx.xxx.xxx.xxx).

Una volta terminata la lista dei server, salvate il file.

Ritorniamo di nuovo al menu comandi Remote-SSH:

Questa immagine ha l'attributo alt vuoto; il nome del file è remote-ssh-commands-uai-1032x203-1-1024x201.png

Questa volta selezioniamo “Remote-SSH: Connect to Host”.

Verrà visualizzato l’elenco dei server che abbiamo inserito nel file di configurazione.

Selezioniamo il server a cui vogliamo collegarci e Visual Studio Code effettuerà per noi il collegamento. Instaurata la connessione al server remoto verrà richiesta la password per poter finalizzare il login.

Una volta autenticati, è possibile selezionare la cartella che si vuole aprire in Visual Studio Code per poter lavorare tranquillamente con i files e le cartelle al suo interno.

Se non vuoi creare un elenco di server o non vuoi compilare un file di configurazione SSH, puoi inserire direttamente il comando ssh.

Come?

Riapriamo il menu Remote-SSH:

Selezioniamo “Remote-SSH: Connect to Host…” e subito dopo clicchiamo sulla voce:

Comparirà una finestra in cui inserire il comando di connessione SSH:

Inseriamo ad esempio:

ssh pluto23@91.110.44.88 -p 2222

Visual Studio Code effettuerà la connessione ssh, chiederà la password per l’user pluto23:

Una volta effettuato il login avremo davanti una cosa del genere:

Cliccando sul pulsante “Apri Cartella” possiamo scegliere la cartella da aprire:

Una volta selezionata la cartella, siamo pronti a lavorare sui nostri files remoti!

Spero che questo articolo ti sia piaciuto.

Ho cercato di essere il più trasparente possibile nelle spiegazioni, in modo di dare la possibilità di seguire in maniera step by step.

Se non lo hai ancora fatto, iscriviti alla mia newsletter per essere aggiornato sui prossimi articoli in uscita.


Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *