Come avere un ambiente di sviluppo software accessibile da qualsiasi tipo di client

By mscire

Era da molto tempo che desideravo avere la pssibilità di potere sviluppare indipendentemente da dove mi trovavo e cosa avevo a disposizoione come device. Ovvero l’obiettivo era di potere fare correzioni o sviluppare indipendentemente se fossi davanti un PC, un iPad, un Tablet o un telefono Android o iPhone. Dopo qualche ricerca ho scoperto il sistema Viaual Studio Code Server o VS Code Server. VS Code o Visual Studio Code, è un editor di codice potente e ricco di funzionalità, conosciuto da quasi da tutti gli sviluppatori. Sarebbe bello avere un editor di codice remoto e ospitarlo su un dominio di tua scelta senza richiedere alcuna dipendenza. Puoi aprire l’editor del codice di sviluppo remoto solo con un browser.

Visual Studio Code Server è un servizio che puoi eseguire su un computer di sviluppo remoto, come il tuo PC desktop o una macchina virtuale (VM). Ti consente di connetterti in modo sicuro a quella macchina remota da qualsiasi luogo tramite un client VS Code locale, senza la necessità di SSH. In VS Code, vogliamo che gli utenti possano sfruttare senza problemi gli ambienti che li rendono più produttivi. Le estensioni di sviluppo remoto di VS Code ti consentono di lavorare nel sottosistema Windows per Linux (WSL), su macchine remote tramite SSH e contenitori di sviluppo direttamente da VS Code. Queste estensioni installano un server nell’ambiente remoto, consentendo a VS Code locale di interagire senza problemi con il codice sorgente e i runtime remoti.

Ora forniamo un “VS Code Server” autonomo, ovvero un servizio costruito sullo stesso server sottostante utilizzato dalle estensioni remote, oltre ad alcune funzionalità aggiuntive, come una CLI interattiva e che facilita le connessioni sicure a vscode.dev.

Vogliamo fornire un’esperienza VS Code unificata indipendentemente da come utilizzi l’editor, sia locale che remoto, sul desktop o nel browser.

L’accesso al server VS Code è integrato nella CLI del codice esistente.

La CLI stabilisce un tunnel tra un client VS Code e il computer remoto. Il tunneling trasmette in modo sicuro i dati da una rete all’altra.

Architettura

Obiettivo principale di VS Code è fornire un’esperienza utente unificata indipendentemente da dove utilizzi l’editor, sia in modalità locale sia in remoto, sul desktop o nel browser. Quindi: L’accesso al server VS Code è integrato nella CLI del codice esistente. La CLI stabilisce un tunnel tra un client VS Code e il computer remoto. Il tunneling trasmette in modo sicuro i dati da una rete all’altra.

VS Code Server è composta schematicamente da alcuni componenti:

ll server VS Code: server backend che rende possibili esperienze remote con VS Code.
Estensione tunnel: caricata automaticamente nel client VS Code locale, per facilitare la connessione alla macchina remota.

Realizzazione

Prima di vedere in dettaglio la realizzazione, vediamo i pre-requisiti:

Un account AWS ( piano gratuito per 12 mesi von EC2)
Conoscenze di base su AWS [come la creazione di un’istanza EC2, gruppi di sicurezza, SSH]

1 – Istanza EC2 su AWS

Registrati a AWS se non lo sei
Accedi al tuo account AWS e crea un’istanza t2.micro, ti suggerisco di scegliere un OS Ubuntu Ami perché viene fornito con yum e apt preinstallati.
Assicurati che la tua istanza consenta il traffico https/http dall’esterno, ad esempio Internet.
In “Gruppi di sicurezza” assicurati di avere righe per “SSH” (:22), “HTTPS” (:443) e “HTTP” (:80) per le regole di ingresso.
Genera un file di chiave e archivialo localmente su SSH nell’istanza remota.
Ottieni un indirizzo AWS IP Elastico e associalo all’istanza.
Avvia la tua istanza, associa indirizzo IP e prendi nota dell’indirizzo IP pubblico dell’istanza.

2 – SSH alla istanza

Utilizzando la coppia di chiavi ssh per la tua istanza.

ssh -i "path-to-your-key-file.pem" <user-name>@<public_ip>

