Skip to main content

Étape 3 : Website, Service, Entretien

Dans cette section, nous allons apprendre comment héberger un site web sur la Raspberry Pi pour télécharger les vidéos, puis nous passerons à la création de services pour lancer le code du système 'main.py' au démarrage. Enfin, nous gérerons l'entretien du système en créant des tâches qui s'exécutent régulièrement pour effacer les vidéos sauvegardées.

Website

Pour se Cultiver

Nginx :
Nginx est un serveur web open-source connu pour sa haute performance, sa stabilité, sa faible consommation de ressources et sa capacité à gérer un grand nombre de connexions simultanées. Il est souvent utilisé comme serveur web ou serveur proxy inverse, ainsi que pour la mise en cache, l'équilibrage de charge, et plus encore. 

PHP est un langage de script côté serveur conçu pour le développement web, mais il est également utilisé comme langage de programmation généraliste. Pour exécuter du code PHP sur un serveur, vous avez besoin de l'interpréteur PHP installé, tout comme vous avez besoin de l'interpréteur Python pour exécuter du code Python.

PHP-FPM (PHP FastCGI Process Manager) :
PHP-FPM est une implémentation alternative de PHP FastCGI avec des fonctionnalités supplémentaires utiles pour les sites web à forte charge. Il permet à PHP de fonctionner efficacement avec Nginx. Bien que Nginx ne puisse pas directement interpréter PHP, il transmet les requêtes PHP à PHP-FPM, qui traite le code et renvoie le résultat à Nginx.

1-Préparation

1 -Créer un répertoire pour stocker tous les fichiers en rapport avec la structure de votre site, par exemple :

mkdir /home/pi/Desktop/website

2 -Installer Nginx et PHP

sudo apt install nginx

sudo apt install php-fpm

3 -Démarrer et activer Nginx

sudo systemctl start nginx

sudo systemctl enable nginx

Normalement, après cette étape, vous pouvez visiter votre site en tapant l'adresse IP de votre Raspberry Pi dans votre navigateur web. Vous devriez voir cette page.

nginx-start.png

2-Modifier la Configuration de Nginx

Ouvrez le fichier de configuration par défaut pour l'éditer :

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

Remplacez le contenu du fichier en modifiant `root` avec le chemin du répertoire de votre site web et `alias` avec le chemin du répertoire où vous stockez vos vidéos, par exemple : 

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /home/pi/Desktop/website;
    index index.php index.html index.htm;

    server_name _;

    location / {
        try_files $uri $uri/ =404;
    }

    location /videos/ {
        alias /home/pi/Desktop/videos/;
        autoindex on;
        allow all;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;
    }

    location ~ /\.ht {
        deny all;
    }
}

explication :

 listen 80 default_server; et listen [::]:80 default_server;:

- Ces directives indiquent à Nginx d'écouter les connexions entrantes sur le port 80, le port par défaut pour HTTP.
- default_server signifie que ce bloc de serveur sera le serveur par défaut si aucun autre bloc de serveur ne correspond à la demande entrante.

index index.php index.html index.htm;:

- Spécifie les fichiers par défaut à servir lorsqu'un répertoire est demandé. Nginx cherchera index.php, index.html, et index.htm dans cet ordre.

server_name _;:

- C'est un nom de serveur générique. Cela signifie que ce bloc de serveur gérera les requêtes qui ne correspondent à aucun autre bloc de serveur avec un nom de serveur spécifique.

location / { ... }:

- Ce bloc configure la manière de gérer les requêtes pour l'URL racine (c'est-à-dire la page d'accueil) et toutes les autres URL non couvertes par d'autres blocs location.

try_files $uri $uri/ =404;:

- Cette directive tente de servir le fichier spécifié par l'URI ($uri).
- Si le fichier n'existe pas, il essaie le répertoire ($uri/).
- Si aucun des deux n'existe, il renvoie une erreur 404.

location /videos/ { ... }:

- Ce bloc configure la manière de gérer les requêtes pour les URL commençant par /videos/.

alias /home/pi/Desktop/videos/;:

- Définit le répertoire correspondant aux requêtes URL /videos/ à /home/pi/Desktop/videos/.

autoindex on;:

- Active la liste automatique des répertoires pour le répertoire /videos/ si aucun fichier index n'est trouvé.

allow all;:

- Autorise l'accès à tous les utilisateurs.

location ~ \.php$ { ... }:

- Ce bloc gère les requêtes pour les fichiers PHP. La regex ~ \.php$ correspond à toute requête se terminant par .php.

include snippets/fastcgi-php.conf;:

- Inclut les paramètres de configuration pour FastCGI, nécessaire pour traiter les fichiers PHP.

fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;:

- Passe les requêtes PHP au socket Unix PHP-FPM (FastCGI Process Manager) pour traitement.

