Tutorial

Comment mettre en place la plateforme cloud IDE de code-server sur Ubuntu [18.04 Quickstart]

Published on April 24, 2020
Français
Comment mettre en place la plateforme cloud IDE de code-server sur Ubuntu [18.04 Quickstart]

Introduction

code-server est un code Microsoft Visual Studio fonctionnant sur un serveur distant et accessible directement depuis votre navigateur. Cela signifie que vous pouvez utiliser divers appareils, faire fonctionner différents systèmes d’exploitation et toujours disposer d’un environnement de développement cohérent.

Dans ce tutoriel, vous allez configurer la plateforme cloud IDE de code-server sur votre machine Ubuntu 18.04 et l’exposer à votre domaine, sécurisé avec Let’s Encrypt. Pour consulter une version plus détaillée de ce tutoriel, veuillez vous référer à Comment mettre en place la plateforme IDE de code-server en nuage sur Ubuntu 18.04.

Conditions préalables

  • Un serveur fonctionnant sous Ubuntu 18.04 avec au moins 2 Go de RAM, un accès root, et un compte sudo, non root. Vous pouvez le configurer en suivant le Guide de configuration initiale du serveur pour Ubuntu 18.04.

  • Nginx installé sur votre serveur. Pour obtenir un guide sur la façon de procéder, suivez les étapes 1 à 4 de Comment installer Nginx sous Ubuntu 18.04.

  • Un nom de domaine entièrement enregistré pour héberger code-server, pointé vers votre serveur. Ce tutoriel utilisera code-server.your-domain tout au long du cours. Vous pouvez acheter un nom de domaine sur Namecheap, en obtenir un gratuitement sur Freenom, ou utiliser le bureau d’enregistrement de domaine de votre choix.

  • Les deux enregistrements DNS suivants ont été configurés pour votre serveur. Vous pouvez suivre cette introduction à DigitalOcean DNS pour savoir comment les ajouter.

    • Un enregistrement A avec your-domain pointant à l’adresse IP publique de votre serveur.
    • Un enregistrement A avec your-domain pointant à l’adresse IP publique de votre serveur.

Étape 1 - Installez code-server

Créez le répertoire de stockage de toutes les données pour code-server :

  1. mkdir ~/code-server

Naviguez jusqu’à lui :

  1. cd ~/code-server

Visitez la page des versions Github de code-server et choisissez la dernière version de Linux. Téléchargez-le en utilisant :

  1. wget https://github.com/cdr/code-server/releases/download/2.1692-vsc1.39.2/code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

Déballez les archives :

  1. tar -xzvf code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

Naviguez jusqu’au répertoire contenant l’exécutable de code-server :

  1. cd code-server2.1692-vsc1.39.2-linux-x86_64

Pour accéder à l’exécutable de code-server sur votre système, copiez-le avec :

  1. sudo cp code-server /usr/local/bin

Créez un dossier pour code-server afin de stocker les données de l’utilisateur :

  1. sudo mkdir /var/lib/code-server

Créez un service systemd, code-server.service, dans le répertoire /lib/systemd/system :

  1. sudo nano /lib/systemd/system/code-server.service

Ajoutez les lignes suivantes :

/lib/systemd/system/code-server.service
[Unit]
Description=code-server
After=nginx.service

[Service]
Type=simple
Environment=PASSWORD=your_password
ExecStart=/usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password
Restart=always

[Install]
WantedBy=multi-user.target
  • --host 127.0.0.1 le lie à localhost.
  • --user-data-dir /var/lib/code-server définit son répertoire de données utilisateur.
  • --auth password précise qu’il doit authentifier les visiteurs avec un mot de passe.

N’oubliez pas de remplacer your_password par le mot de passe de votre choix.

Enregistrez et fermez le fichier.

Démarrez code-server :

  1. sudo systemctl start code-server

Vérifiez qu’il est correctement démarré :

  1. sudo systemctl status code-server

