TP: Ajout du site « Alpha » en tant que sous-domaine webOdesign
- 1. Présentation
- 2. Copie des fichiers sources du site sur le VPS
- 3. Faire pointer les sous domaines "alpha" et "www.alpha" sur l'adresse IP du VPS
- 4. Création des fichiers de configuration et activation des hôtes virtuels
- 4.1. Création du fichier de configuration (alpha.conf) et activation du site. Tests.
- 4.2. Génération les clés de certification SSL pour les sous domaines "alpha" et "www.alpha"
- 4.3. Constatation des fichiers générés suite aux actions de la phase précédente
- 4.4. Modification du fichier "alpha-le-ssl.conf"
- 4.5. Redémarrage du serveur Apache. Tests
- 5. Configurations du site "alpha" (fichiers de conf et .htaccess)
- 5.1. Redirection d'erreurs
- 5.2. Demande d'authentification
- 5.2.1. Configuration de l'authentification avec un fichier .htaccess
- 5.2.2. Configuration de l'authentification dans le fichier "nomsousdom.conf"
- 5.2.3. Création du fichier .htpasswd
- 5.2.4. Autres possibilités
- 5.3. Sécurisation du serveur Apache
- 5.4. Utilisation des redirections
1. Présentation
On veut installer sur le VPS un mini site de présentation d’une société que l’on nommerait « Alpha ».

Ce site est composé d’une page « index.html » et de la bibliothèque de composants frontend de Bootstrap qui permet le développement rapide d’un site web entier à l’aide de HTML, CSS et JavaScript. Sa structure de fichiers est la suivante :

