--- navigation: true title: Code-Serveur main: fluid: false --- :ellipsis{left=0px width=40rem top=10rem blur=140px} # Code-Server ::alert{type="info"} 🎯 __Objectifs :__ - Installer code-server - Monter des dossiers dans vscode - Exposer code-server avec Swag :: [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/coder/code-server/raw/main/docs/assets/screenshot-2.png) ## Installation --- ::alert{type="info"} :::list{type="info"} - Pour cette installation nous utiliserons [l'image maintenue par LinuxServer.io](https://docs.linuxserver.io/images/docker-code-server/). ::: :: Structure des dossiers ```console root ├── docker │ └── code-server │ └── config └── #n'importe quel dossier à monter dans vscode ``` Ouvrez Dockge, cliquez sur `compose`, appelez la stack `code-server` puis copiez collez ceci : ```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: - /docker/code-server/config:/config # ajoutez vos dossier à monter dans vscode # - /chemin/vers/dossier:/dossier ports: - 8443:8443 restart: unless-stopped ``` ::alert{type="success"} ✨ Ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour ```yaml services: code-server: #... labels: - com.centurylinklabs.watchtower.enable=true :: Choisissez un mot de passe et générez un hash ```shell echo -n "votremotdepasse" | npx argon2-cli -e ``` Notez précieusement le résultat. Trouvez votre PUID et votre GUID en tapant la commande suivante : ```shell id nomdutilisateur ``` Et renseignez le `.env` avec les infos que vous avez trouvées, par exemple : ```properties PW='$argon2i$v=19$m=4096,t=3,p=1$wST5QhBgk2lu1ih4DMuxvg$LS1alrVdIWtvZHwnzCM1DUGg+5DTO3Dt1d5v9XtLws4' PUID=1000 GUID=1000 ``` ::alert{type="warning"} :::list{type="warning"} - __Attention :__ Pensez à mettre un guillemet simple `'`au debut et à la fin du hash ::: :: Déployez le conteneur et rendez-vous sur `http://ipduserveur:8443`. Et voilà, votre instance code-server en webui est disponible ! ::alert{type="danger"} :::list{type="danger"} - __En cas d'échec :__ 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. ```yaml services: code-server: #... volumes: - /chemin/vers/dossier:/dossier ``` Une fois dans vscode, vous pourrez accéder au dossier. ## 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. ::alert{type="info"} :::list{type="info"} - __Au préalable :__ Nous partons du principe que vous avez créé dans votre [zone DNS](/generalites/dns) un sous domaine du type `code.mondomaine.fr` avec pour `CNAME` `mondomaine.fr` et [à moins que vous utilisiez Cloudflare Zero Trust](/serveex/securite/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](/generalites/nat). ::: :: Dans Dockge ouvrez la stack `code-server` et ajoutez le réseau de Swag. Pour rappel ```yaml services: nomduservice: container_name: #... # ... networks: # Relie le conteneur au réseau custom. A faire pour chaque conteneur à exposer de la stack - swag # Nom du réseau déclaré dans la stack networks: # Défini le réseau custom swag: # Nom du réseau déclaré dans la stack name: swag_default # Nom véritable du réseau externe external: true # Précise que c'est un réseau à rechercher en externe ``` ::alert{type="info"} :::list{type="info"} - Ici nous partons du principe que le nom du réseau de Swag est `swag_default`. ::: :: Dans les dossiers de Swag, créez le fichier `code.subdomain.conf`. ::alert{type="success"} ✨ __Astuce :__ vous pouvez utiliser [File Browser](/serveex/apps/file-browser) pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal. :: ```shell sudo vi /docker/swag/config/nginx/proxy-confs/code.subdomain.conf ``` Entrez en modification avec la touche `i` et collez la configuration ci-dessous : ```nginx ## Version 2023/12/19 server { listen 443 ssl http2; listen [::]:443 ssl http2; 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 `Echap` puis sauvegardez et quittez en tapant `:x` puis en appuyant sur `Entrée`. Et voilà, vous avez exposé code-server ! ::alert{type="success"} ✨ __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/securite/authentik#protéger-une-app-par-reverse-proxy). ::