Didacticiel - Configuration de la Mise en Cache du Navigateur Apache

Souhaitez-vous apprendre à configurer la fonctionnalité de cache du navigateur Apache? Dans ce tutoriel, nous allons vous montrer toutes les étapes nécessaires à la configuration de la fonctionnalité de mise en cache du navigateur Apache sur un ordinateur exécutant Ubuntu Linux.

• Version Ubuntu: 18.04.

Liste du Matériel:

La section suivante présente la liste du matériel utilisé pour créer ce didacticiel WordPress.

Tous les éléments matériels répertoriés ci-dessus sont disponibles sur le site Web d’Amazon.

WordPress Playlist:

Sur cette page, nous offrons un accès rapide à une liste de vidéos relatives à l’installation de WordPress.

Playlist

N’oubliez pas de vous abonner à notre chaîne youtube nommée FKIT.

Didacticiel Relatif à WordPress:

Sur cette page, nous offrons un accès rapide à une liste de tutoriels liés à l’installation de WordPress.

Liste de Tutoriels

Didacticiel – Configuration de la Mise en Cache du Navigateur Apache

Tout d’abord, vous devez installer le serveur Web Apache.

Sur la console Linux, utilisez les commandes suivantes pour installer Apache.

# apt-get update
# apt-get install apache2

Maintenant, vous devez activer les modules Apache suivants:

• mod_headers
• mod_expires

Utilisez les commandes suivantes pour activer mod_headers et mod_expires.

# a2enmod headers
# a2enmod expires

# systemctl restart apache2

Editez le fichier de configuration apache2.conf.

# vi /etc/apache2/apache2.conf

À la fin du fichier, entrez la configuration de mise en cache du navigateur souhaitée.

A titre d’exemple, voici notre configuration.

<IfModule mod_expires.c>
ExpiresActive On
FileETag None
ExpiresDefault « access plus 14 days »
ExpiresByType image/jpg « access plus 1 month »
ExpiresByType image/gif « access plus 1 month »
ExpiresByType image/jpeg « access plus 1 month »
ExpiresByType image/png « access plus 1 month »
ExpiresByType text/css « access plus 1 month »
ExpiresByType application/pdf « access plus 1 month »
ExpiresByType text/javascript « access plus 1 month »
ExpiresByType text/x-javascript « access plus 1 month »
ExpiresByType application/javascript « access plus 1 month »
ExpiresByType application/x-shockwave-flash « access plus 1 month »
ExpiresByType text/css « now plus 1 month »
ExpiresByType image/ico « access plus 1 month »
ExpiresByType image/x-icon « access plus 1 month »
ExpiresByType text/html « access plus 1 days »
</IfModule>

Pour activer la nouvelle configuration, vous devez redémarrer Apache.

# systemctl restart apache2

N’oubliez pas que vous devez spécifier la durée de mise en cache du navigateur souhaitée pour répondre à vos besoins.

Testing – Configuration de la Mise en Cache du Navigateur Apache

Pour tester la configuration du cache de votre navigateur, créons une page HTML de base avec une image.

# cd /var/www/html
# wget https://techexpert.tips/wp-content/uploads/2017/12/TechExpert-Logo-Small.png
# vi test.html

Voici le contenu du fichier test.html.

<html>
<body>
<h1>TEST header</h1><br>
<img src= »TechExpert-Logo-Small.png »>
</body>

</html>

Installez le logiciel requis pour tester la fonctionnalité de cache du navigateur Apache.

# apt-get update
# apt-get install wget curl

Utilisez la commande suivante pour tester la fonctionnalité de mise en cache du navigateur dans les documents HTML à l’aide de WGET.

N’oubliez pas que vous devez modifier 200.200.200.200 en adresse IP de votre serveur.

# wget -S http://200.200.200.200/test.html

Voici le résultat de la configuration du navigateur en cache avant notre configuration:

HTTP request sent, awaiting response…
HTTP/1.1 200 OK
Date: Fri, 14 Dec 2018 16:58:36 GMT
Server: Apache/2.4.29 (Ubuntu)
Last-Modified: Fri, 14 Dec 2018 16:19:49 GMT
ETag: « 64-57cfdcce7b707 »
Accept-Ranges: bytes
Content-Length: 100
Vary: Accept-Encoding
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html
Length: 100 [text/html]

Voici le résultat de la configuration du navigateur en cache après notre configuration:

HTTP request sent, awaiting response…
HTTP/1.1 200 OK
Date: Fri, 14 Dec 2018 17:05:04 GMT
Server: Apache/2.4.29 (Ubuntu)
Last-Modified: Fri, 14 Dec 2018 16:19:49 GMT
Accept-Ranges: bytes
Content-Length: 100
Cache-Control: max-age=86400
Expires: Sat, 15 Dec 2018 17:05:04 GMT
Vary: Accept-Encoding
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html
Length: 100 [text/html] Saving to: ‘test.html.3’

Comme vous pouvez le constater, notre configuration spécifie un cache journalier pour les documents HTML.

• ExpiresByType text / html « accès plus 1 jour »

Le résultat de WGET montre que le fichier HTML sera conservé jusqu’à demain.

• Expire le: samedi 15 décembre 2018 à 17h05h04 GMT

Utilisez la commande suivante pour tester la fonctionnalité de mise en cache du navigateur sur les images PNG à l’aide de CURL.

# curl -svo /dev/null http://200.200.200.200/TechExpert-Logo-Small.png

Voici le résultat de la configuration du navigateur en cache avant notre configuration:

* TCP_NODELAY set
* Connected to 34.220.19.99 (34.220.19.99) port 80 (#0)
> GET /TechExpert-Logo-Small.png HTTP/1.1
> Host: 34.220.19.99
> User-Agent: curl/7.58.0
> Accept: */*
>
< HTTP/1.1 200 OK
< Date: Fri, 14 Dec 2018 17:24:32 GMT
< Server: Apache/2.4.29 (Ubuntu)
< Last-Modified: Sat, 24 Nov 2018 02:49:53 GMT
< ETag: « 483-57b60277af640 »
< Accept-Ranges: bytes
< Content-Length: 1155
< Content-Type: image/png
<
{ [1155 bytes data]

Voici le résultat de la configuration du navigateur en cache après notre configuration:

* TCP_NODELAY set
* Connected to 34.220.19.99 (34.220.19.99) port 80 (#0)
> GET /TechExpert-Logo-Small.png HTTP/1.1
> Host: 34.220.19.99
> User-Agent: curl/7.58.0
> Accept: */*
>
< HTTP/1.1 200 OK
< Date: Fri, 14 Dec 2018 17:18:04 GMT
< Server: Apache/2.4.29 (Ubuntu)
< Last-Modified: Sat, 24 Nov 2018 02:49:53 GMT
< Accept-Ranges: bytes
< Content-Length: 1155
< Cache-Control: max-age=2592000
< Expires: Sun, 13 Jan 2019 17:18:04 GMT
< Content-Type: image/png
<
{ [1155 bytes data]

Comme vous pouvez le constater, notre configuration spécifie un cache d’un mois pour les images PNG.

• ExpiresByType image / png « accès plus 1 mois »

Le résultat CURL indique que le fichier PNG sera conservé jusqu’au 13 janvier.

• Expire le: dimanche 13 janvier 2019 à 17h18:04 GMT