3 – Installazione del server VS code

Una volta entrato nell’istanza EC2, installa code-server eseguendo i seguenti comandi.

export HOME=/root

#to view live logs while installing
curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run

#normal install
curl -fsSL https://code-server.dev/install.sh | sh

Al termine dell’installazione, se non vengono visualizzati errori, possiamo attivare il server. messaggio seguente.

#To start code-server
sudo systemctl enable --now code-server@$USER

#Next check the status of code-server
sudo systemctl status code-server@$USER

Dopo il secondo comando, nell’output su consolle, se scorri in basso puoi trovare l’indirizzo IP su cui il tuo code-server è in ascolto, ad esempio http://127.0.0.1:8080. Attenzione se lo avessimo eseguito su un sistema locale avremmo potuto navigare su http://127.0.0.1:8080 nel browser per visualizzare il nostro server di codice, ma poiché siamo in un’istanza remota dobbiamo installare un server web come NGINX per ospitare il nostro server di codice VS attraverso il nostro dominio personalizzato o direttamente dal IP creato..

Se non disponi di un dominio puoi acquistarne uno da siti come: Google Domains o Amazon Route 53 (oppure puoi sceglierne uno qualsiasi a tua scelta) Una volta che hai un nome di dominio, aggiungi un record di tipo A al tuo dominio che punta all’indirizzo IP della tua istanza.

PASSO 4 → Installazione e configurazione del server NGINX

Ora, un’altra cosa di cui abbiamo bisogno oltre al server Nginx ovvero dobbiamo aggiungere un po’ di TLS (Transport Layer Security) al nostro server di codice per rendere sicura la connessione HTTPS.
Quindi installiamo certbot insieme a Nginx per ottenere un certificato SSL per il nostro dominio.

Installa NGINX:

sudo apt update 
sudo apt install -y nginx certbot python3-certbot-nginx

Crea o, se già esiste, Aggiorna il file /etc/nginx/sites-available/code-server utilizzando sudo con la seguente configurazione:

server {
    listen 80;
    listen [::]:80;
    server_name yourdomain.com; #your domain name 

    location / {
      proxy_pass http://127.0.0.1:8080/; #ip where you code-server was listening see IMG [1.3]
      proxy_set_header Host $host;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection upgrade;
      proxy_set_header Accept-Encoding gzip;
    }
}

Abilita la configurazione:

sudo ln -s ../sites-available/code-server /etc/nginx/sites-enabled/code-server
sudo certbot - non-interactive - redirect - agree-tos - nginx -d tuodominio.com -m tuo@esempio.com

Assicurati di sostituire tuo@esempio.com con la tua email effettiva e tuodominio.com il tuo nome di dominio effettivo. A questo punto, dovresti essere in grado di accedere al code-server tramite digitando su un browser https://tuodominio.com. In basso per referenza la tabella con i comandi del server Nginx:

sudo systemctl ricarica nginx
sudo systemctl avvia nginx
sudo systemctl arresta nginx
sudo systemctl stato nginx

Digitando https://tuodominio.com. è ora possibile accedere al tuo nome di dominio, e vedrai apparire la pagina seguente.

Digita la password del code-server dal percorso mostrato: ~/.config/code-server/config.yaml nella tua cartella /root. Aprendo in modifica il file ~/.config/code-server/config.yaml è possibile saltare la richiesta della password. Ora puoi vedere la finestra del VS aperta nella finestra del tuo browser,

Come ho detto prima, in alternativa a utilizzare il mio dominio, è possibile utilizzare l’indirizzo IP pubblico della mia istanza a scopo di visualizzazione e test.

Ora puoi accedere a tutti i tuoi file che si trovano nell’istanza remota.

Facendo un ulteriore passo avanti:

Puoi trasformare la distribuzione dell’istanza EC2 e configurare user_data dell’istanza in qualsiasi ambiente di sviluppo di cui hai bisogno, inclusi codice, pacchetti, librerie, ecc. e condividere semplicemente il nome di dominio su cui gli sviluppatori possono lavorare. Ottengono un ambiente di lavoro indipendente già pronto che funziona nel browser. Dal momento che utilizzerai terraform, puoi schierare e distruggere in qualsiasi momento con facilità.