TP5

TP5 : Configuration du service web public

Noms des auteurs : Thomas Ciserane, Nathan Colson, WILLEMS Julien Date de réalisation : 24/03/2025

Mise en place de l'environnement de travail

Documentez ou mettez à jour votre documentation concernant votre infrastructure et votre environnement de travail : quels VPS sont utilisés pour quels services?

VPS de Thomas : Héberge le service web public (Nginx, PHP-FPM, MariaDB).

Pour le service Web en particulier : quelle organisation utilisez-vous pour vos fichiers de config, sur Github et sur le VPS qui héberge le service Web?

Les fichiers de configuration sont stockés dans un dépôt GitHub pour la gestion des versions.

Sur le VPS, les fichiers sont organisés comme suit :

tp5/
 └──web/
    ├── docker-compose.yml
    ├── Dockerfile
    ├── index.html
    └── config/
        └── nginx.conf

1. Configuration de base d'un serveur web

Documentez la première version de votre configuration Web avec :

la configuration de base pour le premier site

1. nginx.conf

events {
}

http {
    server {
        listen 80;
        server_name www.l1-7.ephec-ti.be;
        index index.html index.php;
        root /var/www/html/www;

   }
}

2. Fichier index.html (dans html/www/) :

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome to Our Site</title>
  </head>
  <body>
    <h1>Hello, this is group 7's website!</h1>
  </body>
</html>

3. DockerFile :

FROM nginx:latest

# Supprimer le fichier de configuration par défaut
RUN rm /etc/nginx/conf.d/default.conf

COPY config/nginx.conf /etc/nginx/nginx.conf

# Créer le répertoire pour les fichiers HTML
RUN mkdir -p /var/www/html/www
RUN mkdir -p /var/www/html/blog

COPY html/www /var/www/html/www
COPY html/blog /var/www/html/blog

# Exposer le port 80
EXPOSE 80

4. Le visuel :

wwwStatique

le Virtual Hosting

1.nginx.conf

events {
}

http {
  server {
    listen 80;
    server_name www.l1-7.ephec-ti.be;
    index index.html index.php;
    root /var/www/html/www;
  }

  server {
    listen 80;
    server_name blog.l1-7.ephec-ti.be;
    index index.html index.php;
    root /var/www/html/blog;
  }
}

2. Fichier index.html (dans html/blog/) :

<!DOCTYPE html>
<html>
  <head>
    <title>Blog</title>
  </head>
  <body>
    <h1>Welcome to the Blog!</h1>
  </body>
</html>

3. Le visuel :

blogVirtualHosting

3. la configuration des logs :

1. Modification de nginx.conf pour personnaliser les logs :

http {
    log_format log_per_virtualhost '[$host] $remote_addr [$time_local]  $status '
                                  '"$request" $body_bytes_sent';

    server {
        listen 80;
        server_name www.l1-7.ephec-ti.be;
        index index.html index.php;
        root /var/www/html/www;
        access_log /dev/stdout log_per_virtualhost;
    }

    server {
        listen 80;
        server_name blog.l1-7.ephec-ti.be;
        index index.html index.php;
        root /var/www/html/blog;
        access_log /dev/stdout log_per_virtualhost;
    }
}

loggin

Prouvez, via quelques screenshots bien choisis et soigneusement expliqués, le bon fonctionnement de chaque élément.

Le bon fonctionnement des différents serices web peut être prouvé via la capture d'écran suivante :

🚧 AJOUTER preuve_fonctionnement.png

On y constate que le site "bloc.l1-7.ephec-ti.be" a été déployé avec succès et est prêt à servir et la même chose peut être dite concernant le site "www.l1-7.ephec-ti.be".

2. Site web dynamique

Documentez la mise en oeuvre de votre site web dynamique.

2.1.1. Premier test de MariaDB

Pour commencer, nous avons réalisé un test simple de connexion à une base de données MariaDB en exécutant directement un container via la commande suivante :

docker run --name mariadbtest -e MYSQL_ROOT_PASSWORD=mypass --rm -d mariadb

Nous avons ensuite récupéré l'adresse IP du container grâce à la commande :

docker inspect mariadbtest | grep "IPAddress"

À l’aide de cette IP, nous avons pu nous connecter à la base de données depuis notre VPS via le client mysql :

mysql -h <IP_du_container> -u root -p

Une fois connectés, nous avons utilisé la commande SHOW DATABASES; pour vérifier que l'accès fonctionnait correctement.

2.1.2. Ajouter du contenu à la base de données

Après avoir vérifié la connectivité à MariaDB, nous avons ajouté du contenu de test dans une nouvelle base de données nommée woodytoys.

Nous avons d’abord relancé une connexion au container MariaDB via :

mysql -h <IP_du_container> -u root -p

