Sviluppo in remoto con Visual Studio Code via SSH

Vuoi usare Visual Studio Code per collegarti via SSH a un server remoto?

In questa guida ti mostreremo come collegarci al server e usare così VS Code con una connessione SSH.

Nella seconda parte della guida, vedremo come risolvere i problemi di connessione più comuni.

Iniziamo!

Come collegarci via SSH a un server remoto usando Visual Studio Code

Con Visual Studio Code, grazie all’apposita estensione Remote-SSH possiamo usare un server remoto come ambiente di sviluppo.

Questa estensione ci permette infatti di:

• collegarci a un ambiente di sviluppo creato sul server;
• alternare diversi ambienti di sviluppo collegandoci ad essi da remoto.

Il vantaggio di utilizzare questa estensione è che di fatto non dobbiamo avere i file sul nostro computer locale perché possiamo eseguire i comandi direttamente sul server remoto.

Per poter utilizzare un server remoto ai fini di sviluppo è necessario avere:

• un server con accesso SSH;
• Visual Studio Code installato sul proprio computer.

Con SupportHost hai a disposizione l’accesso SSH con tutti i piani, inclusi quelli condivisi. Tuttavia, se vuoi utilizzare Visual Studio Code in maniera fluida ti raccomandiamo di utilizzare un piano hosting con maggiori risorse, come l’hosting semidedicato.

Configurare l’accesso SSH

Per stabilire una connessione SSH con un server remoto, è raccomandato l’utilizzo della connessione con chiavi.

Puoi seguire la procedura dettagliata nella guida alla connessione SSH.

Ecco i passi da seguire in breve.

1) Crea le chiavi

Da macOS e Linux puoi generare le chiavi da terminale. Se usi Windows puoi usare PuTTYgen per creare una chiave RSA a 4096 bit.

2) Aggiungi le chiavi

Dopo aver generato le chiavi, dobbiamo inserire la chiave pubblica nel file /.ssh/authorized_keys del server.

Se il file non esiste, dobbiamo crearlo e copiare al suo interno la chiave pubblica.

La chiave privata, invece, andrà salvata nella cartella .ssh del tuo computer. Su Windows il percorso è:

C:\Users\nome-utente\.ssh

Nota importante: se hai generato la chiave con PuTTYGen dovrai prima convertirla affinché funzioni. Altrimenti se usi la chiave come generata da PuTTY (in formato .ppk) VS Code ti restituirà un errore che dice che il formato della chiave non è supportato.

Per la conversione apri la chiave privata con PuTTYGen, poi clicca su Conversions > Export Open SSH key e salva la chiave nella cartella .ssh. Ricordati il nome che usi per salvare la chiave, perché ci servirà per la configurazione nel prossimo passaggio.

Installare l’estensione su Visual Studio Code

A questo punto possiamo avviare Visual Studio Code. Se ancora non lo hai installato, puoi scaricarlo dal sito code.visualstudio.com e poi seguire la procedura guidata per l’installazione.

Apriamo Visual Studio Code e usiamo il tool delle estensioni per accedere al Marketplace e installare l’estensione.

L’estensione che ci serve si chiama “Remote-SSH“:

1. clicchiamo sull’icona delle estensioni;
2. usiamo la barra di ricerca per cercare l’estensione;
3. clicchiamo sul pulsante “Install” per installarla.

A questo punto dobbiamo configurare la connessione SSH con i dati necessari.

Modificare il file per la configurazione SSH

Da VS Code premiamo F1 e poi Ctrl+Shift+P, per poi selezionare “Remote-SSH: Open SSH configuration file“.

Selezioniamo il file di configurazione che si trova nella cartella “user” del nostro computer.

A questo punto dobbiamo modificare il file in questo modo:

Host alias 

HostName IP 

User user 

Port 2299 

IdentityFile ~/.ssh/nome-chiave

Nello specifico:

• Accanto a host possiamo inserire il dominio del sito.
• in HostName dobbiamo inserire l’IP
• in User il nome utente.
• Come porta, se ti stai collegando a un server di SupportHost devi usare la porta 2299.
• Alla riga IdentityFile dobbiamo specificare il percorso della chiave privata che abbiamo salvato nella cartella .ssh nello step precedente.

Il nostro file compilato sarà quindi simile a questo esempio:

Host esempio.com

HostName 11.102.10.10

User maria

Port 2299 

IdentityFile C:\Users\Maria\.ssh\id_new

Dopo compilato tutto (con i dati corretti), con CTRL+S salviamo le modifiche al file di configurazione.

