Come installare Code-Server su Saplo (VS Code nel browser senza installazione)

Ti capita a volte di programmare da un computer diverso dal tuo portatile, magari presso un cliente o durante un viaggio, e ogni volta devi configurare l'editor, le estensioni e l'ambiente da zero, oppure installare le tue chiavi SSH su apparecchiature altrui? Code-Server risolve questo problema come un unico container Docker sul tuo Box: lo stesso Visual Studio Code, le stesse estensioni e un terminale integrato, accessibili da un indirizzo nel browser su qualsiasi dispositivo, e il codice e la cronologia delle modifiche rimangono in un unico posto invece di disperdersi tra i computer. In questa guida, ti mostriamo come configurare Code-Server su Saplo.

Cos'è Code-Server e a chi è utile

Code-Server è l'immagine Docker ufficiale codercom/code-server, ovvero Visual Studio Code riconfezionato per funzionare su un server ed essere gestito tramite browser anziché come applicazione desktop. L'interfaccia, le scorciatoie da tastiera, il marketplace delle estensioni e il terminale integrato sono identici a quelli del normale VS Code; l'unica differenza è dove il processo dell'editor viene eseguito fisicamente. È utile per lo sviluppatore che vuole programmare da qualsiasi dispositivo senza configurare l'ambiente ogni volta, per il freelancer che a volte lavora dal computer di qualcun altro e non vuole lasciarci chiavi o codice del cliente, e per un team che cerca un ambiente di sviluppo comune e sempre attivo, invece di un IDE cloud a pagamento.

Requisiti

Per configurare Code-Server su Saplo, hai bisogno di:

• Un Box con Docker in esecuzione (il motore lo abilita automaticamente durante l'installazione dal catalogo, è richiesto il nesting nel container, che Saplo ha per impostazione predefinita).
• L'editor insieme ai server di linguaggio (LSP) è più pesante di una normale applicazione web, quindi realisticamente dovresti considerare un Box M a 63 € all'anno.
• Un Dominio o sottodominio *.saploapp.pl, incluso nel prezzo di ogni piano, su cui l'editor sarà configurato.
• NON hai bisogno di un database separato, Code-Server memorizza il progetto e le impostazioni in due volumi di dati separati.

La descrizione completa dell'applicazione e la sua posizione nel catalogo sono disponibili sulla pagina di Code-Server su Saplo.

Installazione passo dopo passo

1. Nel Pannello Saplo, vai su Catalogo delle applicazioni e seleziona Code-Server.
2. Indica un Box con sufficiente RAM e il dominio o sottodominio sotto il quale verrà installato l'editor.
3. Conferma l'installazione. Il motore genera una password di accesso casuale (solo caratteri alfanumerici, senza caratteri speciali che docker-compose potrebbe interpretare come sostituzione di variabile), crea un container dall'immagine codercom/code-server con due volumi separati, uno per la directory di lavoro /home/coder/project e uno per le impostazioni e le estensioni /home/coder/.local/share/code-server, e attende che il container sia effettivamente avviato prima di considerare l'installazione completata.
4. Il terminale e l'editing live nel browser funzionano tramite WebSocket, e l'nginx del Box gestisce le intestazioni di Upgrade per ogni applicazione dal catalogo, quindi non è necessario abilitare nulla di aggiuntivo.
5. I dati di accesso (solo la password, senza il nome utente) finiscono nel file CODE-SERVER-SETUP.txt nella directory dell'applicazione.

Primo utilizzo

1. Recupera la password dal file CODE-SERVER-SETUP.txt nella directory dell'applicazione.
2. Accedi all'indirizzo del dominio nel browser e effettua il login con questa password; l'accesso a Code-Server non richiede un nome utente.
3. Lavora nella directory /home/coder/project, visibile nell'editor come cartella principale del progetto; puoi caricare i file tramite il terminale integrato (git clone, scp, wget) o tramite il file manager nel pannello Saplo.
4. Installa le estensioni dal marketplace proprio come faresti nella versione desktop di VS Code; vengono salvate nel volume delle impostazioni e sopravvivranno al riavvio del container.
5. La chiusura della scheda del browser non interrompe i processi nel terminale; le attività lunghe (build, test, server di sviluppo) continuano a funzionare sul Box fino al prossimo login.

Code-Server su Saplo vs. IDE cloud

Domande frequenti

Devo inserire un nome utente per accedere? No, Code-Server accede solo con una password, senza login. Troverai la password nel file CODE-SERVER-SETUP.txt nella directory dell'applicazione.

Posso cambiare la password di accesso? Sì, devi cambiare la variabile PASSWORD nel file docker-compose.yml nella directory dell'applicazione e riavviare il container dal Pannello.

Posso installare le mie estensioni e i miei language server? Sì, il marketplace delle estensioni funziona come in VS Code desktop, e le estensioni installate finiscono in un volume di impostazioni separato, indipendente dalla directory del progetto.

Il terminale e l'anteprima dal vivo richiedono una configurazione aggiuntiva? No, WebSocket per il terminale e l'editing dal vivo funziona immediatamente. L'nginx del Box ha già gestito le intestazioni Upgrade per ogni applicazione del catalogo.

Code-Server richiede un database separato? No, il progetto e le impostazioni sono mantenuti nei volumi di dati del container, senza la necessità di un database MySQL o Postgres separato.

Su un singolo Box, oltre a Code-Server, puoi installare anche altri strumenti del team dal catalogo, senza costi aggiuntivi per ogni applicazione. Le regole sono descritte nella pagina Hosting di applicazioni su Saplo.

Se oggi paghi mensilmente per un IDE cloud solo per avere VS Code disponibile da qualsiasi dispositivo, scrivici, ti aiuteremo a configurare il tuo Code-Server.