Introduction aux IDE Web

Les IDE Web permettent d'accéder à un environnement de développement complet via un navigateur, offrant des fonctionnalités telles que l'écriture de code, le débogage, l'accès aux dépôts et l'exécution de commandes. Ils fournissent un environnement standardisé, réduisant les coûts d'installation et de maintenance. Différentes solutions existent, comme AWS Cloud9, Eclipse Che et GitHub Codespaces, qui intégrer VS Code dans un navigateur avec support des extensions.

Construction de VS Code pour le Web à partir du code source

Prérequis système

Sur un système CentOS 7, installez les dépendances nécessaires pourr la compilation. Utilisez les gestionnaires de paquets pour ajouter les outils de développement et les bibliothèques requises.

# Vérification de l'environnement
uname -a
cat /etc/redhat-release

# Installation des paquets de base
yum install -y make pkg-config
yum groupinstall -y "Development Tools"
yum install -y libX11-devel libxkbfile-devel libsecret-devel

# Installation de Node.js et Yarn
curl -sL https://rpm.nodesource.com/setup_12.x | bash -
yum install -y nodejs
node -v && npm -v

curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
yum install -y yarn
yarn -v

Téléchargement du code source

Choisissez une version stible de VS Code depuis les releases officielles. Téléchargez et extrayez l'archive.

# Téléchargement via wget
wget https://github.com/microsoft/vscode/archive/1.46.0.zip
unzip 1.46.0.zip

# Ou via git avec une branche spécifique
git clone --depth 1 --branch 1.46.0 https://github.com/microsoft/vscode.git vscode-web

Installation des dépendances et compilation

Dans le répertoire du projet, exécutez la commande d'installation des dépendances. Cette étape peut prendre du temps en raison du téléchargement des modules Node.

cd vscode-web
yarn install

Ensuite, lancez la compilation en mode observateur pour préparer les fichiers Web.

# Lancer la compilation avec gulp
yarn watch

Lancement de l'IDE Web

Après la compilation, démarrez le serveur Web intégré. Vous pouvez spécifier l'hôte et le port via les arguments.

# Lancer le serveur Web sur le port par défaut
yarn web

# Ou avec des paramètres personnalisés
yarn web --host 0.0.0.0 --port 9090

Accédez à l'IDE via le navigateur à l'adresse indiquée. Assurez-vous que le pare-feu autorise le trafic sur le port utilisé.

# Ouvrir le port dans le pare-feu (exemple pour firewalld)
firewall-cmd --zone=public --add-port=9090/tcp --permanent
firewall-cmd --reload

Déploiement de VS Code Web avec code-server

Présentation de code-server

code-server est un projet open source qui permet d'exécuter VS Code sur un serveur distant, accessible via un navigateur. Il offre une expérience similaire à VS Code de bureau, avec support des extensions et terminal intégré.

Installation et configuration

Téléchargez la version standalone de code-server adaptée à votre système. Extrayez l'archive et configurez l'accès.

# Téléchargement et extraction
wget https://github.com/cdr/code-server/releases/download/3.5.0/code-server-3.5.0-linux-amd64.tar.gz
tar -xzf code-server-3.5.0-linux-amd64.tar.gz
cd code-server-3.5.0-linux-amd64

# Vérifier l'exécutable
./bin/code-server --version

Créez ou modifiez le fichier de configuration pour personnaliser l'adresse de liaison et l'authentification.

# Éditer le fichier de configuration
vim ~/.config/code-server/config.yaml

Exemple de contenu pour config.yaml :

bind-addr: 192.168.1.100:8888
auth: password
password: motdepasse_securise
cert: false

Lancez code-server. Le mot de passe sera affiché dans la console si non spécifié dans la configuration.

./bin/code-server

Accédez à l'IDE via le navigateur à l'adresse configurée et entrez le mot de passe pour vous connecter.

Déploiement via Docker

Utilisez l'image officielle de code-server pour déployer rapidement dans un conteneur Docker. Exposez le port et montez des volumes pour persister les données.

docker run -d \
  --name vscode-web \
  -p 8080:8080 \
  -v /chemin/vers/data:/home/coder \
  -v /chemin/vers/config:/root/.config \
  -e PASSWORD=monmotdepasse \
  codercom/code-server:latest

Vérifiez que le conteneur est en cours d'exécution avec Docker CLI. Accédez ensuite à l'IDE via le navigateur.

docker ps
docker logs vscode-web

Comparaison et fonctionnalités

L'IDE Web offre une expérience utilisateur proche de VS Code de bureau, avec quelques différences mineures. Par exemple, les contrôles de fenêtre sont absents, et les menus sont réorganisés pour une utilisation navigateur. En environnement conteneurisé, les outils de terminal reflètent l'exécution dans le conteneur.

Résolution des problèmes courants

Module manquant lors de la compilation : Si un module comme 'gulp-bom' est introuvable, installez-le manuellement avec Yarn.

yarn add gulp-bom

Bibliothèques partagées manquantes : Sur les systèmes CentOS, installez les paquets requis pour les dépendances natives.

yum install libXScrnSaver

Erreurs d'extension dans le navigateur : Certaines extensions peuvent ne pas fonctionner dans l'environnement Web en raison de restrictions de sécurité. Désactivez ou remplacez les extensions problématiques.

Accès non sécurisé : Si un avertissement d'authentification non sécurisé apparaît, configurez HTTPS dans code-server ou utilisez un proxy inverse.