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.

## 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.