Sfruttare Visual Studio Code per editare i file sul server

Perché usare Visual Studio Code Remote Development?

I vantaggi che l’area technology ha sperimentato in questa modalità di sviluppo remoto includono:

• Essere in grado di modificare, compilare o eseguire il debug su un sistema operativo diverso da quello in esecuzione localmente.
• Essere in grado di sviluppare in un ambiente che corrisponda all'ambiente di distribuzione di destinazione.
• Utilizzo di hardware più grande o più specializzato rispetto alla macchina locale per lo sviluppo.
• Separare gli ambienti degli sviluppatori per evitare conflitti, migliorare la sicurezza e accelerare l'onboarding.

Rispetto all'utilizzo di una condivisione di rete o alla sincronizzazione di file, VS Code Remote Development offre prestazioni notevolmente migliori insieme a un migliore controllo sull'ambiente di sviluppo e sugli strumenti. 

Come usarlo

Per questo articolo, ho preso a riferimento la documentazione ufficiale,che vi consiglierei di controllare a prescindere per qualche dritta in più.

Per sperimentare questa funzionalità ho deciso di crearmi una VPS su digital ocean, 5 dollari al mese, che mi mette a disposizione una macchina ubuntu con 25 GB di HD, 1 CPU e 1 GB di RAM.

In pratica mi bastano pochi settaggi e posso lavorare sul codice presente su server remoto, dal mio computer personale, come se stessi lavorando su una cartella in locale. In questa maniera la VPS diventa un’estensione vera e propria del mio pc locale, ottimizzata per quel singolo progetto, ed eseguirlo non ha nessun costo sulle risorse del mio pc locale con costi irrilevanti (se lo tengo attivo per un mese, pagherò cinque dollari, altrimenti cancello la macchina dopo un po’ ed ecco che l’investimento si riduce al costo di un caffè).

Step 1 

Prima di tutto, occorre che abbiate un po’ di familiarità con il comando SSH della bash, e che controlliate di poter accedere al server remoto 

Per accedere al vostro server remoto tramite ssh dovete conoscere 

1. lo username
2. ip del server o hostname
3. porta 
4. password 

Su sistemi basati su MacOSX e su GNU/Linux è molto semplice, basta usare questo comando 

ssh username@hostname 

Se la porta è diversa dalla 22, dovrete aggiungere il parametro -p dove specificare la porta

ssh username@hostname -p portnumber

Non ho molto pratica dei sistemi Windows più recenti ma grazie alla documentazione ufficiale non dovreste avere alcun tipo di problemi.

Naturalmente se avete già inserito la vostra chiave su ssh sul server remoto, non vi verrà richiesta alcuna password.

Step 2

Partendo dal fatto che abbiate già installato visual studio code su vostra macchina locale, dovrete installare la Remote Development Extension. 

Vi comparirà una nuova icona verde, nell’editor in basso sulla sinistra 

Ogni volta che farete click sopra all’icona, potrete accedere a un menù a tendina che vi permetterà di fare alcune configurazioni e di connettervi alla macchina remota.

Createvi dunque un file config nella vostra cartella .ssh, potete raggiungerlo anche cliccando su Open SSH Configuration File

Sul mio Mac ho questo file, su cui ho settato un paio di macchine che uso, una senza chiave ssh (per cui ogni volta devo mettere la password) e uno su cui ho messo una chiave ssh di accesso :

User/nomeutente/.ssh/config

Host Server-senza-chiave
   HostName ip-del-server
   User username

Host Server-chiave-ssh
   HostName ip-del-server
   User username
   IdentityFile ~/.ssh/chiave_server_rsa

Host *
  ServerAliveInterval 300
  ServerAliveCountMax 2

Alla fine del file, ho definito un paio di intervalli per qualsiasi accesso ssh che faccio anche al di fuori di VS Code, visto che quel file di configurazione viene sfruttato per definire come accedere in ssh tutte le volte che si fa un accesso in ssh su una macchina. Senza la configurazione in Host *,nel mio caso, non avrei potuto più accedere su macchina remota con il classico ssh nomeutente@ip-della-macchina 

Step 3

A questo punto, cliccando su “Connect to host” vi ritroverete una tendina su cui poter scegliere a cosa connettervi. Unico ulteriore passaggio, sarà quello di cliccare su “Apri Cartella” sulla sinistra, per decidere su quale cartella della vostra vps lavorare e il gioco è fatto!

Le applicazioni di queste potenzialità in una digital agency sono numerosissime: vuoi sapere come le applicheremmo alle esigenze del tuo progetto? Contattaci!