--- 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. ![code-server](https://github.com/coder/code-server/raw/main/docs/assets/screenshot-2.png) ## 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). ::