7.0 KiB
navigation, title, main
| navigation | title | main | ||
|---|---|---|---|---|
| true | Code-Serveur |
|
: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 est un conteneur permettant d'accéder à vscode en web-ui dans un environnement linux. C'est littéralement vscode et vos projets directement dans votre poche, disponibles partout.
Installation
::alert{type="info"} :::list{type="info"}
- Pour cette installation nous utiliserons l'image maintenue par LinuxServer.io. ::: ::
Structure des dossiers
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 :
---
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
echo -n "votremotdepasse" | npx argon2-cli -e
Notez précieusement le résultat. Trouvez votre PUID et votre GUID en tapant la commande suivante :
id nomdutilisateur
Et renseignez le .env avec les infos que vous avez trouvées, par exemple :
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.
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 un sous domaine du type
code.mondomaine.fravec pourCNAMEmondomaine.fret à moins que vous utilisiez Cloudflare Zero Trust, que que vous avez déjà redirigé le port443de votre box vers le443de votre serveur dans les règles NAT. ::: ::
Dans Dockge, rendez-vous dans la stack de SWAG et éditez le compose en ajoutant le réseau de code-server :
services:
swag:
container_name: # ...
# ...
networks: # Relie le conteneur au réseau custom
# ...
- 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é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
::alert{type="info"} :::list{type="info"}
- 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. ::: ::
Relancez la stack en cliquant sur "déployer" et patientez le temps que SWAG soit complètement opérationnel.
Dans les dossiers de Swag, créez le fichier code.subdomain.conf.
::alert{type="success"} ✨ Astuce : vous pouvez utiliser File Browser pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal. ::
sudo vi /docker/swag/config/nginx/proxy-confs/code.subdomain.conf
Entrez en modification avec la touche i et collez la configuration ci-dessous :
## 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 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.
::