Comment installer Visual Studio Code – Server IDE sur Ubuntu 20.04 LTS

Code-server est un code Visual Studio (VS) qui peut être exécuté à distance sur le serveur et accessible via un navigateur Web. Il te permet de créer et d’avoir un environnement de développement cohérent auquel tu peux accéder à tout moment et partout.

Dans ce tutoriel, nous allons te montrer comment installer le Code-server avec Nginx comme proxy inverse et SSL Letsencrypt sur le dernier serveur Ubuntu 20.04.

Conditions préalables

Pour ce guide, nous installerons le Visual Code Server sur le serveur Ubuntu 20.04 avec 4 Go de RAM, 25 Go d’espace disque libre et 2CPU.

Ce que nous allons faire :

  • Télécharger et installer les paquets de Visual Code Server
  • Configurer l’authentification pour Visual Code Server
  • Générer SSL Letsnecrypt
  • Installer et configurer Nginx en tant que Reverse Proxy
  • Tester

Étape 1 – Télécharger et installer les paquets de Visual Code Server

Tout d’abord, nous allons télécharger la dernière version de Visual Code Server pour le FocalFossa Ubuntu et l’installer dans notre système.

Par défaut, les paquets du serveur de code sont disponibles pour plusieurs systèmes d’exploitation. Tu peux consulter la page de publication du serveur de code sur GitHub en utilisant le lien suivant.

https://github.com/cdr/code-server/releases

Télécharge maintenant les paquets Visual Code Server pour Ubuntu à l’aide de la commande wget ci-dessous.

wget -q https://github.com/cdr/code-server/releases/download/3.4.1/code-server_3.4.1_amd64.deb

Ensuite, installe le paquet Visual Code Server à l’aide de la commande dpkg ci-dessous.

sudo dpkg -i code-server_3.4.1_amd64.deb

Une fois l’installation terminée, démarre le service du serveur de code et ajoute-le au démarrage du système.

systemctl --user start code-server
systemctl --user enable code-server

Télécharge et installe Visual Code Studio Server

Le Visual Code Server est en marche, vérifie-le à l’aide de la commande suivante.

ss -plnt
systemctl --user status code-server

Voici le résultat que tu obtiendras.

Vérification de l'état et du port du service pour Visual Code Studio Server

Comme tu peux le voir, le Visual Code Server fonctionne par défaut sur l’adresse IP locale ‘127.0.0.1’ avec le port TCP ‘8080’.

Étape 2 – Configurer l’authentification pour Visual Code Server

Par défaut, le serveur de code visuel fonctionne avec l’authentification activée sur lui.

L’authentification par mot de passe du serveur de code visuel est générée par défaut dans le fichier ‘~/.config/code-server/config.yaml’.

Vérifie la configuration du serveur de code visuel à l’aide de la commande suivante.

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

Tu obtiendras quelque chose comme cette configuration.

bind-addr: 127.0.0.1:8080
auth: password
password: 58403006a03529a2d26c08af
cert: false

Détails des configurations :

  • L’option ‘bind-addr’ est utilisée pour définir sur quelle adresse IP et quel port le serveur de code fonctionnera.
  • L’option ‘auth’ est la méthode d’authentification pour Visual Code Server, et par défaut, c’est la méthode d’authentification ‘password’ qui est utilisée.
  • Les options ‘password’ sont utilisées pour définir ton mot de passe pour l’accès à Visual Code Server, et assure-toi d’utiliser un mot de passe fort.

Pour modifier l’adresse de liaison, le port et le mot de passe de Visual Code Server, modifie la configuration par défaut ‘~/.config/code-server/config.yaml’ selon tes besoins.

Configuration par défaut Visual Code Server

Étape 3 – Générer le SSL Letsencrypt

Dans cette étape, nous allons générer le SSL letsencrypt à l’aide de l’outil certbot pour sécuriser le code-server.

Installe l’outil certbot à l’aide de la commande apt ci-dessous.

sudo apt install certbot -y

Une fois l’installation terminée, génère le SSL letsencrypt à l’aide de la commande certbot ci-dessous.

certbot certonly --standalone --agree-tos -m [email protected] -d vscode.hakase-labs.io

Une fois l’installation terminée, tes certificats seront situés dans le répertoire ‘/etc/letsencrypt/live/vscode.hakase-labs.io/’.

ls -lah /etc/letsencrypt/live/vscode.hakase-labs.io/

Tu as maintenant généré le SSL Letsencrypt pour sécuriser l’installation du serveur de code à l’aide de l’outil certbot.

Étape 4 – Configurer Nginx comme proxy inverse

Dans cette étape, nous allons installer le serveur Web Nginx et le configurer comme un proxy inverse pour le code-server avec SSL activé par-dessus.

Installe le paquet Nginx à l’aide de la commande apt ci-dessous.

sudo apt install nginx -y

Une fois l’installation terminée, va dans le répertoire ‘/etc/nginx/sites-available’ et crée une nouvelle configuration d’hôte virtuel ‘code-server’.

cd /etc/nginx/sites-available/
vim code-server

Change maintenant le nom de domaine et le chemin d’accès au SSL avec les tiens et colle la configuration dedans.

server {
listen 80;
server_name vscode.hakase-labs.io;
# enforce https
return 301 https://$server_name:443$request_uri;
}

server {
listen 443 ssl http2;
server_name vscode.hakase-labs.io;

ssl_certificate /etc/letsencrypt/live/vscode.hakase-labs.io/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/vscode.hakase-labs.io/privkey.pem;

location / {
proxy_pass http://127.0.0.1:8080/;
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Accept-Encoding gzip;
}
}

Sauvegarde et ferme.

Active maintenant l’hôte virtuel ‘code-server’, teste la configuration de nginx et vérifie qu’il n’y a pas d’erreur.

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

Configurer Nginx comme proxy inverse pour Visual Code Server

Ensuite, redémarre le service nginx et ajoute-le au démarrage du système.

systemctl restart nginx
systemctl enable nginx

Maintenant, le service nginx est opérationnel en tant que proxy inverse pour le code-server. Vérifie-le à l’aide de la commande ci-dessous.

netstat -plntu
systemctl status nginx

Et tu obtiendras le résultat suivant.

Configurer Nginx comme proxy inverse pour Visual Code Server

Le service Nginx est opérationnel sur le serveur Ubuntu 20.04 et les ports HTTP et HTTPS sont activés.

Étape 5 – Test

Ouvre ton navigateur Web et tape l’URL de ton installation code-server.

https://vscode.hakase-labs.io/

Connecte-toi avec le mot de passe que tu as configuré dans le fichier de service de code-server.

Page de connexion de Visual Code Server

Une fois que le mot de passe est correct, tu obtiendras l’éditeur VS Code sur ton navigateur Web comme ci-dessous.

Visual Code Server dans Ubuntu 20.04

Tu as donc installé le code-server sur le serveur Ubuntu 20.04 avec Nginx comme proxy inverse et en sécurisant l’installation du code-server avec SSL Letsencrypt.

Référence

Vous aimerez aussi...