Collegarci al server remoto

A questo punto clicchiamo sull’icona “Open a remote Window” e selezioniamo “Remote-SSH: Connect to Host“.

Vedremo nell’elenco l’alias che abbiamo specificato nel file di configurazione alla linea “Host”. Facendo click su di esso si avvierà la connessione al server.

A questo punto VS Code potrebbe chiederci il tipo di sistema operativo della macchina remota e possiamo selezionarlo dal menu, in questo modo:

Nota che questo passo è opzionale, in alcuni casi VS Code riuscirà a rilevare automaticamente il tipo di server.

Dopodiché, se i dati sono corretti, Visual Studio Code riuscirà a connettersi al server.

A questo punto possiamo cliccare sulla barra in basso a sinistra per visualizzare una lista di comandi. In alternativa possiamo usare le scorciatoie che vediamo per aprire cartelle e file dal server remoto e iniziare a sviluppare.

Scollegarci dal server remoto

Per interrompere la connessione SSH con un server remoto da Visual Studio Code ci basta cliccare su File >Close remote connection.

Avendo salvato i dati nel file di configurazione, per ricollegarci ci basterà seguire i passaggi precedenti:

1. cliccare sull’icona “Open a remote window”
2. selezionare “Connect to host” e poi scegliere l’host dalla lista.

Risolvere problemi di connessione

Se stai riscontrando errori mentre cerchi di collegarti via SSH con Visual Studio Code, ci sono diverse soluzioni che puoi seguire.

La prima cosa da fare è aprire il log e leggere che tipo di errore c’è.

Qui di seguito ti elenco alcuni dei problemi più comuni e le verifiche che puoi fare per risolvere.

Problemi con i permessi

Se l’errore riguarda i permessi dei file sul computer locale, puoi fare un controllo per assicurarti che siano corretti.

L’errore che potresti vedere, in questo caso, è simile a questo:

 Permission denied (publickey,password).

In questo caso puoi fare due cose:

• Controllare i permessi dei file, come vedremo tra poco.
• Assicurarti di aver specificato il nome corretto della chiave nel file di configurazione (controlla il passaggio “Modificare il file per la configurazione SSH”).

Se hai un sistema operativo macOS o Linux devi verificare che i permessi di file e cartelle corrispondano a quelli che vedi nella tabella seguente. Da terminale da Linux puoi usare il comando chmod per modificare i permessi.

Cartelle o file	Permessi corretti
.ssh (cartella che si trova all’interno della cartella utente)	chmod 700 ~/.ssh
.ssh/config (file di configurazione)	chmod 600 ~/.ssh/config
file di chiavi pubbliche (Ad esempio: .ssh/id_123)	chmod 600 ~/.ssh/key-file

Su Windows, invece, devi controllare che i file all’interno della cartella .ssh abbiano un solo proprietario: l’utente che stai utilizzando.

Formato della chiave non valido

Potresti visualizzare nel log degli errori un messaggio come questo:

Load key "C:\\Users\\user/.ssh/chiave.ppk": invalid format

In questo caso se hai usato PuTTYgen per creare la chiave, devi convertire la chiave usando PuTTYgen come abbiamo visto nel passaggio di questo articolo: “2) Aggiungi le chiavi”.

Problemi di autenticazione

Se stai usando una connessione SSH con password o una chiave SSH con passphrase, durante l’accesso VS Code dovrebbe mostrati un avviso per poter inserire le informazioni di accesso.

Se non vedi il prompt che ti invita a inserire i dati per accedere, verifica che sia attiva l’impostazione “remote.SSH.showLoginTerminal”.

In caso di problemi, puoi provare a inserire direttamente queste due righe nel file settings.json:

"remote.SSH.showLoginTerminal": true,
"remote.SSH.useLocalServer": false

Su Windows, trovi il file settings.json in:

C:\Utenti\NomeUtente\AppData\...\Code\User\settings.json

Puoi aprire il file, aggiungere le righe e poi salvare le modifiche, come in questo esempio:

Conclusioni

Abbiamo visto come fare a usare Visual Studio Code per collegarci tramite connessione SSH a un server remoto. In questo modo possiamo accedere a file e cartelle e lavorare allo sviluppo usando il server come ambiente.

Come abbiamo visto per farlo è sufficiente:

• avere accesso SSH (e aver creato le chiavi per poter stabilire la connessione);
• installare Visual Studio Code e l’estensione Remote-SSH;
• collegarsi.

Sei riuscito/a a collegarti al tuo server? Facci sapere nei commenti.