MODELE : PAGE

TP: Ajout du site « Alpha » en tant que sous-domaine webOdesign

1. Présentation

<pre><code></code></pre>
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 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

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

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

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 :

  1. Création du fichier de configuration (alpha.conf) et activation du site. Tests.
  2. Génération les clés de certification SSL pour les sous domaines « alpha » et « www.alpha ».
  3. Constatation des fichiers générés suite aux actions de la phase précédente.
  4. Modification du fichier « alpha-le-ssl.conf » pour la prise en compte des deux sous domaines.
  5. 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 navigateurAdresse 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)

5. Configurations du site « alpha » (fichiers de configuration Apache 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

pre[class*="language-"].line-numbers {
	position: relative;
	padding-left: 3.8em;
	counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
	position: relative;
	white-space: inherit;
}

.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	font-size: 100%;
	left: -3.8em;
	width: 3em; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
	border-right: 1px solid #999;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.line-numbers-rows > span {
	display: block;
	counter-increment: linenumber;
}

.line-numbers-rows > span:before {
	content: counter(linenumber);
	color: #999;
	display: block;
	padding-right: 0.8em;
	text-align: right;
}