Comment installer Code-Server sur Saplo (VS Code dans un navigateur sans installation)

Tu codes parfois depuis un autre ordinateur que ton propre ordinateur portable, par exemple chez un client ou en déplacement, et à chaque fois, tu dois configurer l'éditeur, les extensions et l'environnement à partir de zéro, ou installer tes propres clés SSH sur l'équipement de quelqu'un d'autre. Code-Server résout ce problème en tant que conteneur Docker unique sur ta Box : le même Visual Studio Code, les mêmes extensions et un terminal intégré, accessibles depuis une adresse dans le navigateur sur n'importe quel appareil, et le code et l'historique des modifications restent au même endroit au lieu d'être dispersés entre les ordinateurs. Dans ce tutoriel, nous allons te montrer comment installer Code-Server sur Saplo.

Qu'est-ce que Code-Server et à qui s'adresse-t-il ?

Code-Server est l'image Docker officielle codercom/code-server, c'est-à-dire Visual Studio Code reconditionné pour fonctionner sur un serveur et être utilisé via un navigateur plutôt qu'une application de bureau. L'interface, les raccourcis clavier, le marketplace d'extensions et le terminal intégré sont identiques à ceux du VS Code habituel. La seule différence est l'emplacement physique du processus de l'éditeur. Il convient aux développeurs qui souhaitent coder depuis n'importe quel appareil sans configurer l'environnement à chaque fois, aux freelances qui travaillent parfois sur l'ordinateur de quelqu'un d'autre et ne veulent pas y laisser de clés ou de code client, ainsi qu'aux équipes qui recherchent un environnement de développement commun, toujours actif, plutôt qu'un IDE cloud payant.

Exigences

Pour installer Code-Server sur Saplo, tu as besoin de :

• Une Box avec Docker activé (le moteur l'active automatiquement lors de l'installation depuis le catalogue, une imbrication dans le conteneur est nécessaire, ce que Saplo propose par défaut),
• L'éditeur, ainsi que les serveurs de langage (LSP), est plus lourd qu'une application web standard, il faut donc compter réalistement sur une Box M pour 63 € par an,
• Un Domaine ou un sous-domaine *.saploapp.pl, inclus dans chaque plan, sous lequel l'éditeur sera hébergé,
• Tu N'as PAS besoin d'une base de données séparée, Code-Server stocke le projet et les paramètres dans deux volumes de données distincts.

Tu trouveras la description complète de l'application et sa place dans le catalogue sur la page Code-Server sur Saplo.

Installation étape par étape

1. Dans le Panneau Saplo, va dans le Catalogue d'applications et choisis Code-Server.
2. Indique un Box avec suffisamment de RAM et un Domaine ou un sous-domaine pour l'éditeur.
3. Valide l'installation. Le moteur génère un mot de passe de connexion aléatoire (uniquement des caractères alphanumériques, sans caractères spéciaux qui pourraient être interprétés comme un remplacement de variable par docker-compose), il crée un conteneur à partir de l'image codercom/code-server avec deux volumes distincts, un pour le répertoire de travail /home/coder/project et l'autre pour les paramètres et les extensions /home/coder/.local/share/code-server, et attend que le conteneur soit effectivement démarré avant de considérer l'installation comme terminée.
4. Le terminal et l'édition en direct dans le navigateur fonctionnent via WebSocket, et le nginx du Box gère les en-têtes Upgrade pour chaque application du catalogue, donc rien de plus n'a besoin d'être activé.
5. Les données de connexion (le mot de passe seulement, sans le nom d'utilisateur) sont stockées dans le fichier CODE-SERVER-SETUP.txt dans le répertoire de l'application.

Première utilisation

1. Récupère le mot de passe dans le fichier CODE-SERVER-SETUP.txt du répertoire de l'application.
2. Accède à l'adresse du Domaine dans ton navigateur et connecte-toi avec ce mot de passe. La connexion à Code-Server ne requiert pas de nom d'utilisateur.
3. Travaille dans le répertoire /home/coder/project, visible dans l'éditeur comme le dossier principal du projet. Tu peux y télécharger des fichiers via le terminal intégré (git clone, scp, wget) ou via le gestionnaire de fichiers dans le Panneau Saplo.
4. Installe des extensions depuis le marketplace, comme dans VS Code sur ordinateur. Elles seront ajoutées au volume des réglages et survivront au redémarrage du conteneur.
5. Fermer l'onglet du navigateur ne ferme pas les processus du terminal. Les tâches longues (build, tests, serveur de développement) continuent de fonctionner sur la Box jusqu'à la prochaine connexion.

Code-Server sur Saplo vs. IDE cloud

Questions fréquentes

Dois-je saisir un nom d'utilisateur lors de la connexion ? Non, Code-Server se connecte avec juste un mot de passe, sans identifiant. Tu trouveras le mot de passe dans le fichier CODE-SERVER-SETUP.txt dans le répertoire de l'application.

Puis-je changer le mot de passe de connexion ? Oui, tu peux modifier la variable PASSWORD dans le fichier docker-compose.yml dans le répertoire de l'application et redémarrer le conteneur depuis le Panneau.

Puis-je installer mes propres extensions et serveurs de langage ? Oui, le marketplace d'extensions fonctionne de la même manière que dans VS Code de bureau, et les extensions installées sont placées dans un volume de paramètres séparé, indépendant du répertoire du projet.

Le terminal et la prévisualisation en direct nécessitent-ils une configuration supplémentaire ? Non, WebSocket pour le terminal et l'édition en direct fonctionne immédiatement. Le serveur Nginx de la Box gère déjà les en-têtes Upgrade pour chaque application du Catalogue.

Code-Server nécessite-t-il une base de données séparée ? Non, le projet et les paramètres sont conservés dans les volumes de données du conteneur, sans nécessiter de base de données MySQL ou Postgres séparée.

Sur une seule Box, à côté de Code-Server, tu peux également installer d'autres outils d'équipe à partir du Catalogue, sans frais pour chaque application séparément. Les règles sont décrites sur la page Hébergement d'applications sur Saplo.

Si aujourd'hui tu paies mensuellement un IDE cloud juste pour avoir VS Code accessible depuis n'importe quel appareil, écris-nous, nous t'aiderons à configurer ton propre Code-Server.