location ~ /\.ht { ... }:

- Ce bloc gère les requêtes pour les fichiers commençant par .ht, tels que les fichiers .htaccess.

deny all;:

- Interdit l'accès à ces fichiers pour des raisons de sécurité, car les fichiers .htaccess sont utilisés pour la configuration et ne doivent pas être accessibles publiquement.

3-Rendre le site plus beau

Créer un fichier pour le style.

sudo nano /home/pi/Desktop/website/style.css

Ajouter ca :

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
}

h1 {
    text-align: center;
    color: #333;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    margin: 10px 0;
}

a {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
}

a:hover {
    color: #0056b3;
}

en plus vous pouvez ajouter une image à votre site, sauvegardez la dans le répertoire de votre site.

4-Ajoutez un fichier PHP dans le répertoire de votre site web

Créer le fichier index.php 

sudo nano /home/pi/Desktop/website/index.php

ensuite ajouter ca : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video Downloads</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Video Downloads</h1>
        <img src="images.png" alt="Fablab Sorbonne Image" style="max-width: 100%;">
        <ul>
            <?php
            $dir = '/home/pi/Desktop/videos/';
            $webPath = '/videos/';

            if ($handle = opendir($dir)) {
                while (false !== ($file = readdir($handle))) {
                    if ($file != "." && $file != ".." && !is_dir($dir . $file)) {
                        $filePath = $webPath . $file;
                        echo "<li><a href='" . htmlspecialchars($filePath) . "' download>" . htmlspecialchars($file) . "</a></li>";
                    }
                }
                closedir($handle);
            } else {
                echo "<p>Failed to open directory: $dir</p>";
            }
            ?>
        </ul>
    </div>
</body>
</html>

explication :

Le document commence par une déclaration <!DOCTYPE html>, indiquant qu'il s'agit d'un document HTML5.

La balise <html> définit la langue comme étant l'anglais avec lang="en".

La section <head> contient des métadonnées et des liens, notamment :

- <meta charset="UTF-8"> définit l'encodage des caractères à UTF-8.
- <title> définit le titre de la page à "Video Downloads".
- <link rel="stylesheet" href="style.css"> lie un fichier CSS externe nommé style.css.

La section <body> contient le contenu principal de la page :

- Une div avec la classe container encapsule le contenu.
- Une balise <h1> avec le titre "Video Downloads".
- Une balise <img> affichant une image (images.png) avec une largeur maximale de 100%.
- Une liste non ordonnée (<ul>) qui sera peuplée dynamiquement avec des éléments de liste (<li>) par PHP.

Le script PHP est intégré dans le HTML en utilisant les balises <?php ... ?>.

$dir est défini comme le chemin du répertoire contenant les vidéos (/home/pi/Desktop/videos/).

$webPath est défini comme le chemin URL correspondant au répertoire des vidéos (/videos/).

opendir($dir) tente d'ouvrir le répertoire spécifié par $dir. Si cela réussit, il retourne un handle de répertoire ($handle).

readdir($handle) lit les entrées du handle de répertoire. Cette boucle continue jusqu'à ce que toutes les entrées aient été lues.

Cette condition assure que les entrées spéciales (. et ..) et les sous-répertoires sont exclus, ne laissant que les fichiers réguliers.

$filePath combine le chemin web avec le nom de fichier pour créer l'URL du fichier.

htmlspecialchars($filePath) garantit que le chemin du fichier est encodé en toute sécurité pour la sortie HTML.

htmlspecialchars($file) garantit que le nom du fichier est encodé en toute sécurité pour la sortie HTML.

Un élément <li> est créé avec une balise <a>. L'attribut download incite le navigateur à télécharger le fichier plutôt qu'à l'ouvrir.

closedir($handle) ferme le handle de répertoire.

Si opendir($dir) échoue, un message d'erreur est affiché.

5-Modifier les Permissions 
sudo chown -R www-data:www-data /home/pi/Desktop/website
sudo chown -R www-data:www-data /home/pi/Desktop/videos
sudo chmod -R 755 /home/pi/Desktop/website
sudo chmod -R 755 /home/pi/Desktop/videos

Changement de propriétaire : Les commandes chown s'assurent que l'utilisateur www-data (qui est typiquement l'utilisateur sous lequel le serveur web fonctionne) possède les répertoires et leur contenu. C'est important car cela permet au serveur web de lire et d'exécuter les fichiers selon les besoins.

Changement des permissions : Les commandes chmod définissent les permissions afin que le propriétaire (www-data) ait un contrôle total (lecture, écriture, exécution), tandis que le groupe et les autres peuvent lire et exécuter les fichiers, mais pas les modifier. Cela permet de sécuriser les répertoires tout en autorisant l'accès nécessaire pour servir les fichiers via le serveur web.

 
Back to top