Le site « Alpha » sera accessible à partir du sous-domaine « Alpha » du site https://www.webodesign.net, c’est-à-dire à partir de l’url https://alpha.webodesign.net.
Les communications devront être sécurisées (protocole https) par chiffrement SSL.
Pour rappel, le protocole https assure le chiffrement des données grâce à une clé de cryptage asymétrique, rendant les informations échangées illisibles pour une personne tierce et sécurisant la connexion. Il prouve également l’identité du détenteur du certificat SSL / TLS correspondant.
Il sera nécessaire de générer un certificat auto-signé spécialement pour le sous-domaine « Alpha ».
D’autre part, nous allons contrôler l’accès sécurisé au site en configurant le serveur Apache. Les directives à prendre en charge sont les suivantes :
- Personnalisation de la page d’erreur 404 générée lorsque l’on tente d’accéder à une page introuvable.
- Redirection des adresses http en https (pour le sous-domaine Alpha). Concrètement :
- Les adresses « http://www.alpha.webodesign.net », et « www.alpha.webodesign.net » seront redirigées vers https://www.alpha.webodesign.net.
- Les adresses « http://alpha.webodesign.net » et « alpha.webodesign.net » seront redirigées vers l’adresse https://alpha.webodesign.net.
- Les accès au dossier, sous-dossiers et fichiers du sous-domaine sur le système Linux Debian du VPS seront contrôlés grâce à l’octroi de permissions au cas par cas. La visualisation de la structure de répertoires sera inhibée pour tous les utilisateurs.
- L’accès au site sera conditionné par la validation de l’authentification utilisateur / mot de passe.
Les règles de configurations seront mises en place dans un premier temps en les intégrant dans des fichiers « .htaccess » (On s’aidera de l’article « Htaccess – Présentation » si nécessaire). Lorsque les exigences demandées seront atteintes, elles seront ensuite portées dans les fichiers de configuration d’Apache.
Enfin, il est demandé de faire ensuite des modifications dans le fichier index.html afin d’ajouter la bannière d’entête du site webOdesign. Pour cela, on voudra pouvoir opérer les modifications à distance à partir de Visual Studio Code. On s’aidera de l’article « Configuration de VS Code pour développer à distance via SSH » si nécessaire.
2. Copie des fichiers sources du site sur le VPS
On va réaliser les actions suivantes :
- Copie des fichiers du site « Alpha » sur le VPS,
- Création du dossier « /var/www/projets/01-site-alpha » dans lequel sera décompressé l’archive « alpha.zip »,
- Décompression de l’archive dans le dossier « /var/www/projets/01-site-alpha/ »,
- Le super utilisateur « root » est propriétaire des dossiers et fichiers : On donne les droits à l’utilisateur « www-data » (correspondant à Apache) à tous les fichiers et dossiers de notre site.
2.1. Copie du fichier archive (alpha.zip) sur le VPS
On exécute le programme « psftp.exe » de puTTY pour copier le fichier archive (alpha.zip contenant les sources) sur le VPS. Le fichier se trouve dans le répertoire « D:\Program Files\PuTTY\transfert »
Open contabo_remi # saisir la passPhrase # Remote working directory is /home/remi psftp>lcd transfert psftp>put alpha.zip ./transfert/alpha.zip psftp>exit
2.2. Création du dossier racine du site Alpha et décompression de l’archive
remi@vmi820488:~$ cd transfert/ remi@vmi820488:~/transfert$ ll total 10140 drwxr-xr-x 2 remi remi 4096 Jan 4 18:08 ./ drwxr-xr-x 6 remi remi 4096 Dec 4 22:55 ../ -rw-r--r-- 1 remi remi 7496785 Jan 4 18:09 alpha.zip -rw-r--r-- 1 remi remi 1573 Oct 10 22:16 lire.txt remi@vmi820488:~/transfert$ cd /var/www/projets/ remi@vmi820488:/var/www/projets$ mkdir 01-site-alpha mkdir: cannot create directory '01-site-alpha': Permission denied remi@vmi820488:/var/www/projets$ sudo mkdir 01-site-alpha remi@vmi820488:/var/www/projets$ cd 01-site-alpha/ remi@vmi820488:/var/www/projets/01-site-alpha$ sudo unzip ~/transfert/alpha.zip -d . Archive: /home/remi/transfert/alpha.zip inflating: ./.DS_Store creating: ./css/ inflating: ./css/.DS_Store inflating: ./css/bootstrap-grid.css … … inflating: ./js/jquery.js inflating: ./js/script-custom.js inflating: ./maquette-alpha.jpg remi@vmi820488:/var/www/projets/01-site-alpha$ ll total 268 drwxr-xr-x 5 root root 4096 Jan 4 18:39 ./ drwxr-xr-x 3 www-data www-data 4096 Jan 4 18:38 ../ -rw-r--r-- 1 root root 8196 Feb 12 2021 .DS_Store drwxr-xr-x 2 root root 4096 Mar 16 2022 css/ drwxr-xr-x 2 root root 4096 Mar 16 2022 img/ -rw-r--r-- 1 root root 17647 Mar 16 2022 index.html drwxr-xr-x 2 root root 4096 Mar 16 2022 js/ -rw-r--r-- 1 root root 219404 May 23 2017 maquette-alpha.jpg remi@vmi820488:/var/www/projets/01-site-alpha$
2.2. Modification du propriétaire des fichiers du site « Alpha »
A la fin du listing précédent, on remarque que le super utilisateur « root » et le groupe « root » sont propriétaires de tous les des dossiers et fichiers.
Cette situation pose un problème car le serveur Apache n’a aucun droit sur les fichiers qu’il doit administrer. On donne donc les droits à l’utilisateur et le groupe « www-data » (correspondant à Apache) à tous les fichiers et dossiers de notre site.
L’option « -R » étant les modifications à tous les fichiers et sous-répertoires à partir de la racine du site.
remi@vmi820488:/var/www/projets/01-site-alpha$ sudo chown -R www-data:www-data /var/www/projets/ remi@vmi820488:/var/www/projets/01-site-alpha$
3. Faire pointer les sous domaines « alpha » et « www.alpha » sur l’adresse IP du VPS
Cette opération doit être effectuée à partir du panel de configuration du registrar auprès duquel on a acheté le nom du DNS.
Sur le site https://www.gandi.net/fr/ se connecter avec les paramètres suivants :
Nom de domaine : webodesign.net / Id : votre_id / Passw : votre_mot_de_passe.
Sur le panneau de configuration :
- Dans « Nom de Domaine », sélectionner « webodesign.net »,

