Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Installation d'un explorateur web de fichiers sous nginx

Par Pierre DIANCOURT Publié le 15/09/2015 à 19:29:53 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Cet article est destinés à tous les curieux de l'hébergement web déjà initiés aux systèmes linux. Tout ce dont vous avez besoin pour suivre ce tutoriel est un accès au terminal de commande d'un système Debian 7.

Un tunnel SSH initié via PuTTY sur votre Windows fait parfaitement l'affaire. Cet article est parfaitement applicable à d'autres systèmes linux, néanmoins des étapes pourraient sensiblement différer. Seule la distribution ci-nommé a été utilisée par l'auteur pour l'écriture de cet article.

Précisons la finalité de cet article

Qu'entendons nous par "explorateur web de fichiers" ?

En anglais nous choisirions certainement de dire "file indexer", faisant echo à l'affichage par défaut de l'index des fichiers du serveur web. Peut-être avez-vous déjà visité des sites complet ou partiellement présentés de cette manière plutôt austère :

Dans cet article nous allons ensemble installer un projet open source sous license MIT chargé de remplacer avantageusement l'affichage classique par défaut des fichiers et dossiers rendus publiquement accessibles par le serveur web nginx.

Vous pourrez entre autres fonctionnalités :

- trier pas date, taille, nom de fichiers/dossiers

- connaître à tout moment votre position dans l'arborescence

- filtrer les fichiers/dossiers affichés

- télécharger les fichiers/dossiers sélectionnés (archive .tar ou .zip générée)

- miniatures pour les images, films et .pdf

- consulter directement dans votre navigateur les images et fichiers textes

- lecture des fichiers audios et vidéos aux formats compatibles avec les fonctionnalités html5 de votre navigateur

N'oublions pas de préciser la présence d'une caractéristique très importante de nos jours, le "responsive design". Cela signifie que l'apparence du site s'adapte au mieux suivant la résolution de l'écran sur lequel il est affiché afin de proposer la meilleure expérience utilisateur possible quel que soit le support (mobile, tablette, ordinateur ...).

Et en plus c'est plutôt joli non ?

Passons à la réalisation

Faisons un tour d'horizon des prérequis

C'est bien beau mais comment qu'on fait ?

Avant toute nouvelle installation de logiciels sur votre linux, il est de bonne pratique que de lancer la mise à jour de la liste de ceux-ci.

sudo apt-get update

Suivi de la mise à jour des logiciels déjà installés.

sudo apt-get upgrade

On installe le serveur web nginx si ce n'est pas déjà fait.

sudo apt-get install nginx
sudo service nginx start

A ce stade, vous avez votre serveur web qui écoute le port 80 et qui peut commencer à servir des pages web statiques. Vérifiez dès maintenant que vous obtenez bien la page "Welcome to nginx" en vous rendant sur le nom de domaine ou l'ip de votre serveur.

Si ce n'est pas le cas inutile de poursuivre, je vous invite à corriger tout d'abord cela en effectuant des recherches google à propos de ce message. Je ne puis en effet détailler tous les scénarios possibles ici, ceci étant de plus impertinent au regard de la documentation déjà riche présente sur le sujet.

Ensuite, on installe le paquet php5-fpm, seul requis de h5ai.

sudo apt-get install php5-fpm
sudo service php5-fpm start

Rentrons dans le coeur du sujet

A partir de maintenant, vous avez les outils pour pouvoir servir des pages web dynamiques. Sécurisons rapidement php5-fpm en éditant sa configuration avec l'éditeur de texte nano.

sudo nano /etc/php5/fpm/php.ini

Trouvez alors la ligne correspondant à cgi.fix_pathinfo en entrant CTRL+W suivi de "cgi.fix_pathinfo" et de la touche Entrer.

Remplacez 1 par 0. Veillez à supprimer le point-virgule en début de ligne. Vous obtenez donc la ligne suivante.

cgi.fix_pathinfo=0

Faites CTRL+X suivi de la touche "y" ou "o" suivant la langue de votre système afin de confirmer la prise en compte de la modification puis Entrer pour confirmer la non modification du nom du fichier.

