Djeex/docudjeex
1
1
Fork 0
Code Issues Pull Requests Projects Wiki Activity
Files
bf97cac2e98f8a99e73bd6bf796ba7181d9dac81
docudjeex/content/fr/3.serveex/8.development/1.code-server.md
T

10 KiB
Raw Blame History

title, description
title description
Code-Serveur Installer code-server pour utiliser VS Code dans votre navigateur depuis votre homelab, monter des dossiers et l'exposer de manière sécurisée avec SWAG.

:ellipsis{left=0px width=40rem top=10rem blur=140px zIndex=60}

code-server est un conteneur permettant d'accéder à VS Code en interface web dans un environnement Linux. C'est littéralement VS Code et vos projets dans votre poche, disponibles partout.

code-server

Installation

::note{to="https://docs.linuxserver.io/images/docker-code-server/"}

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

::file-tree

tree: /: - srv: - docker: - code-server: - compose.yaml - .env - config/ - (n'importe quel dossier à monter dans VS Code)/

::

::steps{level="3"}

Déployer la stack

Ouvrez Dockge, cliquez sur compose, nommez la stack code-server, et collez ce qui suit :

---
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 les dossiers à monter dans VS Code
    # - /chemin/vers/dossier:/dossier
    ports:
      - 8443:8443
    restart: unless-stopped

::tip{icon=""} ✨ Ajoutez le label Watchtower à chaque conteneur pour automatiser les mises à jour

```yaml [compose.yaml]
services:
  code-server:
    #...
    labels:

      - com.centurylinklabs.watchtower.enable=true
```

::

Renseigner vos variables d'environnement

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

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

Conservez précieusement le résultat. Trouvez vos PUID et GUID avec :

id votreutilisateur

Remplissez le fichier .env avec les valeurs trouvées, par exemple :

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

::warning

Note : veillez à bien encadrer le hash par des apostrophes simples ' ::

Déployez le conteneur et allez sur http://ipdevotreserveur:8443. Et voilà, votre instance code-server tourne dans le navigateur !

Terminé !

::

::caution

Si ça ne marche pas : vérifiez les règles de votre pare-feu. ::

Monter des dossiers

Vous pouvez monter des dossiers dans VS Code en ajoutant les volumes correspondants dans le compose.yaml (ou via Dockge), puis en redéployant le conteneur.

---
services:
  code-server:
    #...
    volumes:
      - /chemin/vers/dossier:/dossier

Une fois dans VS Code, vous aurez accès au dossier monté.

Exposer code-server avec Swag

Tout l'intérêt d'une telle solution est d'y accéder à distance depuis n'importe quel appareil. Pour cela, nous allons exposer code-server via Swag.

::note

Au préalable : nous partons du principe que vous avez créé un sous-domaine du type code.mondomaine.fr avec un CNAME pointant vers mondomaine.fr dans votre zone DNS. À moins d'utiliser Cloudflare Zero Trust, nous partons aussi du principe que vous avez redirigé le port 443 de votre box vers le port 443 de votre serveur avec les règles NAT. ::

::steps{level="3"}

Ajouter le réseau de code-server à SWAG

Dans Dockge, allez sur la stack SWAG et modifiez le fichier compose pour y ajouter le réseau de code-server :

---
services:
  swag:
     container_name: # ...
      # ... 
     networks:           # Rattache le conteneur à un réseau personnalisé 
      # ...           
      - code-server      # Nom du réseau défini dans la stack
    
networks:                # Définit le réseau personnalisé
  # ...
  code-server:           # Nom du réseau défini dans la stack
    name: code-serveur   # Nom réel du réseau externe
    external: true       # Indique qu'il s'agit d'un réseau externe

::note

Nous partons du principe que le nom du réseau est code-server_default. Vous pouvez vérifier que la connexion fonctionne en visitant le tableau de bord de SWAG sur http://ipdevotreserveur:81. ::

Redéployez la stack en cliquant sur « deploy » et attendez que SWAG soit pleinement opérationnel.

Créer le fichier subdomain.conf

Dans les dossiers de configuration 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 et modifier vos fichiers plutôt que des commandes dans le terminal. ::

sudo nano /srv/docker/swag/config/nginx/proxy-confs/code.subdomain.conf

Collez la configuration suivante :

## 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 :kbd{value="Ctrl+O"}, puis :kbd{value="Enter"} pour enregistrer, et :kbd{value="Ctrl+X"} pour quitter.

Terminé !

::

Et voilà ! code-server est maintenant exposé !

Protéger code-server avec TinyAuth

Ajoutez la vérification forward-auth de TinyAuth directement dans code.subdomain.conf, de la même façon que dans le tutoriel TinyAuth :

## 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 /tinyauth {
        internal;
        proxy_pass http://tinyauth:3000/api/auth/nginx;
        proxy_pass_request_body off;
        proxy_set_header Content-Length "";
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Host $http_host;
        proxy_set_header X-Forwarded-Uri $request_uri;
    }

    location @tinyauth_login {
        return 302 https://tinyauth.mondomaine.fr/login?redirect_uri=$scheme://$http_host$request_uri;
    }

    location / {
        auth_request /tinyauth;
        error_page 401 = @tinyauth_login;

        # 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;
    }
}

::note{to="/serveex/security/tinyauth#exposing-tinyauth-with-swag"}

Le bloc location /tinyauth s'exécute dans le conteneur de SWAG lui-même, SWAG doit donc être sur le réseau Docker de TinyAuth pour le joindre par son nom (tinyauth ici). Cela devrait déjà être en place depuis l'exposition de TinyAuth. Si vous rencontrez une erreur, revérifiez que le fichier compose de SWAG a toujours ce réseau rattaché. ::

::tip{icon=""} ✨ Astuce : vous pouvez protéger cette application avec Authentik plutôt que TinyAuth, en ouvrant code.subdomain.conf et en décommentant 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 provider dans Authentik. ::

Reference in New Issue View Git Blame Copy Permalink