Comment installer Visual Studio Code Cloud IDE sur le serveur Ubuntu 24.04

Le Visual Studio Code Cloud IDE est une version en ligne de l’éditeur Visual Studio Code (VS Code) populaire de Microsoft, conçu pour fournir un environnement de développement flexible et accessible dans le cloud. Il permet aux développeurs de coder directement depuis leurs navigateurs web sans avoir besoin d’installer quoi que ce soit sur leurs machines locales. Cet IDE basé sur le cloud s’intègre parfaitement avec GitHub et d’autres services cloud, permettant une collaboration en temps réel, un accès facile aux projets depuis n’importe quel appareil et la possibilité de travailler dans des environnements distribués. Avec des fonctionnalités telles que la coloration syntaxique, le débogage et les extensions, le Visual Studio Code Cloud IDE offre une expérience de développement complète, en faisant une solution pratique pour les développeurs qui ont besoin d’un environnement de codage puissant et portable accessible de pratiquement n’importe où.

Ce guide vous montrera comment installer Visual Code-Server sur le serveur Ubuntu 24.04 avec Nginx comme proxy inverse.

Prérequis

Avant de commencer, assurez-vous d’avoir les éléments suivants :

• Un serveur Ubuntu 24.05.
• Un utilisateur non-root avec des privilèges d’administrateur.
• Un nom de domaine pointant vers une adresse IP de serveur.

Installation de code-server avec le script d’installation

Pour installer le code-server, vous pouvez télécharger et exécuter le script d’installation de code-server. Dans cet exemple, vous allez installer un code-server en tant qu’utilisateur non-root. Assurez-vous donc d’être connecté à votre utilisateur.

Tout d’abord, exécutez la commande ci-dessous pour vous assurer que le code-server peut être installé sur votre système.

curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run

Lorsque le code-server est installé sur votre système, vous verrez la sortie suivante :

Maintenant, installez le code-server avec la commande ci-dessous. Entrez votre mot de passe sudo/administrateur lorsque cela est demandé.

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

Après l’installation, démarrez et activez le code-server avec la commande ‘ systemctl ‘ suivante.

sudo systemctl enable --now code-server@$USER

Enfin, vérifiez le service code-server avec la commande suivante pour vous assurer que le service fonctionne.

sudo systemctl status code-server@$USER

Dans cette sortie, vous pouvez voir que le code-server fonctionne, qui s’exécute sur le port par défaut 8080.

Configuration du mot de passe code-server

Après avoir installé le code-server, vous allez configurer l’authentification par mot de passe pour sécuriser l’environnement code-server.

Ouvrez le fichier de configuration par défaut du code-server ~/.config/code-server/config.yaml avec l’éditeur ‘ nano ‘.

nano ~/.config/code-server/config.yaml

Changez le mot de passe par défaut avec votre mot de passe sécurisé.

bind-addr: 127.0.0.1:8080  
auth: password  
password: 0e0cb3af923c659366334664  
cert: false

Enregistrez le fichier et quittez l’éditeur.

Maintenant, exécutez la commande ci-dessous pour redémarrer le code-server et appliquer vos modifications.

sudo systemctl restart code-server@$USER

Configuration de Nginx comme proxy inverse

Maintenant que vous avez sécurisé le code-server, vous allez installer Nginx et le configurer comme un proxy inverse. Assurez-vous donc que votre nom de domaine pointe vers une adresse IP de serveur.

Installez le serveur web Nginx avec la commande ‘ apt ‘ suivante. Entrez ‘ Y ‘ pour confirmer l’installation.

sudo apt install nginx -y

Après l’installation, créez une nouvelle configuration de bloc serveur ‘ /etc/nginx/sites-available/code-server.conf ‘ avec l’éditeur ‘ nano ‘.

sudo nano /etc/nginx/sites-available/code-server.conf

Insérez la configuration suivante dans le fichier et assurez-vous de changer le nom de domaine ‘ code.howtoforge.local ‘.

server {  
listen 80;  
listen [::]:80;  
server_name code.howtoforge.local;  
  
location / {  
proxy_pass http://localhost:8080/;  
proxy_set_header Host $http_host;  
proxy_set_header Upgrade $http_upgrade;  
proxy_set_header Connection upgrade;  
proxy_set_header Accept-Encoding gzip;  
}  
}

Lorsque vous avez terminé, enregistrez le fichier et quittez l’éditeur.

Ensuite, exécutez la commande suivante pour activer le bloc serveur ‘ code-server.conf ‘ et vérifier votre configuration Nginx.

sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/  
sudo nginx -t

Si vous avez raison et que votre configuration Nginx est correcte, vous verrez une sortie ‘ syntax is ok - test is successful’.

Maintenant, exécutez la commande ci-dessous pour redémarrer le serveur web Nginx et appliquer les modifications. Ensuite, vérifiez le statut de Nginx pour vous assurer que le serveur web fonctionne.

sudo systemctl restart nginx  
sudo systemctl status nginx

Dans la sortie suivante, vous pouvez voir que le serveur web Nginx fonctionne comme un proxy inverse pour l’application code-server.

Configuration de UFW (Pare-feu simplifié)

Pour permettre l’accès au code-server, vous devez ouvrir les ports HTTP et HTTPS via UFW (Pare-feu simplifié).

Exécutez la commande ci-dessous pour activer le profil ‘ Nginx Full ‘ et autoriser le trafic HTTP et HTTPS vers votre installation Nginx. Une fois ajouté, vous verrez une sortie ‘Règle ajoutée’.

sudo ufw allow 'Nginx Full'

Maintenant, exécutez la commande suivante pour vérifier le statut de UFW. Assurez-vous que le profil ‘Nginx Full’ est activé pour permettre l’accès de n’importe où.

sudo ufw status

Sécurisation de code-server avec HTTPS

Dans cette section, vous allez sécuriser le code-server avec HTTPS en générant des certificats SSL/TLS via certbot et letsencrypt.

Installez les paquets ‘certbot’ et ‘python3-certbot-nginx’ avec la commande ‘apt’ suivante.

sudo apt install certbot python3-certbot-nginx

Après l’installation, exécutez la commande ‘certbot’ ci-dessous pour générer des certificats SSL/TLS et sécuriser votre installation de code-server. Assurez-vous de changer le nom de domaine et l’adresse e-mail avec vos informations.

sudo certbot --nginx --agree-tos --redirect --hsts --staple-ocsp --email [email protected] -d code.howtoforge.local

Lorsque le processus est terminé, votre installation de code-server sera automatiquement sécurisée avec HTTPS. Et vos certificats SSL/TLS seront disponibles dans le répertoire ‘/etc/letsencrypt/live/code.howtoforge.local’.

Accéder à code-server

Ouvrez votre navigateur web et visitez https://code.howtoforge.local. Si votre installation est réussie, vous serez invité à une authentification par mot de passe.

Entrez votre mot de passe et cliquez sur SOUMETTRE pour confirmer.

Si vous avez le bon mot de passe, vous verrez l’écran code-server suivant. Sélectionnez votre thème par défaut, clair ou sombre.

Maintenant, vous obtiendrez le code-server en direct suivant sur votre navigateur web.

Conclusion

Félicitations ! Vous avez terminé l’installation du serveur VS code sur le serveur Ubuntu 24.04. Vous avez installé et sécurisé un serveur de code avec authentification par mot de passe et HTTPS et configuré Nginx comme proxy inverse pour votre installation de serveur de code.