Ainsi on empêche php5-fpm de corriger les chemins qui lui sont envoyés pour accéder à des scripts dont l'exécution est non désiré.

Nous n'avons toujours pas installé h5ai mais l'on va protéger notre site par avance en mettant en place un système d'authentification rapide, classique et efficace. Cela empêchera que n'importe qui accède à nos fichiers mais aussi l'indexation de notre contenu par les robots des moteurs de recherche, permettant à notre site de ne pas être trouvable via google et consorts.

sudo apt-get install apache2-utils
sudo htpasswd -c /etc/nginx/.htpasswd exampleusername

Suivez les instructions affichées par la dernière commande : entrez un mot de passe, répétez le.

Téléchargeons et copions désormais le projet h5ai.

sudo cd /var/www/
sudo wget https://release.larsjung.de/h5ai/h5ai-0.27.0.zip

Installez unzip si vous ne l'avez pas d'installé, décompressez h5ai puis vous pouvez supprimer le .zip.

sudo apt-get install unzip
unzip h5ai-0.27.0.zip
rm h5ai-0.27.0.zip

Déplacez vos dossiers et fichiers à rendre public à coté du répertoire _h5ai ainsi obtenu.

sudo mv /home/toto/MyPublicFolder/ ./

Plus élégamment vous pouvez aussi faire des liens symboliques vers des documents situés ailleurs sur le disque, sans les déplacer.

sudo ln -s /home/toto/MyPublicFolder/

Il ne reste désormais plus qu'à configurer nginx en lui renseignant quels fichiers afficher à l'utilisateur du site.

On créer un nouveau de fichier de configuration pour le site.

sudo nano /etc/nginx/sites-available/h5ai

On colle le pavé ci-après.

server {
        listen 80
        server_name subdomain.domain.tld;

        auth_basic "Veuillez-vous authentifier";
        auth_basic_user_file /etc/nginx/.htpasswd;

        root /var/www/;
        index index.html;

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        location / {
                index /_h5ai/server/php/index.php;
                try_files $uri $uri/ /_h5ai/server/php/index.php
                autoindex on;

                location ~ \.php {
                        try_files $uri $uri/ index.html index.php =404;

                        fastcgi_param  QUERY_STRING $query_string;
                        fastcgi_param  REQUEST_METHOD $request_method;
                        fastcgi_param  CONTENT_TYPE $content_type;
                        fastcgi_param  CONTENT_LENGTH $content_length;

                        fastcgi_param  SCRIPT_NAME $fastcgi_script_name;
                        fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
                        fastcgi_param  REQUEST_URI $request_uri;
                        fastcgi_param  DOCUMENT_URI $document_uri;
                        fastcgi_param  DOCUMENT_ROOT $document_root;
                        fastcgi_param  SERVER_PROTOCOL $server_protocol;

                        fastcgi_param  GATEWAY_INTERFACE CGI/1.1;
                        fastcgi_param  SERVER_SOFTWARE nginx;

                        fastcgi_param  REMOTE_ADDR $remote_addr;
                        fastcgi_param  REMOTE_PORT $remote_port;
                        fastcgi_param  SERVER_ADDR $server_addr;
                        fastcgi_param  SERVER_PORT $server_port;
                        fastcgi_param  SERVER_NAME $server_name;

                        fastcgi_pass unix:/var/run/php5-fpm.sock;

                        fastcgi_index index.php;
                }
        }
}

Comme tout à l'heure faites CTRL+X suivi de la touche "y" ou "o" suivant la langue de votre système afin de confirmer la prise en compte de la modification puis Entrer pour confirmer la non modification du nom du fichier.

Rendons maintenant cette configuration active en créant un lien symbolique car c'est ainsi que fonctionne nginx.

sudo cd /etc/nginx/sites-enabled/
sudo ln -s ../sites-available/default

Dernière ligne droite, rechargeons les configurations nginx pour les rendre actives.

sudo service nginx reload

Et voila c'est terminé, félicitation ! Vous pouvez consulter l'adresse de votre serveur à l'aide d'un navigateur, entrer votre nom d'utilisateur et mot de passe et disposer de votre propre accès ergonomique à vos fichiers.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels