307 lines
10 KiB
Markdown
307 lines
10 KiB
Markdown
---
|
|
title: Code-Serveur
|
|
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 à [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.
|
|
|
|
|
|
|
|
## Installation
|
|
::note{to="https://docs.linuxserver.io/images/docker-code-server/"}
|
|
|
|
Pour cette installation, nous utiliserons l'**image maintenue par LinuxServer.io**.
|
|
::
|
|
|
|
::file-tree
|
|
---
|
|
tree:
|
|
/:
|
|
- srv:
|
|
- docker:
|
|
- code-server:
|
|
- compose.yaml
|
|
- .env
|
|
- config/
|
|
- (n'importe quel dossier à monter dans VS Code)/
|
|
---
|
|
::
|
|
|
|
::steps{level="3"}
|
|
### Déployer la stack
|
|
|
|
Ouvrez Dockge, cliquez sur `compose`, nommez la stack `code-server`, et collez ce qui suit :
|
|
|
|
```yaml [compose.yaml]
|
|
---
|
|
services:
|
|
code-server:
|
|
image: lscr.io/linuxserver/code-server:latest
|
|
container_name: code-server
|
|
environment:
|
|
- PUID=${PUID}
|
|
- PGID=${GUID}
|
|
- TZ=Etc/UTC
|
|
- HASHED_PASSWORD=${PW}
|
|
volumes:
|
|
- /srv/docker/code-server/config:/config
|
|
# ajoutez les dossiers à monter dans VS Code
|
|
# - /chemin/vers/dossier:/dossier
|
|
ports:
|
|
- 8443:8443
|
|
restart: unless-stopped
|
|
```
|
|
|
|
::tip{icon=""}
|
|
✨ Ajoutez le label Watchtower à chaque conteneur pour automatiser les mises à jour
|
|
|
|
```yaml [compose.yaml]
|
|
services:
|
|
code-server:
|
|
#...
|
|
labels:
|
|
|
|
- com.centurylinklabs.watchtower.enable=true
|
|
```
|
|
::
|
|
|
|
### 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
|
|
```
|
|
|
|
Conservez précieusement le résultat. Trouvez vos PUID et GUID avec :
|
|
|
|
```bash [Terminal]
|
|
id votreutilisateur
|
|
```
|
|
|
|
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'
|
|
PUID=1000
|
|
GUID=1000
|
|
```
|
|
|
|
::warning
|
|
|
|
__Note :__ veillez à bien encadrer le hash par des apostrophes simples `'`
|
|
::
|
|
|
|
Déployez le conteneur et allez sur `http://ipdevotreserveur:8443`. Et voilà, votre instance code-server tourne dans le navigateur !
|
|
|
|
### Terminé !
|
|
::
|
|
|
|
::caution
|
|
|
|
__Si ça ne marche pas :__ vérifiez les règles de votre pare-feu.
|
|
::
|
|
|
|
## Monter des dossiers
|
|
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]
|
|
---
|
|
services:
|
|
code-server:
|
|
#...
|
|
volumes:
|
|
- /chemin/vers/dossier:/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 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éé 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).
|
|
::
|
|
|
|
::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]
|
|
---
|
|
services:
|
|
swag:
|
|
container_name: # ...
|
|
# ...
|
|
networks: # Rattache le conteneur à un réseau personnalisé
|
|
# ...
|
|
- 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é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
|
|
|
|
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.
|
|
::
|
|
|
|
Redéployez la stack en cliquant sur « deploy » et attendez que SWAG soit pleinement opérationnel.
|
|
|
|
### 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 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 suivante :
|
|
|
|
```nginx [code.subdomain.conf]
|
|
## 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 / {
|
|
# 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;
|
|
}
|
|
}
|
|
```
|
|
|
|
Appuyez sur :kbd{value="Ctrl+O"}, puis :kbd{value="Enter"} pour enregistrer, et :kbd{value="Ctrl+X"} pour quitter.
|
|
|
|
### 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 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).
|
|
::
|