Depuis l’interface MariaDB, nous avons créé la base de données :

CREATE DATABASE woodytoys;

Ensuite, nous avons créé un fichier woodytoys.sql sur notre VPS contenant le script suivant :

USE woodytoys;

CREATE TABLE products (
    id mediumint(8) unsigned NOT NULL auto_increment,
    product_name varchar(255) default NULL,
    product_price varchar(255) default NULL,
    PRIMARY KEY (id)
) AUTO_INCREMENT=1;

INSERT INTO products (product_name, product_price) VALUES
("Set de 100 cubes multicolores", "50"),
("Yoyo", "10"),
("Circuit de billes", "75"),
("Arc à flèches", "20"),
("Maison de poupées", "150");

Ce fichier a ensuite été injecté dans MariaDB avec la commande :

mysql -h <IP_du_container> -u root -pmypass < woodytoys.sql

Enfin, nous avons vérifié l’insertion correcte des données en consultant la base :

USE woodytoys;
SHOW TABLES;
SELECT * FROM products;

Tous les produits sont bien présents, confirmant que notre script fonctionne correctement.

2.2. Premier script PHP

Pour pouvoir interpréter du code PHP dans notre site web, nous avons mis en place un container dédié basé sur PHP-FPM. Celui-ci s'occupera de traiter les fichiers .php appelés depuis le virtualhost www.

Création de l’image PHP personnalisée

Un sous-répertoire php a été créé à la racine du projet.
À l’intérieur, un Dockerfile a été ajouté avec ce contenu :

FROM php:8.3-fpm
RUN docker-php-ext-install mysqli

L’image a ensuite été buildée via :

docker build -t php php/

Mise en place du fichier PHP de test

Dans le répertoire html/www/ (déjà utilisé par nginx), nous avons ajouté un fichier products.php :

<?php
phpinfo();
?>

Lancement du container PHP

On a monté le même répertoire HTML que celui utilisé par nginx, pour que les deux containers puissent accéder aux mêmes fichiers :

docker run --name php --rm -d \
  --mount type=bind,source=$(pwd)/html/www,target=/var/www/html/www \
  php

Connexion entre nginx et PHP-FPM

On a récupéré l’IP du container PHP avec :

docker inspect -f php | grep IPAddress

Puis, on a modifié le nginx.conf comme suit :

