Aller au contenu

Code-Server

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.

code-server

Installation

Info

Pour cette installation nous utiliserons l'image maintenue par LinuxServer.io.

Structure des dossiers

1
2
3
4
5
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 :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
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

Astuce

Ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour 

1
2
3
4
5
services:
  code-server:
    #...
    labels:
      - com.centurylinklabs.watchtower.enable=true

Choisissez un mot de passe et générez un hash

1
$ echo -n "votremotdepasse" | npx argon2-cli -e

Notez précieusement le résultat. Trouvez votre PUID et votre GUID en tapant la commande suivante :

1
$ id nomdutilisateur

Et renseignez le .env avec les infos que vous avez trouvées, par exemple :

1
2
3
PW='$argon2i$v=19$m=4096,t=3,p=1$wST5QhBgk2lu1ih4DMuxvg$LS1alrVdIWtvZHwnzCM1DUGg+5DTO3Dt1d5v9XtLws4'
PUID=1000
GUID=1000

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 !

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.

1
2
3
4
5
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.

Au préalable

Nous partons du principe que vous avez créé dans votre zone DNS un sous domaine du type code.mondomaine.fr avec pour CNAME mondomaine.fr et à moins que vous utilisiez Cloudflare Zero Trust, que que vous avez déjà redirigé le port 443 de votre box vers le 443 de votre serveur dans les règles NAT.

Dans Dockge ouvrez la stack code-server et ajoutez le réseau de Swag. Pour rappel

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
services:
  nomduservice:
     container_name: #...
      # ... 
     networks: # (1)!
      - swag # (2)!

networks: # (3)!
  swag: # (6)!
    name: swag_default # (4)!
    external: true # (5)!
  1. 👉 Relie le conteneur au réseau custom. A faire pour chaque conteneur à exposer de la stack
  2. 👉 Nom du réseau déclaré dans la stack
  3. 👉 Défini le réseau custom
  4. 👉 Nom véritable du réseau externe
  5. 👉 Précise que c'est un réseau à rechercher en externe
  6. 👉 Nom du réseau déclaré dans la stack

Dans les dossiers de Swag, créez le fichier code.subdomain.conf.

Astuce pour les allergiques au terminal

Vous pouvez utiliser File Browser pour naviguer dans vos fichier et éditer vos documents au lieu d'utiliser les commandes du terminal.

1
$ sudo vi /docker/swag/config/nginx/proxy-confs/code.subdomain.conf
Entrez en modification avec la touche i et collez la configuration ci-dessous :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
## 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 !

Protéger avec Authentik

Vous pouvez protéger cette app avec Authentik en ouvrant code.subodmain.conf et en retirant les # devant include /config/nginx/authentik-server.conf; et include /config/nginx/authentik-location.conf; N'oubliez pas de créer une application et un fournisseur dans Authentik.