GNU/Linux >> Tutoriels Linux >  >> Linux

Comment mettre en cache des fichiers statiques sur nginx

Ce tutoriel explique comment vous pouvez configurer nginx pour définir l'en-tête HTTP Expires et la directive max-age de l'en-tête HTTP Cache-Control des fichiers statiques (tels que les images, les fichiers CSS et Javascript) à une date future afin que ces fichiers seront mis en cache par les navigateurs de vos visiteurs. Cela permet d'économiser de la bande passante et d'accélérer l'affichage de votre site Web (si un utilisateur visite votre site une deuxième fois, les fichiers statiques seront extraits du cache du navigateur).

1 Remarque préliminaire

Je suppose que vous avez une configuration nginx fonctionnelle, par exemple. comme indiqué dans ce tutoriel : Installation de Nginx avec PHP 7 et MySQL 5.7 (LEMP) sur Ubuntu 16.04 LTS

2 Configuration de nginx

L'en-tête HTTP Expires peut être défini à l'aide de la directive expires qui peut être placée dans http {}, server {}, location {} ou une instruction if dans un bloc location {}. Habituellement, vous l'utiliserez dans un bloc d'emplacement pour vos fichiers statiques, par ex. comme suit :

location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}

Dans l'exemple ci-dessus, tous les fichiers .jpg, .jpeg, .png, .gif, .ico, .css et .js reçoivent un en-tête Expires avec une date de 365 jours dans le futur à partir de l'heure d'accès au navigateur. Par conséquent, vous devez vous assurer que le bloc location {} ne contient réellement que des fichiers statiques pouvant être mis en cache par les navigateurs.

Rechargez nginx après vos modifications :

/etc/init.d/nginx reload

Vous pouvez utiliser les paramètres d'heure suivants avec la directive expires :

  • off signifie que les en-têtes Expires et Cache-Control ne seront pas modifiés.
  • epoch définit l'en-tête Expires sur le 1er janvier 1970 00:00:01 GMT.
  • max définit l'en-tête Expires sur 31 décembre 2037 23:59:59 GMT, et l'âge maximal de Cache-Control sur 10 ans.
  • Une heure sans préfixe @ signifie une heure d'expiration relative à l'heure d'accès au navigateur. Un temps négatif peut être spécifié, ce qui définit l'en-tête Cache-Control sur no-cache. Exemple :expire 10j; ou expire 14w3d ;
  • Une heure avec un préfixe @ spécifie une expiration absolue de l'heure du jour, écrite sous la forme Hh ou Hh:Mm, où H est compris entre 0 et 24 et M entre 0 et 59. Exemple :expire @ 15:34 ;

Vous pouvez utiliser les unités de temps suivantes :

  • ms :millisecondes
  • s :secondes
  • m :minutes
  • h :heures
  • j : jours
  • w :semaines
  • M : mois (30 jours)
  • y :années (365 jours)

Exemples :1h30m pour une heure trente minutes, 1y6M pour un an et six mois.

Notez également que si vous utilisez un en-tête Expires futur lointain, vous devez modifier le nom de fichier du composant chaque fois que le composant change. C'est donc une bonne idée de versionner vos fichiers. Par exemple, si vous avez un fichier javascript.js et que vous souhaitez le modifier, vous devez ajouter un numéro de version au nom de fichier du fichier modifié (par exemple javascript-1.1.js) afin que les navigateurs doivent le télécharger. Si vous ne modifiez pas le nom du fichier, les navigateurs chargeront l'(ancien) fichier depuis leur cache.

Au lieu de baser l'en-tête Expires sur le temps d'accès du navigateur (par exemple, expire 10d ;), vous pouvez également le baser sur la date de modification d'un fichier (veuillez noter que cela ne fonctionne que pour les vrais fichiers qui sont stockés sur le disque dur ! ) en utilisant le mot clé modifié qui précède l'heure :

expires modified 10d;

3 Tests

Pour tester si votre configuration fonctionne, vous pouvez utiliser la fonction d'analyse du réseau des outils de développement dans le navigateur Firefox et accéder à un fichier statique via Firefox (par exemple une image). Dans la sortie Header, vous devriez maintenant voir un en-tête Expires et un en-tête Cache-Control avec une directive max-age (max-age contient une valeur en secondes, par exemple 31536000 correspond à un an dans le futur) :

  • nginx HttpHeadersModule :http://wiki.nginx.org/HttpHeadersModule

À propos de l'auteur

Falko Timme est le propriétaire de Timme Hosting (hébergement web nginx ultra-rapide). Il est le mainteneur principal de HowtoForge (depuis 2005) et l'un des principaux développeurs d'ISPConfig (depuis 2000). Il a également contribué au livre O'Reilly "Linux System Administration".


Linux
  1. Comment utiliser Nginx pour rediriger

  2. nginx - 413 Entité de requête trop grande

  3. Comment désactiver ETag dans NGINX

  4. Comment activer HTTP2 dans NGINX

  5. Comment définir les fichiers ouverts nginx max ?

Comment configurer le cache Nginx sur un serveur LAMP

Comment configurer le cache Nginx sur le serveur LEMP

Comment installer Nginx sur CentOS 7 ?

Comment installer NGINX sur Ubuntu 18.04

Comment trouver des fichiers dans Debian

Comment nettoyer les fichiers inutiles