212 lines
7.0 KiB
Markdown
212 lines
7.0 KiB
Markdown
---
|
|
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.
|
|
---
|
|
|
|
|
|
: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.
|
|
|
|
|
|
|
|
## Installation
|
|
::note
|
|
|
|
Pour cette installation nous utiliserons [l'image maintenue par LinuxServer.io](https://docs.linuxserver.io/images/docker-code-server/).
|
|
::
|
|
|
|
Structure des dossiers
|
|
|
|
```text [Arborescence]
|
|
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 [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 vos dossier à monter dans vscode
|
|
# - /chemin/vers/dossier:/dossier
|
|
ports:
|
|
- 8443:8443
|
|
restart: unless-stopped
|
|
```
|
|
|
|
::tip{icon=""}
|
|
✨ Ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour
|
|
|
|
```yaml [compose.yaml]
|
|
services:
|
|
code-server:
|
|
#...
|
|
labels:
|
|
|
|
- com.centurylinklabs.watchtower.enable=true
|
|
```
|
|
::
|
|
|
|
Choisissez un mot de passe et générez un 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 :
|
|
|
|
```bash [Terminal]
|
|
id nomdutilisateur
|
|
```
|
|
|
|
Et renseignez le `.env` avec les infos que vous avez trouvées, par exemple :
|
|
|
|
```properties [.env]
|
|
PW='$argon2i$v=19$m=4096,t=3,p=1$wST5QhBgk2lu1ih4DMuxvg$LS1alrVdIWtvZHwnzCM1DUGg+5DTO3Dt1d5v9XtLws4'
|
|
PUID=1000
|
|
GUID=1000
|
|
```
|
|
|
|
::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 !
|
|
|
|
::caution
|
|
|
|
__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 [compose.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.
|
|
|
|
::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).
|
|
::
|
|
|
|
Dans Dockge, rendez-vous dans la stack de SWAG et éditez le compose en ajoutant le réseau de code-server :
|
|
|
|
```yaml [compose.yaml]
|
|
---
|
|
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
|
|
```
|
|
|
|
::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.
|
|
::
|
|
|
|
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`.
|
|
|
|
::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.
|
|
::
|
|
|
|
```bash [Terminal]
|
|
sudo nano /srv/docker/swag/config/nginx/proxy-confs/code.subdomain.conf
|
|
```
|
|
Collez la configuration ci-dessous :
|
|
|
|
```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;
|
|
|
|
}
|
|
}
|
|
```
|
|
|
|
Enregistrez avec :kbd{value="Ctrl+O"} puis :kbd{value="Entrée"}, puis quittez avec :kbd{value="Ctrl+X"}.
|
|
|
|
Et voilà, vous avez exposé code-server !
|
|
|
|
::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).
|
|
::
|