---
title: Code-Serveur
description: 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](https://github.com/linuxserver/docker-code-server) est un conteneur permettant d'accéder à [VS Code](https://code.visualstudio.com/) en interface web dans un environnement Linux. C'est littéralement VS Code et vos projets dans votre poche, disponibles partout.

![code-server](https://github.com/coder/code-server/raw/main/docs/assets/screenshot-2.png)

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

```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 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 :

```bash [Terminal]
echo -n "votremotdepasse" | npx argon2-cli -e
```

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

```bash [Terminal]
id votreutilisateur
```

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

```properties [.env]
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.

```yaml [compose.yaml]
---
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](/general/networking/dns). À moins d'utiliser [Cloudflare Zero Trust](/serveex/security/cloudflare), 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](/general/networking/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 :

```yaml [compose.yaml]
---
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.
::

```bash [Terminal]
sudo nano /srv/docker/swag/config/nginx/proxy-confs/code.subdomain.conf
```

Collez la configuration suivante :

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

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](/serveex/security/tinyauth) directement dans `code.subdomain.conf`, de la même façon que dans [le tutoriel TinyAuth](/serveex/security/tinyauth#protecting-an-app-via-reverse-proxy) :

```nginx [code.subdomain.conf]{26-38,41-42}
## 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](/serveex/advanced/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](/serveex/advanced/authentik#protecting-an-app-via-reverse-proxy).
::