events {
}
http {
    log_format log_per_virtualhost '[$host] $remote_addr [$time_local]  $status '
                                   '"$request" $body_bytes_sent';

    server {
        listen          80;
        server_name     www.l1-7.ephec-ti.be;
        index           index.html;
        root            /var/www/html/www/;
        access_log      /dev/stdout log_per_virtualhost;

 location ~* \.php$ {
         fastcgi_pass php:9000;  # IP du conteneur PHP-FPM
         include fastcgi_params;
         fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
    }

    server {
        listen          80;
        server_name     blog.l1-7.ephec-ti.be;
        index           index.html;
        root            /var/www/html/blog/;
        access_log      /dev/stdout log_per_virtualhost;

    }
}

Redémarrage de nginx

docker run -p80:80 --name web --rm -d \
  --mount type=bind,source=$(pwd)/html,target=/var/www/html/ \
  web

Résultat

En accédant à http://www.l1-7.ephec-ti.be/products.php, la page PHP affiche bien toutes les infos système.
La communication entre nginx et PHP-FPM via FastCGI fonctionne parfaitement.

2.3. Connexion entre l’application web et la base de données

Dans cette partie, nous avons établi une connexion entre le script PHP de notre serveur web et le serveur MariaDB hébergeantla base de données woodytoys.

Pour ce faire, nous avons créer un fichier catalogue.php placé dans le répertoire /var/www/html/www partagé entre le conteneur PHP et Nginx.

Fichier catalogue.php:

<html>

<head>
<title>Catalogue WoodyToys</title>
</head>

<body>
<h1>Catalogue WoodyToys</h1>

<?php
require_once __DIR__ . '/vendor/autoload.php';

$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
$dotenv->load();

$dbname = $_ENV['MYSQL_DATABASE'];
$dbuser = $_ENV['MYSQL_USER'];
$dbpass = $_ENV['MYSQL_PASSWORD'];
$dbhost = 'db';

$connect = mysqli_connect($dbhost, $dbuser, $dbpass) or die("Unable to connect to '$dbhost'");
mysqli_select_db($connect,$dbname) or die("Could not open the database '$dbname'");
$result = mysqli_query($connect,"SELECT id, product_name, product_price FROM products");
?>

<table>
<tr>
 <th>Numéro de produit</th>
 <th>Descriptif</th>
 <th>Prix</th>
</tr>

<?
while ($row = mysqli_fetch_array($result)) {
  printf("<tr><th>%s</th> <th>%s</th> <th>%s</th></tr>", $row[0], $row[1],$row[2]);
}
?>

</table>
</body>
</html>

Le scrpit est accessible depuis http://www.l1-7.ephec-ti.be/catalogue.php.

Ce résulat montre que l’environnement est correctement configuré, que les bind mounts fonctionnent, que les services communiquent via le réseau Docker, et que la base de données est bien initialisée.

2.4. Docker Compose

Une fois tous les services configurés, notre architecture évolue vers la suivante :

tp5/
 ├── compose.yml
 ├── php
 │   └── Dockerfile
 ├── web
 │   ├── Dockerfile
 │   ├── config
 │   │   └── nginx.conf
 │   └── html
 │       ├── blog
 │       │   └── index.html
 │       └── www
 │           ├── catalogue.php
 │           ├── index.html
 │           └── products.php
 └── woodytoys.sql

Puis nous avons créé un fichier compose.yml afin d'utiliser un Docker Compose pour faciliter la configuration de notre environnement.

Fichier compose.yml:

services:
  db:
    image: mariadb
    container_name: mariadb
    environment:
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_USER: ${MYSQL_USER}
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
    volumes:
      - db_data:/var/lib/mysql
      - ./woodytoys.sql:/docker-entrypoint-initdb.d/woodytoys.sql # Fichier SQL de création de la base de données

  php:
    build: ./php
    image: php-l1-7
    container_name: php
    volumes:
      - ./web/html/www:/var/www/html/www
    depends_on:
      - db

  web:
    build: ./web
    image: nginx-l1-7
    container_name: web
    ports:
      - "${NGINX_PORT}:80"
    volumes:
      - ./web/html:/var/www/html # Fichiers du site catalogue & blog
      - ./web/config/nginx.conf:/etc/nginx/nginx.conf # Configuration Nginx
    depends_on:
      - php

volumes:
  db_data:

Rédigez une procédure de validation et les scenario qu'elle comporte.

Pour valider que notre site web est correctement connecté à la base de données, nous avons mis en place une procédure simple, basée sur l'affichage dynamique des données depuis la base.

Procédure de validation:

Démarrer les conteneurs (via docker-compose up --build -d).
Accéder au site web à l’adresse :
http://www.l1-7.ephec-ti.be/catalogue.php
Vérifier que :
- La page s'affiche sans erreur.
- Les produits du catalogue WoodyToys sont visibles dans un tableau HTML (nom, description, prix).
En cas d’erreur, vérifier :
- Les logs du conteneur PHP (docker logs php)
- La connectivité à la base (ping db depuis le conteneur PHP)
- Que les identifiants (user / pass) sont bien les bons
- Que la base woodytoys existe et contient bien les données

Scénarios de test recommandés:

Test de réussite : le site affiche bien tous les produits depuis la base.
Test de défaillance base de données : arrêter le conteneur db et vérifier que le site renvoie une erreur contrôlée (ex: "Unable to connect to database").
Test de contenu : ajouter manuellement un nouveau produit à la base via le client MariaDB, puis recharger la page et vérifier l'affichage.

IA utilisée uniquement pour 'Procédure de validation' et pas pour 'Scenarios de test recommandés'

Appliquez votre procédure de validation à votre configuration et prouvez, via quelques screenshots bien choisis et soigneusement expliqués, que chaque élément fonctionne comme attendu.

Test de réussite:

Comme vu précédemment, le site affiche bien tous les produits depuis la base de données.

Test de défaillance base de données:

Ici, nous avons arrêté le conteneur db et nous avons vérifiqué que le site renvoyait une erreur contrôlée.

Test de contenu:

Ici, nous avons ajouté manuellement des nouveaux produits à la base via le client MariaDB, puis nous avons rechargé la page et nous avons vérifié l'affichage.

Documentez votre déploiement Docker Compose(c.f. 2.4 Docker Compose), et vérifiez, via la même procédure de validation que plus haut, que tout fonctionne de la même manière qu'à l'étape précédente.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TP5

TP5 : Configuration du service web public

Mise en place de l'environnement de travail

1. Configuration de base d'un serveur web

la configuration de base pour le premier site

1. nginx.conf

2. Fichier index.html (dans html/www/) :

3. DockerFile :

4. Le visuel :

le Virtual Hosting

1.nginx.conf

2. Fichier index.html (dans html/blog/) :

3. Le visuel :

3. la configuration des logs :

1. Modification de nginx.conf pour personnaliser les logs :

2. Site web dynamique

2.1.1. Premier test de MariaDB

2.1.2. Ajouter du contenu à la base de données

2.2. Premier script PHP

2.3. Connexion entre l’application web et la base de données

2.4. Docker Compose

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Clone this wiki locally