docudjeex/content/3.serveex/8.apps/1.file-browser.md

navigation, title, main

navigation	title	main
true	File Browser	fluid false

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

File Browser

::alert{type="info"} 🎯 Objectifs :

• Installer File Browser
• Exposer File Browser avec Swag ::

File Browser est une interface permettant d'accéder aux fichiers de votre serveur et de les éditer.

Installation

---

Ouvrez Dockge, cliquez sur compose, appelez la stack filebrowser puis copiez collez ceci :

services:
  filebrowser:
    container_name: filebrowser
    volumes:
      - /:/srv
      - /docker/filebrowser/config:/config/
      # - /chemin/vers/vos/dossiers:/vosdossiers
    ports:
      - 8010:80
    image: filebrowser/filebrowser:s6

::alert{type="success"} ✨ Astuce : ajoutez le label de watchtower dans chaque conteneur afin d'automatiser les mises à jour

```yaml
services:
  filebrowser:
    #...
    labels:
      - com.centurylinklabs.watchtower.enable=true

::

Déployez le conteneur et rendez-vous sur http://ipduserveur:8010. Et voilà, votre instance File Browser en webui est disponible !

::alert{type="danger"} :::list{type="danger"}

• En cas d'échec : vérifiez les règles de votre pare-feu. ::: ::

Exposer File Browser avec Swag

---

Vous aurez peut-etre envie d'y accéder à distance et sur tout vos appareils. Pour cela, nous allons exposer IT Tools via Swag.

::alert{type="info"} :::list{type="info"}

• Au préalable : nous partons du principe que vous avez créé dans votre zone DNS un sous domaine du type files.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 filebrowser et ajoutez le réseau de Swag. Pour rappel

services:
  nomduservice:
     container_name: #...
      # ... 
     networks: # Relie le conteneur au réseau custom. A faire pour chaque conteneur à exposer de la stack 
      - swag # Nom du réseau déclaré dans la stack
    
networks: # Défini le réseau custom
  swag: # Nom du réseau déclaré dans la stack
    name: swag_default # Nom véritable du réseau externe
    external: true # Précise que c'est un réseau à rechercher en externe

::alert{type="info"} :::list{type="info"}

• Ici nous partons du principe que le nom du réseau de Swag est swag_default. ::: ::

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

sudo vi /docker/swag/config/nginx/proxy-confs/files.subdomain.conf

Entrez en modification avec la touche i et collez la configuration ci-dessous :

## Version 2023/12/19

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name files.*;

    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 filebrowser;
        set $upstream_port 80;
        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é File Browser ! ::alert{type="success"} ✨ Astuce : vous pouvez protéger cette app avec Authentik en ouvrant files.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. ::