Configuration d’un serveur de code Web sous Linux : guide étape par étape

Vous cherchez un moyen de coder où que vous soyez, sans vous encombrer de votre ordinateur portable ? Pensez à utiliser code-server, une application auto-hébergée robuste qui vous permet d’accéder à toute la puissance de Visual Studio Code directement dans votre navigateur web. En installant code-server sur votre serveur de laboratoire, vous bénéficierez d’une expérience de développement fluide qui garantit l’accessibilité et le contrôle de votre code et de vos données, éliminant ainsi le recours à des IDE cloud tiers.

Comprendre Code-Server et les avantages de l’auto-hébergement

Code-server exploite VS Code sur un serveur distant, vous permettant d’y accéder depuis n’importe quel navigateur web. Ses fonctionnalités sont identiques à celles de la version bureau, avec la prise en charge de fonctionnalités telles que l’auto-complétion, le débogage, l’intégration Git et diverses extensions. Cette configuration est particulièrement avantageuse pour les appareils peu gourmands en énergie, comme les tablettes et les Chromebooks, car toutes les tâches de calcul sont effectuées sur le serveur, garantissant ainsi un environnement cohérent et accessible depuis n’importe quel endroit.

L’auto-hébergement de cette application offre plusieurs avantages clés : vous bénéficiez d’un contrôle inégalé sur votre environnement de développement, d’une confidentialité améliorée et de la flexibilité nécessaire pour personnaliser diverses fonctionnalités, notamment l’utilisation d’un domaine personnel, l’activation de HTTPS et la gestion de l’accès des utilisateurs tout en adaptant les ressources informatiques selon les besoins.

Pour commencer, consultez cette aide-mémoire pratique !

Installation de Code-Server sous Linux

La configuration du serveur de code est simple lorsque vous utilisez Docker pour le processus d’installation.

Tout d’abord, téléchargez l’image officielle du serveur de code depuis Docker Hub avec la commande suivante :

sudo docker pull codercom/code-server

Cette commande garantit que vous disposez de la dernière version de l’image du serveur de code stockée localement avant de procéder à la création du conteneur.

Télécharger l'image Docker du serveur de code

Ensuite, lancez un nouveau conteneur de serveur de code en arrière-plan en exécutant une commande qui spécifie un mot de passe unique et garantit un stockage persistant :

sudo docker run -d --name code-server -p 8443:8080 -v "$HOME/code-server-data:/home/coder/project" -e PASSWORD="my_password" codercom/code-server

Conteneur de serveur de code de démarrage

Une fois le serveur de codes configuré, accédez-y via votre navigateur Web en saisissant http://localhost:8443. Saisissez le mot de passe défini lors de la docker runcommande et cliquez sur « Soumettre » pour vous connecter au serveur de codes.

Premiers pas avec Code Server

Une fois connecté, vous découvrirez une interface très similaire à celle de la version bureau de VS Code. Voici un bref aperçu des principaux composants :

Explorateur de fichiers

L’Explorateur de fichiers vous permet de naviguer facilement dans vos projets. Vous pouvez parcourir les dossiers, ouvrir des fichiers, en créer de nouveaux et gérer la structure de votre projet en toute simplicité.

Éditeur

La zone centrale est l’éditeur, où vous effectuerez la majeure partie de votre travail. Lorsque vous ouvrez des fichiers, ils s’affichent ici pour écrire et formater du code, comme dans la version bureau de VS Code.

Terminal

Le terminal est idéalement situé en bas du serveur de codes. Vous pouvez l’ouvrir depuis le menu supérieur en sélectionnant « Terminal » puis « Nouveau terminal », ou utiliser le raccourci clavier Ctrl+ `. Vous pouvez également y accéder rapidement en appuyant sur Ctrl+ Shift+ C.

Extensions

Les extensions font la puissance de VS Code. L’onglet « Extensions » (dans la barre latérale) vous permet de rechercher, d’installer et de gérer les extensions VS Code, notamment les linters, les thèmes et divers outils de prise en charge des langages.

Recherchez n’importe quelle extension à l’aide de la barre de recherche pour l’installer et l’activer rapidement, améliorant ainsi les capacités de votre environnement de développement.

Personnaliser votre IDE basé sur un navigateur

Pour personnaliser l’apparence de votre IDE, par exemple en changeant le thème, cliquez sur l’icône d’engrenage située dans le coin inférieur gauche, passez la souris sur « Thèmes » et sélectionnez « Thème de couleur » dans le menu déroulant :

Une liste des thèmes disponibles s’affichera, vous permettant de prévisualiser et d’appliquer votre choix souhaité.

De plus, vous pouvez facilement installer n’importe quel thème préféré à partir de l’onglet Extensions, en l’activant immédiatement.

Vous pouvez également personnaliser d’autres paramètres en cliquant sur l’icône d’engrenage et en sélectionnant « Paramètres ». Vous pouvez ainsi modifier le comportement de l’éditeur, la taille des polices, les formats, etc.

Créer et exécuter votre premier programme dans Code-Server

Pour créer un nouveau fichier, utilisez le panneau Explorateur ou utilisez le raccourci clavier Ctrl+ Alt+ N:

Sélectionnez un langage de programmation en cliquant sur Sélectionner un langage ou en utilisant le raccourci Ctrl+ K, puis M, et choisissez le langage souhaité, comme Python.

Collez le code suivant dans l’éditeur pour imprimer « Bienvenue sur maketecheasier.com » trois fois :

for i in range(3): print("Welcome to maketecheasier.com")

Avant d’exécuter ce programme, assurez-vous que Python est installé sur votre serveur. Enregistrez le fichier en appuyant sur Ctrl+ S, en lui donnant un nom approprié et en cliquant sur OK :

Pour exécuter le script Python, ouvrez le terminal avec Ctrl+ `et exécutez la commande suivante :

python3 mteExample.py

Exécuter le serveur de code de script Python

Avec Code-Server fonctionnant correctement sur votre système Linux, vous bénéficiez désormais des avantages du développement via navigateur. Vous pouvez personnaliser votre environnement avec des thèmes et des extensions, exécuter du code dans différents langages de programmation et sécuriser l’accès via un domaine personnalisé et HTTPS. Pour une prochaine étape, envisagez d’améliorer votre configuration en explorant les workflows Git, en activant SSL pour la production ou en intégrant des outils web supplémentaires comme JupyterLab, Docker ou Portainer afin d’étendre les capacités de votre laboratoire personnel.

Source et images