Vous verrez un résultat similaire à :

Output
● code-server.service - code-server Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled) Active: active (running) since Mon 2019-12-09 20:07:28 UTC; 4s ago Main PID: 5216 (code-server) Tasks: 23 (limit: 2362) CGroup: /system.slice/code-server.service ├─5216 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password └─5240 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password ...

Activez code-server pour qu’il démarre automatiquement après un redémarrage du serveur :

  1. sudo systemctl enable code-server

Étape 2 - Exposez code-server

Vous allez maintenant configurer Nginx comme proxy inverse pour code-server.

Créez code-server.conf pour stocker la configuration permettant d’exposer code-server à votre domaine :

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

Ajoutez les lignes suivantes pour configurer votre bloc serveur avec les directives nécessaires :

/etc/nginx/sites-available/code-server.conf
server {
	listen 80;
	listen [::]:80;

	server_name code-server.your_domain;

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

Remplacez code-server.your_domain par le domaine souhaité, puis enregistrez et fermez le fichier.

Pour rendre cette configuration du site active, créez un lien symbolique de celle-ci :

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

Testez la validité de la configuration :

  1. sudo nginx -t

Vous verrez la sortie suivante :

Output
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful

Pour que la configuration prenne effet, redémarrez Nginx :

  1. sudo systemctl restart nginx

Étape 3 - Sécurisez votre domaine

Vous allez maintenant sécuriser votre domaine à l’aide d’un certificat Let’s Encrypt TLS

Ajoutez le dépôt de paquets Certbot à votre serveur :

  1. sudo add-apt-repository ppa:certbot/certbot

Installez Certbot et son plugin Nginx :

  1. sudo apt install python-certbot-nginx

Configurez l’ufw pour qu’il accepte le trafic crypté :

  1. sudo ufw allow https

Le résultat sera :

Output
Rule added Rule added (v6)

Rechargez-le pour que la configuration prenne effet :

  1. sudo ufw reload

Le résultat sera :

Output
Firewall reloaded

Accédez à votre domaine de code-server.

invite de connexion à code-server

Entrez votre mot de passe de code-server. Vous verrez l’interface exposée sur votre domaine.

Interface graphique code-server

Pour la sécuriser, installez un certificat Let’s Encrypt TLS en utilisant Certbot.

Demandez un certificat pour votre domaine avec :

  1. sudo certbot --nginx -d code-server.your_domain

Fournissez une adresse électronique pour les avis urgents, acceptez les conditions de service du FEP et décidez si vous souhaitez rediriger tout le trafic HTTP vers HTTPS.

Le résultat sera similaire à celui-ci :

Output
IMPORTANT NOTES: - Congratulations! Your certificate and chain have been saved at: /etc/letsencrypt/live/code-server.your_domain/fullchain.pem Your key file has been saved at: /etc/letsencrypt/live/code-server.your_domain/privkey.pem Your cert will expire on ... To obtain a new or tweaked version of this certificate in the future, simply run certbot again with the "certonly" option. To non-interactively renew *all* of your certificates, run "certbot renew" ...

Certbot a généré avec succès des certificats TLS et les a appliqués à la configuration Nginx de votre domaine.

Conclusion

Vous disposez maintenant d’un code-server, d’un IDE cloud polyvalent, installé sur votre serveur Ubuntu 18.04, exposé à votre domaine et sécurisé à l’aide de certificats Let’s Encrypt. Pour plus d’informations, consultez la documentation sur le code de Visual Studio pour accéder à des fonctionnalités supplémentaires et à des instructions détaillées sur les autres composants de code-server.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Savic

author



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Become a contributor for community

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

DigitalOcean Documentation

Full documentation for every DigitalOcean product.

Resources for startups and SMBs

The Wave has everything you need to know about building a business, from raising funding to marketing your product.

Get our newsletter

Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

New accounts only. By submitting your email you agree to our Privacy Policy

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.