- Sélectionner l’onglet « Enregistrement DNS »,
- Cliquer sur le bouton « Ajouter un enregistrement »,

- Pour Nom : alpha / Type : A, entrer dans le champ valeur l’adresse ip du serveur : 38.242.201.85,
- Cliquer sur le bouton « Creer ».

Dans le panneau de configuration :
- Cliquer sur le bouton « Ajouter un enregistrement »
- Pour Nom : www.alpha / Type : A, entrer dans le champ valeur l’adresse ip du serveur : 38.242.201.85
- Cliquer sur le bouton « Creer »
4. Création des fichiers de configuration et activation des hôtes virtuels
Il est important de réaliser les actions suivantes dans l’ordre exact dans lesquelles elles sont rapportées. Effectivement, on va combiner la générations des clés de certificats SSL afin d’accéder aux échanges chiffrés, donc sécurisés.
Les opérations peuvent être exécutées d’une autre manière et dans un ordre différent ; cela risque de prendre plus de temps et d’éviter certaines galères : j’en suis témoin. On verra par exemple que, suite à la création des fichiers de certificats, Certbot et/ou Apache génèrent eux même les fichiers de configurations que l’on peut accepter en l’état. De même, les sites sont validés automatiquement (a2ensite).
La procédure est la suivante :
- Création du fichier de configuration (alpha.conf) et activation du site. Tests.
- Génération les clés de certification SSL pour les sous domaines « alpha » et « www.alpha ».
- Constatation des fichiers générés suite aux actions de la phase précédente.
- Modification du fichier « alpha-le-ssl.conf » pour la prise en compte des deux sous domaines.
- Redémarrage du serveur Apache. Tests
4.1. Création du fichier de configuration (alpha.conf) et activation du site. Tests.
remi@vmi820488:/etc/apache2/sites-available$ sudo nano alpha.conf remi@vmi820488:/etc/apache2/sites-available$ cat alpha.conf <VirtualHost *:80> ServerAdmin admin@webodesign.com ServerName www.alpha.webodesign.net ServerAlias alpha.webodesign.net DocumentRoot /var/www/projets/01-site-alpha ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined </VirtualHost> remi@vmi820488:/etc/apache2/sites-available$ sudo a2ensite alpha.conf Enabling site alpha. To activate the new configuration, you need to run: systemctl reload apache2 remi@vmi820488:/etc/apache2/sites-available$ sudo systemctl reload apache2 remi@vmi820488:/etc/apache2/sites-available$ ll ../sites-enabled/ total 8 drwxr-xr-x 2 root root 4096 Jan 5 13:47 ./ drwxr-xr-x 8 root root 4096 Jan 5 13:32 ../ lrwxrwxrwx 1 root root 42 Dec 29 22:19 000-default-le-ssl.conf -> ../sites-available/000-default-le-ssl.conf lrwxrwxrwx 1 root root 35 Dec 29 22:19 000-default.conf -> ../sites-available/000-default.conf lrwxrwxrwx 1 root root 29 Jan 5 13:29 alpha.conf -> ../sites-available/alpha.conf
Commentaires :
- Ligne 1 : Création avec l’éditeur «
nano
» du fichier de configuration"alpha.conf"
- Ligne 2 : Vérification visuelle du fichier créé
- Ligne 12 : Validation/chargement du site (prise en charge du port 80)
- Ligne 18 : Mise à jour du serveur Apache
- Ligne 25 : On vérifie que le site est bien validé.
Test dans un navigateur internet. Charger les pages suivantes :
- http://alpha.webodesign.net/
- http://www.alpha.webodesign.net/
Les deux page doivent se charger en mode non sécurisé.
4.2. Génération les clés de certification SSL pour les sous domaines « alpha
» et « www.alpha
«
remi@vmi820488:/etc/apache2/sites-available$ sudo certbot --apache Saving debug log to /var/log/letsencrypt/letsencrypt.log Plugins selected: Authenticator apache, Installer apache Which names would you like to activate HTTPS for? - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1: alpha.webodesign.net 2: www.alpha.webodesign.net 3: www.webodesign.net - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Select the appropriate numbers separated by commas and/or spaces, or leave input blank to select all options shown (Enter 'c' to cancel): 1 Requesting a certificate for alpha.webodesign.net Created an SSL vhost at /etc/apache2/sites-available/alpha-le-ssl.conf Deploying Certificate to VirtualHost /etc/apache2/sites-available/alpha-le-ssl.conf Enabling available site: /etc/apache2/sites-available/alpha-le-ssl.conf Redirecting vhost in /etc/apache2/sites-enabled/alpha.conf to ssl vhost in /etc/apache2/sites-available/alpha-le-ssl.conf - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Congratulations! You have successfully enabled https://alpha.webodesign.net - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - IMPORTANT NOTES: - Congratulations! Your certificate and chain have been saved at: /etc/letsencrypt/live/alpha.webodesign.net/fullchain.pem Your key file has been saved at: /etc/letsencrypt/live/alpha.webodesign.net/privkey.pem Your certificate will expire on 2023-04-05. To obtain a new or tweaked version of this certificate in the future, simply run certbot again with the "certonly" option. To non-interactively renew *all* of your certificates, run "certbot renew" - If you like Certbot, please consider supporting our work by: Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate Donating to EFF: https://eff.org/donate-le remi@vmi820488:/etc/apache2/sites-available$ sudo certbot --apache Saving debug log to /var/log/letsencrypt/letsencrypt.log Plugins selected: Authenticator apache, Installer apache Which names would you like to activate HTTPS for? - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1: alpha.webodesign.net 2: www.alpha.webodesign.net 3: www.webodesign.net - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Select the appropriate numbers separated by commas and/or spaces, or leave input blank to select all options shown (Enter 'c' to cancel): 2 Requesting a certificate for www.alpha.webodesign.net Deploying Certificate to VirtualHost /etc/apache2/sites-enabled/alpha-le-ssl.conf Enhancement redirect was already set. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Congratulations! You have successfully enabled https://www.alpha.webodesign.net - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - IMPORTANT NOTES: - Congratulations! Your certificate and chain have been saved at: /etc/letsencrypt/live/www.alpha.webodesign.net/fullchain.pem Your key file has been saved at: /etc/letsencrypt/live/www.alpha.webodesign.net/privkey.pem Your certificate will expire on 2023-04-05. To obtain a new or tweaked version of this certificate in the future, simply run certbot again with the "certonly" option. To non-interactively renew *all* of your certificates, run "certbot renew" - If you like Certbot, please consider supporting our work by: Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate Donating to EFF: https://eff.org/donate-le remi@vmi820488:/etc/apache2/sites-available$
Commentaires :
- Ligne 1 : On exécute le programme « Certbot » avec la commande
"sudo certbot --apache"
- Ligne 12 : On demande les clé pour le sous-domaine «
alpha
« - Ligne 20 : victoire -> «
Congratulations! You have successfully enabled https://alpha.webodesign.net
« - Ligne 37 : On exécute à nouveau le programme « Certbot » avec la commande
"sudo certbot --apache"
- Ligne 48 : On demande les clé pour le sous-domaine « www.
alpha
« - Ligne 54 : victoire -> «
Congratulations! You have successfully enabled https://www.alpha.webodesign.net
«
4.3. Constatation des fichiers générés suite aux actions de la phase précédente
remi@vmi820488:/etc/apache2/sites-available$ ll total 44 drwxr-xr-x 2 root root 4096 Jan 5 13:32 ./ drwxr-xr-x 8 root root 4096 Jan 5 13:32 ../ -rw-r--r-- 1 root root 1694 May 16 2022 000-default-le-ssl.conf -rw-r--r-- 1 root root 1468 May 16 2022 000-default.conf -rw-r--r-- 1 root root 534 Jan 5 13:32 alpha-le-ssl.conf -rw-r--r-- 1 root root 485 Jan 5 13:32 alpha.conf remi@vmi820488:/etc/apache2/sites-available$ cat alpha-le-ssl.conf <IfModule mod_ssl.c> <VirtualHost *:443> ServerAdmin admin@webodesign.com ServerName www.alpha.webodesign.net ServerAlias alpha.webodesign.net DocumentRoot /var/www/projets/01-site-alpha ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined Include /etc/letsencrypt/options-ssl-apache.conf SSLCertificateFile /etc/letsencrypt/live/www.alpha.webodesign.net/fullchain.pem SSLCertificateKeyFile /etc/letsencrypt/live/www.alpha.webodesign.net/privkey.pem </VirtualHost> </IfModule> remi@vmi820488:/etc/apache2/sites-available$ cat alpha.conf <VirtualHost *:80> ServerAdmin admin@webodesign.com ServerName www.alpha.webodesign.net ServerAlias alpha.webodesign.net DocumentRoot /var/www/projets/01-site-alpha ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined RewriteEngine on RewriteCond %{SERVER_NAME} =www.alpha.webodesign.net [OR] RewriteCond %{SERVER_NAME} =alpha.webodesign.net RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent] </VirtualHost>
Commentaires :
- Ligne 7 : On constate que le fichier «
alpha-le-ssl.conf
» a été généré - Ligne 10: On commande la visualisation du fichier généré
- Ligne 13 à 16 : Le fichier correspond au sous-domaine « www.alpha » et les informations générées sont correctes.
Remarque : je pense que, lors de la deuxième exécution de Certbot, le fichier correspondant au sous-domaine « alpha » à été écrasé par celui du sous-domaine « www.alpha » - Ligne 21 et 22 : Les clés « fullchain.pem et privkey.pem » ont été créées. Leur emplacement de stockage correspond bien au sous-domaine « www.alpha »
- Ligne 26 : On visualise le fichier « alpha.conf » et on s’aperçoit qu’il a été également modifié : des commandes de réécriture ont été ajoutées
- Ligne 34 à 37 : Les adresses utilisant le protocole « http » sont automatiquement redirigées vers le protocole « https » : génial !
4.4. Modification du fichier « alpha-le-ssl.conf
«
On c’était rendu compte que les paramètres de configuration du « virtualhost » correspondant au sous-domaine « alpha » avaient été écrasés. C’est très simple de les ajouter car ils sont quasiment identique au sous-domaine « www.alpha » : seul les « www. » sont à ajouter (ne pas oublier d’adapter le nom de dossier des clés du certificat).
remi@vmi820488:/etc/apache2/sites-available$ sudo nano alpha-le-ssl.conf remi@vmi820488:/etc/apache2/sites-available$ cat alpha-le-ssl.conf <IfModule mod_ssl.c> <VirtualHost *:443> ServerAdmin admin@webodesign.com ServerName alpha.webodesign.net ServerAlias alpha.webodesign.net DocumentRoot /var/www/projets/01-site-alpha ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined Include /etc/letsencrypt/options-ssl-apache.conf SSLCertificateFile /etc/letsencrypt/live/alpha.webodesign.net/fullchain.pem SSLCertificateKeyFile /etc/letsencrypt/live/alpha.webodesign.net/privkey.pem </VirtualHost> </IfModule> <IfModule mod_ssl.c> <VirtualHost *:443> ServerAdmin admin@webodesign.com ServerName www.alpha.webodesign.net ServerAlias www.alpha.webodesign.net DocumentRoot /var/www/projets/01-site-alpha ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined Include /etc/letsencrypt/options-ssl-apache.conf SSLCertificateFile /etc/letsencrypt/live/www.alpha.webodesign.net/fullchain.pem SSLCertificateKeyFile /etc/letsencrypt/live/www.alpha.webodesign.net/privkey.pem </VirtualHost> </IfModule>
4.5. Redémarrage du serveur Apache. Tests
Test dans un navigateur internet. Charger toutes les combinaisons d’adresses afin de vérifier que tout fonctionne correctement :
Adresse saisie dans le navigateur | Adresse réécrite ou non |
---|---|
http://alpha.webodesign.net/ | https://alpha.webodesign.net/ |
http://www.alpha.webodesign.net/ | https://www.alpha.webodesign.net/ |
alpha.webodesign.net/ | https://alpha.webodesign.net/ |
www.alpha.webodesign.net/ | https://www.alpha.webodesign.net/ |
https://alpha.webodesign.net/ | https://alpha.webodesign.net/ |
https://www.alpha.webodesign.net/ | https://www.alpha.webodesign.net/ |
5. Configurations du site « alpha » (fichiers de conf et .htaccess)
On va réaliser les actions suivantes :
- Rediriger certaines erreurs (type 404) vers des pages personnalisées,
- Mettre en place une demande d’authentification pour accéder au site,
- Accroitre la sécurité du serveur Apache,
- Étudier les redirections.
5.1. Redirection d’erreurs
Nous utilisons la directive ErrorDocument pour associer chaque type d’erreur à une page d’erreur associée. Elle est définie dans l’hôte virtuel sécurisé du sous-domaine « alpha ». Fondamentalement, nous devons simplement mapper le code d’état http pour chaque erreur que nous voulons traiter lorsqu’elle se produit.
<VirtualHost *:443>
...
ErrorDocument 404 /custom_404.html
...
</VirtualHost>
5.2. Demande d’authentification
5.2.1. Configuration de l’authentification avec un fichier .htaccess
# Texte affiche dans la fenetre d'authentification login/password
AuthName "Zone admin"
# Définition du type d'authentification proposé
AuthType Basic
# Chemin menant au fichier .htpasswd
AuthUserFile /var/www/.../.htpasswd
# N'acceptera que des utilisateurs déclarés et autorisés
Require valid-user
5.2.2. Configuration de l’authentification dans le fichier "nomsousdom.conf"
<IfModule mod_ssl.c>
<VirtualHost *:443>
ServerAdmin adr@email.com
ServerName nom-domaine
ServerAlias nom-domaine
DocumentRoot /var/www/nom-access-root
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
<Directory "/chemin">
Options -Indexes
AuthType Basic
AuthName "Demande d'authentication"
AuthUserFile "/chemin_vers_fic_passwd/nom-fic-passwd"
<RequireAll>
Require expr %{TIME_HOUR} -gt 1 && %{TIME_HOUR} -lt 23
Require valid-user
</RequireAll>
</Directory>
Include /chemin-vers/options-ssl.conf
SSLCertificateFile /chemin/fullchain.pem
SSLCertificateKeyFile /chemin/privkey.pem
ErrorDocument 404 /404.html
<Files "404.html">
<If "-z %{ENV:REDIRECT_STATUS}">
RedirectMatch 404 ^/404_autre.html$
</If>
</Files>
</VirtualHost>
</IfModule>
5.2.3. Création du fichier .htpasswd
A faire
5.2.4. Autres possibilités
A faire
5.3. Sécurisation du serveur Apache
A Faire
5.4. Utilisation des redirections
A Faire