Djeex/docudjeex
1
1
Fork 0
Code Issues Pull Requests Projects Wiki Activity

Complete the French mirror of the remaining articles

Browse Source
This commit is contained in:
Djeex
2026-09-05 17:55:36 +02:00
parent 1894ac7ead
commit 2e041bcfb0
11 changed files with 1928 additions and 1249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/fr/3.serveex/8.development/1.code-server.md
+138 -43
View File
@@ -1,32 +1,39 @@
---
title: Code-Serveur
description: Installer code-server pour utiliser VS Code dans votre navigateur depuis votre homelab, montez des dossiers et exposez-le de manière sécurisée avec SWAG.
description: Installer code-server pour utiliser VS Code dans votre navigateur depuis votre homelab, monter des dossiers et l'exposer de manière sécurisée avec SWAG.
---
:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}
[code-server](https://github.com/linuxserver/docker-code-server) est un conteneur permettant d'accéder à [vscode](https://code.visualstudio.com/) en web-ui dans un environnement linux. C'est littéralement vscode et vos projets directement dans votre poche, disponibles partout.
[code-server](https://github.com/linuxserver/docker-code-server) est un conteneur permettant d'accéder à [VS Code](https://code.visualstudio.com/) en interface web dans un environnement Linux. C'est littéralement VS Code et vos projets dans votre poche, disponibles partout.
![code-server](https://github.com/coder/code-server/raw/main/docs/assets/screenshot-2.png)
## Installation
::note
::note{to="https://docs.linuxserver.io/images/docker-code-server/"}
Pour cette installation nous utiliserons [l'image maintenue par LinuxServer.io](https://docs.linuxserver.io/images/docker-code-server/).
Pour cette installation, nous utiliserons l'**image maintenue par LinuxServer.io**.
::
Structure des dossiers
::file-tree
---
tree:
/:
- srv:
- docker:
- code-server:
- compose.yaml
- .env
- config/
- (n'importe quel dossier à monter dans VS Code)/
---
::
```text [Arborescence]
root
├── docker
│ └── code-server
│ └── config
└── #n'importe quel dossier à monter dans vscode
```
::steps{level="3"}
### Déployer la stack
Ouvrez Dockge, cliquez sur `compose`, appelez la stack `code-server` puis copiez collez ceci :
Ouvrez Dockge, cliquez sur `compose`, nommez la stack `code-server`, et collez ce qui suit :
```yaml [compose.yaml]
---
@@ -41,7 +48,7 @@ services:
- HASHED_PASSWORD=${PW}
volumes:
- /srv/docker/code-server/config:/config
# ajoutez vos dossier à monter dans vscode
# ajoutez les dossiers à monter dans VS Code
# - /chemin/vers/dossier:/dossier
ports:
- 8443:8443
@@ -49,7 +56,7 @@ services:
```
::tip{icon=""}
✨ Ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
✨ Ajoutez le label Watchtower à chaque conteneur pour automatiser les mises à jour
```yaml [compose.yaml]
services:
@@ -61,19 +68,21 @@ services:
```
::
Choisissez un mot de passe et générez un hash
### Renseigner vos variables d'environnement
Choisissez un mot de passe et générez son hash :
```bash [Terminal]
echo -n "votremotdepasse" | npx argon2-cli -e
```
Notez précieusement le résultat. Trouvez votre PUID et votre GUID en tapant la commande suivante :
Conservez précieusement le résultat. Trouvez vos PUID et GUID avec :
```bash [Terminal]
id nomdutilisateur
id votreutilisateur
```
Et renseignez le `.env` avec les infos que vous avez trouvées, par exemple :
Remplissez le fichier `.env` avec les valeurs trouvées, par exemple :
```properties [.env]
PW='$argon2i$v=19$m=4096,t=3,p=1$wST5QhBgk2lu1ih4DMuxvg$LS1alrVdIWtvZHwnzCM1DUGg+5DTO3Dt1d5v9XtLws4'
@@ -83,18 +92,21 @@ GUID=1000
::warning
__Attention :__ Pensez à mettre un guillemet simple `'`au debut et à la fin du hash
__Note :__ veillez à bien encadrer le hash par des apostrophes simples `'`
::
Déployez le conteneur et rendez-vous sur `http://ipduserveur:8443`. Et voilà, votre instance code-server en webui est disponible !
Déployez le conteneur et allez sur `http://ipdevotreserveur:8443`. Et voilà, votre instance code-server tourne dans le navigateur !
### Terminé !
::
::caution
__En cas d'échec :__ vérifiez les règles de votre pare-feu.
__Si ça ne marche pas :__ vérifiez les règles de votre pare-feu.
::
## Monter des dossiers
Vous pouvez monter les dossiers à partager dans vscode en ajoutant les volumes concernés dans le compose.yaml (ou via dockge), et en redéployant le conteneur.
Vous pouvez monter des dossiers dans VS Code en ajoutant les volumes correspondants dans le `compose.yaml` (ou via Dockge), puis en redéployant le conteneur.
```yaml [compose.yaml]
---
@@ -104,17 +116,20 @@ services:
volumes:
- /chemin/vers/dossier:/dossier
```
Une fois dans vscode, vous pourrez accéder au dossier.
Une fois dans VS Code, vous aurez accès au dossier monté.
## Exposer code-server avec Swag
Tout l'intérêt d'une telle solution, c'est de pouvoir y accéder à distance et sur tout vos appareils. Pour cela, nous allons exposer coder-server via Swag.
Tout l'intérêt d'une telle solution est d'y accéder à distance depuis n'importe quel appareil. Pour cela, nous allons exposer code-server via Swag.
::note
__Au préalable :__ Nous partons du principe que vous avez créé dans votre [zone DNS](/general/networking/dns) un sous domaine du type `code.mondomaine.fr` avec pour `CNAME` `mondomaine.fr` et [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/security/cloudflare), que que vous avez déjà redirigé le port `443` de votre box vers le `443` de votre serveur dans [les règles NAT](/general/networking/nat).
__Au préalable :__ nous partons du principe que vous avez créé un sous-domaine du type `code.mondomaine.fr` avec un `CNAME` pointant vers `mondomaine.fr` dans votre [zone DNS](/general/networking/dns). À moins d'utiliser [Cloudflare Zero Trust](/serveex/security/cloudflare), nous partons aussi du principe que vous avez redirigé le port `443` de votre box vers le port `443` de votre serveur avec les [règles NAT](/general/networking/nat).
::
Dans Dockge, rendez-vous dans la stack de SWAG et éditez le compose en ajoutant le réseau de code-server :
::steps{level="3"}
### Ajouter le réseau de code-server à SWAG
Dans Dockge, allez sur la stack SWAG et modifiez le fichier compose pour y ajouter le réseau de code-server :
```yaml [compose.yaml]
---
@@ -122,34 +137,37 @@ services:
swag:
container_name: # ...
# ...
networks: # Relie le conteneur au réseau custom
networks: # Rattache le conteneur à un réseau personnalisé
# ...
- code-server # Nom du réseau déclaré dans la stack
networks: # Définit le réseau custom
- code-server # Nom du réseau défini dans la stack
networks: # Définit le réseau personnalisé
# ...
code-server: # Nom du réseau déclaré dans la stack
name: code-serveur # Nom véritable du réseau externe
external: true # Précise que c'est un réseau à rechercher en externe
code-server: # Nom du réseau défini dans la stack
name: code-serveur # Nom réel du réseau externe
external: true # Indique qu'il s'agit d'un réseau externe
```
::note
Ici nous partons du principe que le nom du réseau de code-server est `code-server_default`. Vous pouvez vérifier que la connexion est opérationnelle en visitant le dashboard de SWAG en tapant http://ipduserveur:81.
Nous partons du principe que le nom du réseau est `code-server_default`. Vous pouvez vérifier que la connexion fonctionne en visitant le tableau de bord de SWAG sur http://ipdevotreserveur:81.
::
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
Redéployez la stack en cliquant sur « deploy » et attendez que SWAG soit pleinement opérationnel.
Dans les dossiers de Swag, créez le fichier `code.subdomain.conf`.
### Créer le fichier subdomain.conf
Dans les dossiers de configuration de Swag, créez le fichier `code.subdomain.conf`.
::tip{icon="" to="/serveex/files/file-browser-quantum"}
✨ __Astuce :__ vous pouvez utiliser **File Browser Quantum** pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.
✨ __Astuce :__ vous pouvez utiliser **File Browser Quantum** pour naviguer et modifier vos fichiers plutôt que des commandes dans le terminal.
::
```bash [Terminal]
sudo nano /srv/docker/swag/config/nginx/proxy-confs/code.subdomain.conf
```
Collez la configuration ci-dessous :
Collez la configuration suivante :
```nginx [code.subdomain.conf]
## Version 2023/12/19
@@ -197,15 +215,92 @@ server {
set $upstream_port 8443;
set $upstream_proto http;
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
}
}
```
Enregistrez avec :kbd{value="Ctrl+O"} puis :kbd{value="Entrée"}, puis quittez avec :kbd{value="Ctrl+X"}.
Appuyez sur :kbd{value="Ctrl+O"}, puis :kbd{value="Enter"} pour enregistrer, et :kbd{value="Ctrl+X"} pour quitter.
Et voilà, vous avez exposé code-server !
### Terminé !
::
Et voilà ! code-server est maintenant exposé !
## Protéger code-server avec TinyAuth
Ajoutez la vérification forward-auth de [TinyAuth](/serveex/security/tinyauth) directement dans `code.subdomain.conf`, de la même façon que dans [le tutoriel TinyAuth](/serveex/security/tinyauth#protecting-an-app-via-reverse-proxy) :
```nginx [code.subdomain.conf]{26-38,41-42}
## Version 2023/12/19
server {
listen 443 ssl;
listen [::]:443 ssl;
server_name code.*;
include /config/nginx/ssl.conf;
client_max_body_size 0;
#if ($lan-ip = yes) { set $geo-whitelist yes; }
#if ($geo-whitelist = no) { return 404; }
if ($geo-blacklist = no) { return 404; }
# enable for ldap auth (requires ldap-location.conf in the location block)
#include /config/nginx/ldap-server.conf;
# enable for Authelia (requires authelia-location.conf in the location block)
#include /config/nginx/authelia-server.conf;
# enable for Authentik (requires authentik-location.conf in the location block)
#include /config/nginx/authentik-server.conf;
location /tinyauth {
internal;
proxy_pass http://tinyauth:3000/api/auth/nginx;
proxy_pass_request_body off;
proxy_set_header Content-Length "";
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $http_host;
proxy_set_header X-Forwarded-Uri $request_uri;
}
location @tinyauth_login {
return 302 https://tinyauth.mondomaine.fr/login?redirect_uri=$scheme://$http_host$request_uri;
}
location / {
auth_request /tinyauth;
error_page 401 = @tinyauth_login;
# enable the next two lines for http auth
#auth_basic "Restricted";
#auth_basic_user_file /config/nginx/.htpasswd;
# enable for ldap auth (requires ldap-server.conf in the server block)
#include /config/nginx/ldap-location.conf;
# enable for Authelia (requires authelia-server.conf in the server block)
#include /config/nginx/authelia-location.conf;
# enable for Authentik (requires authentik-server.conf in the server block)
#include /config/nginx/authentik-location.conf;
include /config/nginx/proxy.conf;
include /config/nginx/resolver.conf;
set $upstream_app code-server;
set $upstream_port 8443;
set $upstream_proto http;
proxy_pass $upstream_proto://$upstream_app:$upstream_port;
}
}
```
::note{to="/serveex/security/tinyauth#exposing-tinyauth-with-swag"}
Le bloc `location /tinyauth` s'exécute dans le conteneur de SWAG lui-même, SWAG doit donc être sur le réseau Docker de TinyAuth pour le joindre par son nom (`tinyauth` ici). Cela devrait déjà être en place depuis **l'exposition de TinyAuth**. Si vous rencontrez une erreur, revérifiez que le fichier compose de SWAG a toujours ce réseau rattaché.
::
::tip{icon=""}
✨ __Astuce :__ Vous pouvez protéger cette app avec Authentik en ouvrant `code.subodmain.conf` et en retirant les `#` devant `include /config/nginx/authentik-server.conf;`{lang=nginx} et `include /config/nginx/authentik-location.conf;`{lang=nginx}.N'oubliez pas de [créer une application et un fournisseur dans Authentik](/serveex/advanced/authentik#protéger-une-app-par-reverse-proxy).
✨ __Astuce :__ vous pouvez protéger cette application avec [Authentik](/serveex/advanced/authentik) plutôt que TinyAuth, en ouvrant `code.subdomain.conf` et en décommentant `include /config/nginx/authentik-server.conf;`{lang=nginx} et `include /config/nginx/authentik-location.conf;`{lang=nginx}. N'oubliez pas de [créer une application et un provider dans Authentik](/serveex/advanced/authentik#protecting-an-app-via-reverse-proxy).
::