fced4930c1
- Updated author format in content files - Added section field to content files - Simplified categories format - Removed no-category.html layout - Updated list.html and single.html layouts - Updated index.html layout - Updated generate-content.js script - Do not index content with git
545 lines
53 KiB
Markdown
545 lines
53 KiB
Markdown
---
|
||
title: "Varnish : le comprendre et le configurer pour WordPress"
|
||
date: "2023-04-06T11:59:18"
|
||
draft: false
|
||
slug: "utiliser-configurer-varnish-wordpress"
|
||
wordpress_id: 5588
|
||
excerpt: "Varnish est un logiciel de mise en cache Web, open source qui accélère la distribution de contenu Web.…\n"
|
||
featured_image: "https://www.mistergeek.net/wp-content/uploads/2023/04/Varnish-cache.png"
|
||
author: "Kevin"
|
||
categories: ["Informatique"]
|
||
tags: []
|
||
section: "informatique"
|
||
---
|
||
|
||
</p>
|
||
</p>
|
||
<p><strong>Varnish est un logiciel de mise en cache Web, open source qui accélère la distribution de contenu Web</strong>. Il fonctionne en tant que reverse proxy, interceptant les requêtes des utilisateurs et stockant en mémoire cache les réponses renvoyées par le <a href="https://www.mistergeek.net/informatique/ipv6-serveur-scaleway-dedibox/">serveur</a> web d’origine. Cette mise en cache permet d’économiser des ressources sur le serveur et de réduire les temps de réponse pour les utilisateurs finaux. </p>
|
||
</p>
|
||
<p>Varnish Cache peut également être configuré pour effectuer des actions spécifiques par le biais de <a href="https://www.mistergeek.net/informatique/format-flac/">son</a> langage de configuration, comme par exemple la suppression de cookies ou la modification du <em>header</em> (en-tête) HTTP. Il est utilisé par de nombreux sites Web à fort trafic dans le monde, y compris des sites de médias sociaux, des sites d’e-commerce et des sites de contenu en ligne. Parmi les sites utilisant Varnish, nous pouvons par exemple citer askubuntu.com, getbootstrap.com ou encore asana.com. Cette liste n’est pas exhaustive, mais le but n’est de vous citer tous les sites qui utilisent Varnish.</p>
|
||
</p>
|
||
<p>Si vous êtes en quête d’un guide pour vous aider à installer et configurer Varnish, vous êtes au bon endroit. Vous découvrirez comment faire pour l’installer et l’utiliser en tant que reverse proxy avec Caddy, un serveur web. </p>
|
||
</p>
|
||
<p><div id="ez-toc-container" class="ez-toc-v2_0_75 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction">
|
||
<p class="ez-toc-title" style="cursor:inherit">Table of Contents</p>
|
||
<label for="ez-toc-cssicon-toggle-item-68a33a64bb281" class="ez-toc-cssicon-toggle-label"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></label><input type="checkbox" id="ez-toc-cssicon-toggle-item-68a33a64bb281" aria-label="Toggle" /><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Presentation_de_Varnish_Cache" >Présentation de Varnish Cache</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-2" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#La_mise_en_cache_quest-ce_que_cest" >La mise en cache qu’est-ce que c’est ?</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-3" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Objectifs_de_larticle" >Objectifs de l’article</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-4" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Les_avantages_de_Varnish_pour_la_mise_en_cache" >Les avantages de Varnish pour la mise en cache</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-5" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Reduction_de_la_charge_du_serveur" >Réduction de la charge du serveur</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-6" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Amelioration_des_temps_de_reponse" >Amélioration des temps de réponse</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-7" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Gestion_de_pics_de_trafic" >Gestion de pics de trafic</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-8" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Reduction_de_la_latence" >Réduction de la latence</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-9" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Comment_fonctionne_Varnish" >Comment fonctionne Varnish ?</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-10" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Architecture_avec_Varnish" >Architecture avec Varnish</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-11" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Mise_en_cache_amont_et_aval" >Mise en cache amont et aval</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-12" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Flux_de_requetes_et_de_reponses" >Flux de requêtes et de réponses</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-13" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Cas_dusage_pourquoi_utiliser_Varnish" >Cas d’usage : pourquoi utiliser Varnish ?</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-14" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Mise_en_cache_de_pages_Web" >Mise en cache de pages Web</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-15" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Mise_en_cache_de_fichiers_statiques" >Mise en cache de fichiers statiques</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-16" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Mise_en_cache_de_flux_de_donnees_dynamiques" >Mise en cache de flux de données dynamiques</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-17" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Installer_et_configurer_Caddy_Varnish_et_Nginx" >Installer et configurer Caddy, Varnish et Nginx</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-18" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Installer_Caddy_comme_serveur_web_frontal" >Installer Caddy comme serveur web frontal</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-19" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Installer_et_configurer_Varnish" >Installer et configurer Varnish</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-20" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Configurer_Varnish_Cache" >Configurer Varnish Cache</a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-21" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Configurer_Varnish_pour_ecouter_sur_la_bonne_interface_et_le_bon_port" >Configurer Varnish pour écouter sur la bonne interface et le bon port</a></li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-22" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Configurer_Varnish_pour_orienter_les_requetes_vers_le_serveur_web_dorigine" >Configurer Varnish pour orienter les requêtes vers le serveur web d’origine</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-23" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Configurer_le_serveur_web_dorigine_Nginx" >Configurer le serveur web d’origine (Nginx)</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-24" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Terminer_la_configuration" >Terminer la configuration</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-25" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Configurer_Varnish_pour_WordPress_avec_VCL" >Configurer Varnish pour WordPress avec VCL</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-26" href="https://www.mistergeek.net/informatique/utiliser-configurer-varnish-wordpress/#Conclusion" >Conclusion</a></li></ul></nav></div>
|
||
|
||
</p>
|
||
</p>
|
||
<h2 class="wp-block-heading"><span class="ez-toc-section" id="Presentation_de_Varnish_Cache"></span>Présentation de Varnish Cache<span class="ez-toc-section-end"></span></h2>
|
||
</p>
|
||
<p><strong>Varnish est un logiciel <em>open-source</em> de mise en cache HTTP réputé pour sa capacité à accélérer les sites Web à fort trafic</strong>. Il a été créé en 2005 par Poul-Henning Kamp et maintenu depuis lors par la Fondation Varnish. Varnish est utilisé par des sites Web tels que le New York Times, le Guardian, Vimeo et de nombreux autres. Son fonctionnement est basé sur la mise en cache en amont des requêtes et des réponses entre le serveur Web et le client, ce qui permet de réduire la charge du serveur d’origine, d’améliorer les temps de réponse et de gérer les pics de trafic. En outre, Varnish est hautement configurable grâce à son langage de configuration VCL, ce qui permet aux utilisateurs de personnaliser les paramètres de cache pour s’adapter à leurs besoins.</p>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="La_mise_en_cache_quest-ce_que_cest"></span>La mise en cache qu’est-ce que c’est ?<span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
<p>La mise en cache est une technique qui consiste à stocker une copie d’une ressource (page, image, script, etc.) afin de pouvoir la livrer au visiteur web de façon plus rapide. D’ailleurs, nous avons déjà rédigé un guide complet pour vous aider à comprendre les différents <a href="https://www.mistergeek.net/informatique/comment-cache-wordress/">types de cache qui existent sur Mistergeek</a>.</p>
|
||
</p>
|
||
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="480" height="220" src="https://www.mistergeek.net/wp-content/uploads/2023/04/nginx-php-mariadb.jpg" alt="Schéma de l'architecture d'une pile Web de WordPress" class="wp-image-5598" srcset="https://www.mistergeek.net/wp-content/uploads/2023/04/nginx-php-mariadb.jpg 480w, https://www.mistergeek.net/wp-content/uploads/2023/04/nginx-php-mariadb-300x138.jpg 300w, https://www.mistergeek.net/wp-content/uploads/2023/04/nginx-php-mariadb-380x174.jpg 380w" sizes="auto, (max-width: 480px) 100vw, 480px" /></figure>
|
||
</p>
|
||
<p>Lorsque vous visitez un site web, <strong>votre navigateur demande au serveur web de vous envoyer la page cible. Votre serveur va interroger WordPress (PHP), qui va lui même interroger votre base de données (MySQL ou MariaDB)</strong>. Une fois toutes les étapes terminées et les fichiers transmis à travers le réseau Internet, votre navigateur vous affiche la page. Ici, nous avons le circuit « classique ».</p>
|
||
</p>
|
||
<p>Avec la technique de mise en cache, votre navigateur sollicite moins votre serveur web et va puiser ses données depuis une copie en mémoire.</p>
|
||
</p>
|
||
<p>Il existe plusieurs types de caches :</p>
|
||
</p>
|
||
<ul class="wp-block-list">
|
||
<li>Le cache local (à votre navigateur par exemple), qui va garder les ressources utiles à l’affichage d’un site web (CSS, images, Javascript, polices, etc.) pour les restituer plus vite pour un affichage.</li>
|
||
</p>
|
||
<li><strong>Le<a href="/informatique"> cache serveur</a>, qui a la même fonction, mais sauvegarde vos pages WordPress</strong> pour éviter d’avoir à passer par le circuit classique (qui est plus plus long). C’est cette méthode que nous allons voir dans cet article.</li>
|
||
</ul>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="Objectifs_de_larticle"></span>Objectifs de l’article<span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
<p>L’objectif de cet article est de vous présenter Varnish cache avec une vue d’ensemble de ses fonctionnalités et des avantages à l’utiliser. Nous aborderons également une explication détaillée de son fonctionnement.</p>
|
||
</p>
|
||
<p>Nous discuterons de l’installation et de la configuration du logiciel de cache, de ses cas d’usage, de ses limites et de ses contraintes potentielles. Ainsi, nous espérons que cet article vous aidera à comprendre comment cet outil peut aider à améliorer les performances de votre site Web, à réduire la charge de votre serveur et offrir une expérience améliorée à vos utilisateurs.</p>
|
||
</p>
|
||
<h2 class="wp-block-heading"><span class="ez-toc-section" id="Les_avantages_de_Varnish_pour_la_mise_en_cache"></span>Les avantages de Varnish pour la mise en cache<span class="ez-toc-section-end"></span></h2>
|
||
</p>
|
||
<p>Dans cet partie de l’article, nous vous proposons de voir quels sont les avantages à utiliser Varnish pour propulser votre site Web.</p>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="Reduction_de_la_charge_du_serveur"></span>Réduction de la charge du serveur<span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
<p>Varnish est un logiciel de cache va <strong>réduire la charge émise sur votre serveur web</strong> (Nginx, Apache, Lighttpd, etc.). En effet, ce <em>software</em> agit comme un <em>proxy </em>et se place entre l’utilisateur votre serveur web. Grâce aux règles mises en place dans le logiciel de cache, certaines requêtes n’ont plus besoin de passer une étape de calcul et son servies depuis la mémoire. Cela a pour effet de diminuer la charge sur la pile technique de votre site Web (aussi bien WordPress avec PHP que NodeJS, Ruby on Rails, etc.).</p>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="Amelioration_des_temps_de_reponse"></span>Amélioration des temps de réponse<span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://www.mistergeek.net/wp-content/uploads/2023/04/cloudways-varnish.jpg" alt="Graphique illustrant la montée en charge de d'un site web avec et sans Varnish" class="wp-image-5600" width="750" height="392" srcset="https://www.mistergeek.net/wp-content/uploads/2023/04/cloudways-varnish.jpg 750w, https://www.mistergeek.net/wp-content/uploads/2023/04/cloudways-varnish-300x157.jpg 300w, https://www.mistergeek.net/wp-content/uploads/2023/04/cloudways-varnish-380x199.jpg 380w" sizes="auto, (max-width: 750px) 100vw, 750px" /><figcaption class="wp-element-caption">Exemple de temps de réponse avec et sans Varnish (source: Cloudways)</figcaption></figure>
|
||
</p>
|
||
<p><strong>La grande majorité des requêtes de WordPress nécessitent de passer par une suite complexe de fonctions. </strong>Ces fonctions vont aller chercher les données dans la base de données, gérer la connexion de l’utilisateur ou encore générer la page HTML. Or, du point de vue de l’utilisateur, ces fonctions prennent du temps (même si ce n’est parfois que quelques millisecondes). En outre-passant ces fonctions et en livrant directement qu’une page « statique » issue du cache aux utilisateurs, vous pouvez réduire le temps de réponse de votre site.</p>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="Gestion_de_pics_de_trafic"></span>Gestion de pics de trafic<span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
</p>
|
||
<p>Lors de pics de traffic (comme sur les sites de e-commerce), il n’est pas rare de surcharger les serveurs et d’avoir des sites qui mettent du temps à répondre, voire même qui retournent des erreurs. Mettre en cache les requêtes permet de réduire la charge lors d’un pic de visites. Par la même occasion cela peut vous éviter de perdre du chiffre d’affaires à cause d’un site ne répondant plus aux demandes.</p>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="Reduction_de_la_latence"></span>Réduction de la latence<span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
<figure class="wp-block-image aligncenter size-large is-resized"><img loading="lazy" decoding="async" src="https://www.mistergeek.net/wp-content/uploads/2023/04/serveur-datacenter-576x1024.jpg" alt="Photo d'une salle de serveurs." class="wp-image-5602" width="323" height="574" srcset="https://www.mistergeek.net/wp-content/uploads/2023/04/serveur-datacenter-576x1024.jpg 576w, https://www.mistergeek.net/wp-content/uploads/2023/04/serveur-datacenter-169x300.jpg 169w, https://www.mistergeek.net/wp-content/uploads/2023/04/serveur-datacenter-768x1365.jpg 768w, https://www.mistergeek.net/wp-content/uploads/2023/04/serveur-datacenter-864x1536.jpg 864w, https://www.mistergeek.net/wp-content/uploads/2023/04/serveur-datacenter-1152x2048.jpg 1152w, https://www.mistergeek.net/wp-content/uploads/2023/04/serveur-datacenter-380x676.jpg 380w, https://www.mistergeek.net/wp-content/uploads/2023/04/serveur-datacenter-800x1422.jpg 800w, https://www.mistergeek.net/wp-content/uploads/2023/04/serveur-datacenter-1160x2062.jpg 1160w, https://www.mistergeek.net/wp-content/uploads/2023/04/serveur-datacenter-scaled.jpg 1440w" sizes="auto, (max-width: 323px) 100vw, 323px" /><figcaption class="wp-element-caption">Pour les sites à fort trafic réduire la charge des serveurs est important.</figcaption></figure>
|
||
</p>
|
||
<p>Avec un cache les ressources de votre sites gardées au chaud. En mettant en cache les réponses du serveur, Varnish peut servir ces réponses directement à partir de sa mémoire cache plutôt que d’avoir à attendre le serveur web d’origine. À la première demande le cache va se charger, ce qui permet aux demandes suivantes d’être traitées plus vites. Le visiteur ressent donc une latence plus faible, ce qui bénéfique pour vos utilisateurs, mais aussi pour votre indexation par les moteurs de recherche.</p>
|
||
</p>
|
||
<p>Il est aussi possible d’utiliser Varnish pour faire du CDN (<em>Content Delivery Network</em>). Cela consiste à héberger des instances dans divers pays et au plus proche des utilisateurs. Cela peut considérablement réduire le temps de réponse pour les utilisateurs qui accèdent au site web à partir de diverses parties du monde, car les données sont fournies plus rapidement et plus efficacement.</p>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="Comment_fonctionne_Varnish"></span>Comment fonctionne Varnish ?<span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="710" height="300" src="https://www.mistergeek.net/wp-content/uploads/2023/04/varnish-cache-1.png" alt="Schéma illustrant le logo de Varnish." class="wp-image-5599" srcset="https://www.mistergeek.net/wp-content/uploads/2023/04/varnish-cache-1.png 710w, https://www.mistergeek.net/wp-content/uploads/2023/04/varnish-cache-1-300x127.png 300w, https://www.mistergeek.net/wp-content/uploads/2023/04/varnish-cache-1-380x161.png 380w" sizes="auto, (max-width: 710px) 100vw, 710px" /><figcaption class="wp-element-caption">Varnish est un formidable outil pour accélérer les sites web</figcaption></figure>
|
||
</p>
|
||
</p>
|
||
<p>Nous l’avons déjà un peu expliqué au dessus, cependant nous allons faire ici une explication détaillée du fonctionnement de Varnish.</p>
|
||
</p>
|
||
<p>Vous le savez peut-être déjà, Varnish fonctionne en interceptant les requêtes entre le client et le serveur web, et en stockant les réponses du serveur dans sa mémoire cache. Lorsqu’un utilisateur effectue une demande pour une URL, il vérifie d’abord si elle existe en mémoire. Si la ressource est disponible en cache, il la renvoie directement au client, sans avoir besoin de passer par le serveur Web d’origine. Si la ressource n’est pas en cache, Varnish transmet la requête au serveur Web d’origine pour récupérer la réponse et stocke celle-ci dans en mémoire pour une utilisation ultérieure. En somme, Varnish n’est ni plus ni moins qu’un logiciel intermédiaire entre le client et l’application Web avec une mise en mémoire du contenu.</p>
|
||
</p>
|
||
<p>Pour fonctionner l’outil utilise également un langage de configuration appelé VCL (pour « <em>Varnish Configuration Language</em>« ) qui permet aux utilisateurs de personnaliser les règles de mise en cache et les stratégies de purge (pour vider la mémoire). Les utilisateurs peuvent configurer des règles pour spécifier quelles ressources doivent être gardées en mémoire et pour combien de temps.</p>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="Architecture_avec_Varnish"></span>Architecture avec Varnish<span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="751" height="231" src="https://www.mistergeek.net/wp-content/uploads/2023/04/architecture-varnish.png" alt="Schéma de l'architecture en couches de Varnish Cache" class="wp-image-5601" srcset="https://www.mistergeek.net/wp-content/uploads/2023/04/architecture-varnish.png 751w, https://www.mistergeek.net/wp-content/uploads/2023/04/architecture-varnish-300x92.png 300w, https://www.mistergeek.net/wp-content/uploads/2023/04/architecture-varnish-380x117.png 380w" sizes="auto, (max-width: 751px) 100vw, 751px" /><figcaption class="wp-element-caption">Varnish se place au milieu de votre infrastructure pour mettre en mémoire les requêtes des clients.</figcaption></figure>
|
||
</p>
|
||
<p>L’architecture de Varnish est basée sur un modèle client-serveur, dans lequel le serveur Varnish agit comme un proxy inverse entre l’utilisateur et le serveur Web d’origine. Le serveur Varnish reçoit les requêtes HTTP du client, les analyse et vérifie si la réponse est en cache. Selon les règles à sa disposition Varnish va alors décider de renvoyer la requête mise en cache ou de faire appel au serveur Web d’Origine.</p>
|
||
</p>
|
||
<p>L’architecture de Varnish est conçue pour être hautement extensible et configurable.<strong> Les utilisateurs peuvent personnaliser les paramètres de cache et de purge en utilisant VCL</strong> (<em>Varnish Configuration Language</em>). De plus, Varnish utilise une architecture modulaire qui permet aux utilisateurs de créer des modules personnalisés pour ajouter des fonctionnalités supplémentaires. Par exemple, des modules peuvent être créés pour ajouter une fonctionnalité de compression ou pour gérer des requêtes SSL/TLS.</p>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="Mise_en_cache_amont_et_aval"></span>Mise en cache amont et aval<span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
<p>En utilisant la mise en cache en amont, Varnish peut intercepter les requêtes et vérifier si les réponses sont déjà en cache. Si tel est le cas, Varnish peut la renvoyer directement au client, sans avoir besoin de contacter le serveur web d’origine.</p>
|
||
</p>
|
||
<p>La mise en cache en aval permet à Varnish Cache de mettre en cache les réponses du serveur web d’origine. Cela signifie que si un serveur web en aval renvoie une réponse, Varnish peut la stocke pour une utilisation future. Lorsque le même contenu est demandé à nouveau, Varnish va pour les demandes futures, renvoyer directement le contenu.</p>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="Flux_de_requetes_et_de_reponses"></span>Flux de requêtes et de réponses<span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="627" height="231" src="https://www.mistergeek.net/wp-content/uploads/2023/04/varnish.jpg" alt="Schéma du flux de requêtes et de réponses typique entre un client, Varnish Cache et un serveur web" class="wp-image-5596" srcset="https://www.mistergeek.net/wp-content/uploads/2023/04/varnish.jpg 627w, https://www.mistergeek.net/wp-content/uploads/2023/04/varnish-300x111.jpg 300w, https://www.mistergeek.net/wp-content/uploads/2023/04/varnish-380x140.jpg 380w" sizes="auto, (max-width: 627px) 100vw, 627px" /><figcaption class="wp-element-caption">Utiliser un reverse proxy implique de comprendre le flux de requêtes.</figcaption></figure>
|
||
</p>
|
||
<p>Lorsqu’un client envoie une requête HTTP, elle est interceptée par Varnish Cache. Varnish vérifie d’abord si la réponse est disponible en cache. Si oui, il renvoie la réponse directement au client. Si non, Varnish transmet la requête au serveur web.</p>
|
||
</p>
|
||
<p>Il faut noter que le comportement de Varnish dépend fortement de la configuration appliquée. D’un site à l’autre la configuration peut-être différente.</p>
|
||
</p>
|
||
<h2 class="wp-block-heading"><span class="ez-toc-section" id="Cas_dusage_pourquoi_utiliser_Varnish"></span>Cas d’usage : pourquoi utiliser Varnish ?<span class="ez-toc-section-end"></span></h2>
|
||
</p>
|
||
<p>Varnish peut remplir différentes fonctions. En tant que logiciel destiné au Web, il peut être utilisé aussi bien pour de la mise en cache, que de la <a href="https://www.mistergeek.net/vpn/nordvpn/">protection</a>.</p>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="Mise_en_cache_de_pages_Web"></span>Mise en cache de pages Web<span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="683" src="https://www.mistergeek.net/wp-content/uploads/2023/04/site-wordpress-1024x683.jpg" alt="Photo d'un écran avec WordPress." class="wp-image-5603" srcset="https://www.mistergeek.net/wp-content/uploads/2023/04/site-wordpress-1024x683.jpg 1024w, https://www.mistergeek.net/wp-content/uploads/2023/04/site-wordpress-300x200.jpg 300w, https://www.mistergeek.net/wp-content/uploads/2023/04/site-wordpress-768x512.jpg 768w, https://www.mistergeek.net/wp-content/uploads/2023/04/site-wordpress-1536x1024.jpg 1536w, https://www.mistergeek.net/wp-content/uploads/2023/04/site-wordpress-2048x1365.jpg 2048w, https://www.mistergeek.net/wp-content/uploads/2023/04/site-wordpress-380x253.jpg 380w, https://www.mistergeek.net/wp-content/uploads/2023/04/site-wordpress-800x533.jpg 800w, https://www.mistergeek.net/wp-content/uploads/2023/04/site-wordpress-1160x773.jpg 1160w, https://www.mistergeek.net/wp-content/uploads/2023/04/site-wordpress-scaled.jpg 2560w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">Varnish permet d’accélérer un site web WordPress de manière efficace.</figcaption></figure>
|
||
</p>
|
||
</p>
|
||
<p>Le gros sujet de cet article est bien sûr la mise en cache de pages Web. Au lieu de générer la même page à chaque nouvel utilisateur, Varnish peut servir à garder en mémoire ces pages. Ici, tout est fait pour réduire la charge sur votre site web tout en assurant une meilleur disponibilité. Ainsi, pour un article très demandé cela peut éviter à votre site de renvoyer une réponse d’erreur.</p>
|
||
</p>
|
||
<h3 class="wp-block-heading">Mise en cache de fichiers statiques<br /></h3>
|
||
</p>
|
||
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="697" height="570" src="https://www.mistergeek.net/wp-content/uploads/2023/04/Capture-decran-2023-04-06-a-11.47.49.png" alt="Console avec une liste de fichiers statiques." class="wp-image-5605" srcset="https://www.mistergeek.net/wp-content/uploads/2023/04/Capture-decran-2023-04-06-a-11.47.49.png 697w, https://www.mistergeek.net/wp-content/uploads/2023/04/Capture-decran-2023-04-06-a-11.47.49-300x245.png 300w, https://www.mistergeek.net/wp-content/uploads/2023/04/Capture-decran-2023-04-06-a-11.47.49-380x311.png 380w" sizes="auto, (max-width: 697px) 100vw, 697px" /><figcaption class="wp-element-caption">Exemples de fichiers statiques sur un serveur web</figcaption></figure>
|
||
</p>
|
||
<p>En plus de vos pages Web, votre site possède également ce qu’on appelle des « fichiers statiques ». Cela comprend les images, les scripts (js), les vidéos ou encore les feuilles CSS (pour le style de votre page). À chaque sur WordPress plusieurs fichiers statiques sont demandées. Chaque requête supplémentaire alourdi le temps de réponse et oblige votre serveur web à récupérer ces fichiers sur disque dur. Vous pouvez utiliser un logiciel de cache comme Varnish pour garder ces fichiers en mémoire. En réduisant ainsi les accès au disque dur, vous gagnez de précieuses millisecondes. Pratique si vous avez un site de e-commerce avec beaucoup de visites.</p>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="Mise_en_cache_de_flux_de_donnees_dynamiques"></span>Mise en cache de flux de données dynamiques<span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
<p>Si votre site web dispose d’un API par exemple, les données de réponses peuvent être mises en cache. Lorsque vous faites des requêtes sur des données qui ne vont pas varier, cela peut être judicieux d’utiliser du cache. C’est d’autant plus vrai si ces données sont externes ou que vous êtes limité en nombre de requêtes.</p>
|
||
</p>
|
||
<h2 class="wp-block-heading"><span class="ez-toc-section" id="Installer_et_configurer_Caddy_Varnish_et_Nginx"></span>Installer et configurer Caddy, Varnish et Nginx<span class="ez-toc-section-end"></span></h2>
|
||
</p>
|
||
<p>Historiquement cet article devait vous aider à installer Varnish et le configurer pour être utilisé avec Nginx ou Apache. Nous avons décidé de donner une autre direction technique à celui-ci pour faciliter l’interprétation de ces lignes.</p>
|
||
</p>
|
||
<p>Étant donné que Varnish ne supporte par défaut pas le SSL/TLS, cela rendait la configuration complexe. Nous avons décidé de privilégier l’installation de trois logiciels : Caddy, Varnish et Nginx. Ainsi, Caddy collectera les requêtes des clients pour les transférer à Varnish qui selon sa logique transmettra (ou non) la requête au serveur Nginx avec WordPress.</p>
|
||
</p>
|
||
<p>À la fin de article, vous aurez toutes les compétences nécessaires pour mettre sur pied votre propre installation avec Caddy. De plus vous pourrez utiliser Varnish en tant que cache HTTP et Nginx avec le moteur PHP pour WordPress. Vous aurez également une configuration permettant d’optimiser votre site web pour de la mise en cache Varnish.</p>
|
||
</p>
|
||
<p>Nous utilisons pour les besoins de cet article la dernière version stable d’Ubuntu, à savoir la 22.04. Nous utilisons les dépôts officiels pour récupérer les paquets lorsque cela est possible.</p>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="Installer_Caddy_comme_serveur_web_frontal"></span>Installer Caddy comme serveur web frontal<span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="960" height="400" src="https://www.mistergeek.net/wp-content/uploads/2023/04/caddy-serveur-web.png.webp" alt="Logo de Caddy, serveur web codé en Go" class="wp-image-5604" srcset="https://www.mistergeek.net/wp-content/uploads/2023/04/caddy-serveur-web.png.webp 960w, https://www.mistergeek.net/wp-content/uploads/2023/04/caddy-serveur-web.png-300x125.webp 300w, https://www.mistergeek.net/wp-content/uploads/2023/04/caddy-serveur-web.png-768x320.webp 768w, https://www.mistergeek.net/wp-content/uploads/2023/04/caddy-serveur-web.png-380x158.webp 380w, https://www.mistergeek.net/wp-content/uploads/2023/04/caddy-serveur-web.png-800x333.webp 800w" sizes="auto, (max-width: 960px) 100vw, 960px" /><figcaption class="wp-element-caption">Caddy est un très bon frontal web</figcaption></figure>
|
||
</p>
|
||
</p>
|
||
<p>À cette étape de l’article nous allons ajouter un nouveau serveur web : Caddy. Il est codé en Go et automatise l’obtention des certificats SSL/TLS avec Let’s Encrypt. Sa configuration est simple et c’est un logiciel performant pour des sites de petite ou de moyenne taille.</p>
|
||
</p>
|
||
<p>Pour installer Caddy, nous allons utiliser la <a href="https://caddyserver.com/docs/install" rel="nofollow">documentation officielle</a>.</p>
|
||
</p>
|
||
<p>Exécuter les commandes suivantes sur Ubuntu :</p>
|
||
</p>
|
||
<pre class="wp-block-code"><code># Installer les paquets nécessaires
|
||
sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https curl
|
||
|
||
# Récupèrer la <a href="https://www.mistergeek.net/informatique/etcher-creer-une-cle-usb-bootable-windows-ou-linux/">clé</a> GPG et l'ajoute à aptitude
|
||
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
|
||
|
||
# Ajouter les depots officiels
|
||
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
|
||
|
||
# Mettre à jour les dépôts
|
||
sudo apt update
|
||
|
||
# Installer Caddy
|
||
sudo apt install caddy</code></pre>
|
||
</p>
|
||
<p>Selon votre pile technique actuelle, Caddy ne pourra (peut-être) pas démarrer car un serveur web écoute sur le port 80. Nous allons malgré tout le configurer en avance de phase.</p>
|
||
</p>
|
||
<p>Editer la configuration de Caddy pour votre site avec votre éditeur de texte :</p>
|
||
</p>
|
||
<pre class="wp-block-code"><code>sudo vim /etc/caddy/Caddyfile</code></pre>
|
||
</p>
|
||
<p>Nous allons ajouter les lignes suivantes :</p>
|
||
</p>
|
||
<pre class="wp-block-code"><code># Configuration à adapter selon votre site web
|
||
mistergeek.net,
|
||
www.mistergeek.net {
|
||
log {
|
||
output file /var/log/caddy/mistergeek.net.log
|
||
}
|
||
reverse_proxy localhost:8080 # Destination vers Varnish qui écoutera sur le port 8080
|
||
}</code></pre>
|
||
</p>
|
||
<p>Une fois que c’est fait nous pouvons relancer Caddy avec <code>systemctl restart caddy</code></p>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="Installer_et_configurer_Varnish"></span>Installer et configurer Varnish<span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
<p>Dans cette partie de l’article, nous allons voir comment faire pour installer Varnish et procéder à sa configuration.</p>
|
||
</p>
|
||
<p>Installer Varnish :</p>
|
||
</p>
|
||
<pre class="wp-block-code"><code># Met à jour les dépots Ubuntu
|
||
sudo apt-get update
|
||
|
||
# Installe Varnish
|
||
sudo apt-get install varnish
|
||
|
||
# Pour démarrer le serveur Varnish (mais non configuré pour le moment)
|
||
systemctl start varnish</code></pre>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="Configurer_Varnish_Cache"></span>Configurer Varnish Cache<span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
<p>Ici nous allons voir comment sommairement configurer Varnish pour préparer notre cache.</p>
|
||
</p>
|
||
<h4 class="wp-block-heading"><span class="ez-toc-section" id="Configurer_Varnish_pour_ecouter_sur_la_bonne_interface_et_le_bon_port"></span>Configurer Varnish pour écouter sur la bonne interface et le bon port<span class="ez-toc-section-end"></span></h4>
|
||
</p>
|
||
<p>Sur les anciennes versions de Varnish (4.x et inférieur), la configuration du port d’écoute se faisait grâce au fichier <code>/etc/default/varnish</code> qui était le fichier de configuration qui regroupe les options de lancement de Varnish.</p>
|
||
</p>
|
||
<p>On peut toujours y lire le contenu ci-dessous, mais modifier ces lignes, ne changera rien au comportement de votre logiciel. En effet sur les dernières versions, la configuration se fait depuis <code>systemd</code>.</p>
|
||
</p>
|
||
<pre class="wp-block-code"><code>DAEMON_OPTS="-a :6081 \ # Port d'écoute externe
|
||
-T localhost:6082 \ # Port d'écoute pour l'administration Varnish
|
||
-f /etc/varnish/default.vcl \ # Fichier de configuration à utiliser
|
||
-S /etc/varnish/secret \ # Liste des secrets
|
||
-s malloc,256m" # Utilisation mémoire</code></pre>
|
||
</p>
|
||
<p>Sur les versions de Debian (8+) et Ubuntu (15.04+), <code>systemd</code> se charge de lancer les services. Nous pouvons modifier directement le fichier de lancement de Varnish (<code>/etc/systemd/system/multi-user.target.wants/varnish.service</code>), cependant la meilleure façon est encore de faire un fichier qui viendra occulter la commande de démarrage par défaut.</p>
|
||
</p>
|
||
<p>Créer et éditer un nouveau fichier personnalisé de lancement :</p>
|
||
</p>
|
||
<pre class="wp-block-code"><code>mkdir /etc/systemd/system/varnish.service.d/
|
||
sudo vim /etc/systemd/system/varnish.service.d/varnish-custom.conf</code></pre>
|
||
</p>
|
||
<p>Placer les lignes suivantes :</p>
|
||
</p>
|
||
<pre class="wp-block-code"><code>[Service]
|
||
ExecStart=
|
||
ExecStart=/usr/sbin/varnishd -a localhost:8080 -T localhost:6082 -F -f /etc/varnish/default.vcl -S /etc/varnish/secret -s default,256m</code></pre>
|
||
</p>
|
||
<p>Varnish va écouter sur le port 8080 pour les requêtes des clients et le port 6082 pour son <a href="https://www.mistergeek.net/informatique/comparatif-carte-son-xlr/">interface</a> d’administrationsur. Le tout se fait sur l’interface réseau de <em>loopback</em> (boucle locale, c’es-à-dire le « localhost »).</p>
|
||
</p>
|
||
<p>Executer :</p>
|
||
</p>
|
||
<pre class="wp-block-code"><code>systemctl daemon-reload</code></pre>
|
||
</p>
|
||
<p>Cela permet s’assurer que <code>systemd</code> va utiliser cette nouvelle configuration.</p>
|
||
</p>
|
||
<p>Relancer Varnish avec :</p>
|
||
</p>
|
||
<pre class="wp-block-code"><code>systemctl restart varnish</code></pre>
|
||
</p>
|
||
</p>
|
||
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="249" src="https://www.mistergeek.net/wp-content/uploads/2023/04/entete-http-varnish-1024x249.png" alt="Panneau de développeur " class="wp-image-5607" srcset="https://www.mistergeek.net/wp-content/uploads/2023/04/entete-http-varnish-1024x249.png 1024w, https://www.mistergeek.net/wp-content/uploads/2023/04/entete-http-varnish-300x73.png 300w, https://www.mistergeek.net/wp-content/uploads/2023/04/entete-http-varnish-768x187.png 768w, https://www.mistergeek.net/wp-content/uploads/2023/04/entete-http-varnish-380x92.png 380w, https://www.mistergeek.net/wp-content/uploads/2023/04/entete-http-varnish-800x195.png 800w, https://www.mistergeek.net/wp-content/uploads/2023/04/entete-http-varnish-1160x282.png 1160w, https://www.mistergeek.net/wp-content/uploads/2023/04/entete-http-varnish.png 1233w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">Pour vous assurer que tout fonctionne, vous pouvez utiliser votre navigateur et le panneau de développement web.</figcaption></figure>
|
||
</p>
|
||
<p>En faisant une requête on peut voir que Varnish ajoute bien des indications dans l’entête HTTP de réponse.</p>
|
||
</p>
|
||
<h4 class="wp-block-heading"><span class="ez-toc-section" id="Configurer_Varnish_pour_orienter_les_requetes_vers_le_serveur_web_dorigine"></span>Configurer Varnish pour orienter les requêtes vers le serveur web d’origine<span class="ez-toc-section-end"></span></h4>
|
||
</p>
|
||
<p>Passons maintenant à la configuration même du logiciel et de notre logique de cache. Le VCL, est le langage de configuration de Varnish permet de donner les instructions sur la mise en cache.</p>
|
||
</p>
|
||
<p>Editer le fichier de configuration chargé par Varnish :</p>
|
||
</p>
|
||
<pre class="wp-block-code"><code>vim /etc/varnish/default.vcl</code></pre>
|
||
</p>
|
||
<p>Modifier les lignes comme ci-dessous :</p>
|
||
</p>
|
||
<pre class="wp-block-code"><code>backend default {
|
||
.host = "127.0.0.1";
|
||
.port = "8081"; # Par défaut "8080" et dans notre cas "8081" pour rediriger les requêtes vers Nginx
|
||
}</code></pre>
|
||
</p>
|
||
<p>Si la configuration votre web d’origine est différente de celle utilisée ici, il faut changer le <em>backend</em> pour coller à ce que vous avez mis pour Nginx. En suivant toutes les instructions de cet article, il faut donc modifier le port « 8080 » en « 8081 ».</p>
|
||
</p>
|
||
<p>Relancer Varnish avec :</p>
|
||
</p>
|
||
<pre class="wp-block-code"><code>systemctl restart varnish</code></pre>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="Configurer_le_serveur_web_dorigine_Nginx"></span>Configurer le serveur web d’origine (Nginx)<span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
<p>Il faut modifier la configuration actuelle du serveur Web. Nous allons modifier le port sur lequel écoute ce serveur (généralement 80) et allons placer Caddy en frontal.</p>
|
||
</p>
|
||
<p>Ouvrez le fichier de configuration de votre site web Nginx. Dans notre cas il est situé dans le dossier : <code>/etc/nginx/sites-enabled/</code></p>
|
||
</p>
|
||
<p>Ici, il faut modifier le port d’écoute qui est « 80 » par « 8081 » sur une interface interne.</p>
|
||
</p>
|
||
<pre class="wp-block-code"><code># Configuration du Serveur web d'origine
|
||
server {
|
||
listen 127.0.0.1:8081; # Modifier de ":80" à "127.0.0.1:8081"
|
||
server_name mistergeek.net www.mistergeek.net;
|
||
|
||
root /var/www/html;
|
||
index index.php index.html;
|
||
|
||
set_real_ip_from 0.0.0.0/0;
|
||
real_ip_header X-Real-IP; # On utilise le header "X-Real-IP" transmis par Caddy et Varnish pour obtenir l'adresse IP de l'utilisateur
|
||
real_ip_recursive on;
|
||
|
||
client_max_body_size 20M;
|
||
|
||
access_log /var/log/nginx/mistergeek_access.log;
|
||
error_log /var/log/nginx/mistergeek_error.log;
|
||
|
||
location / {
|
||
try_files $uri $uri/ /index.php?$args;
|
||
}
|
||
|
||
# Ici la configuration vers PHP-FPM pour faire fonctionner WordPress
|
||
location ~ \.php$ {
|
||
try_files $uri =404;
|
||
fastcgi_split_path_info ^(.+\.php)(/.+)$;
|
||
fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
|
||
fastcgi_index index.php;
|
||
include fastcgi_params;
|
||
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
|
||
fastcgi_param PATH_INFO $fastcgi_path_info;
|
||
}
|
||
}</code></pre>
|
||
</p>
|
||
<p>Notre pile technique est maintenant configurer pour fonctionner. Nous allons dans les lignes qui suivent voir comment ajuster plus finement les paramètres de Varnish.</p>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="Terminer_la_configuration"></span>Terminer la configuration<span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
<p>Maintenant que nous avons modifié la configuration du serveur Web Caddy, de Varnish et de Nginx, nous pouvons procéder au redémarrage.</p>
|
||
</p>
|
||
<pre class="wp-block-code"><code># Arrêter tous les services
|
||
systemctl stop caddy
|
||
systemctl stop varnish
|
||
systemctl stop nginx
|
||
|
||
# Démarrer tous les services
|
||
systemctl start caddy
|
||
systemctl start varnish
|
||
systemctl start nginx</code></pre>
|
||
</p>
|
||
<p>Si vous rencontrez une erreur du type « ERR_TOO_MANY_REDIRECTS », ajoutez les lignes suivantes au début du fichier <code>wp-config.php</code> de votre installation WordPress.</p>
|
||
</p>
|
||
<pre class="wp-block-code"><code>if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')
|
||
$_SERVER['HTTPS']='on';</code></pre>
|
||
</p>
|
||
<p>À cette étape, si vous vous rendez sur votre site vous devriez voir quelque chose de fonctionnelle. Il ne manque plus qu’à configurer Varnish finement pour gérer le cache.</p>
|
||
</p>
|
||
<h3 class="wp-block-heading"><span class="ez-toc-section" id="Configurer_Varnish_pour_WordPress_avec_VCL"></span>Configurer Varnish pour WordPress avec VCL <span class="ez-toc-section-end"></span></h3>
|
||
</p>
|
||
<p>Nous avons pu le mentionner au-dessus, mais Varnish est un logiciel complet qui embarque même son propre <strong>langage de scripting, le VCL (<em>Varnish Configuration Language</em>).</strong></p>
|
||
</p>
|
||
<p>Nous avons fait le plus dur, c’est à dire installer la pile technique qui servira à votre site Web. Il ne manque plus qu’à configurer Varnish et pour cela, Internet regorge de ressources avec des configurations déjà complètes.</p>
|
||
</p>
|
||
<p>Voici donc un exemple de configuration issue du site <a href="https://www.varnish-software.com/developers/tutorials/configuring-varnish-wordpress/" rel="nofollow">varnish-software.com</a>, avec la configuration adaptée à WordPress.</p>
|
||
</p>
|
||
<pre class="wp-block-code"><code>vcl 4.1;
|
||
|
||
import std;
|
||
|
||
backend default {
|
||
.host = "127.0.0.1";
|
||
.port = "8080";
|
||
}
|
||
|
||
# Add hostnames, IP addresses and subnets that are allowed to purge content
|
||
acl purge {
|
||
"localhost";
|
||
"127.0.0.1";
|
||
"::1";
|
||
}
|
||
|
||
sub vcl_recv {
|
||
# Remove empty query string parameters
|
||
# e.g.: www.example.com/index.html?
|
||
if (req.url ~ "\?$") {
|
||
set req.url = regsub(req.url, "\?$", "");
|
||
}
|
||
|
||
# Remove port number from host header
|
||
set req.http.Host = regsub(req.http.Host, ":[0-9]+", "");
|
||
|
||
# Sorts query string parameters alphabetically for cache normalization purposes
|
||
set req.url = std.querysort(req.url);
|
||
|
||
# Remove the proxy header to mitigate the httpoxy vulnerability
|
||
# See https://httpoxy.org/
|
||
unset req.http.proxy;
|
||
|
||
# Purge logic to remove objects from the cache.
|
||
# Tailored to the Proxy Cache Purge WordPress plugin
|
||
# See https://wordpress.org/plugins/varnish-http-purge/
|
||
if(req.method == "PURGE") {
|
||
if(!client.ip ~ purge) {
|
||
return(synth(405,"PURGE not allowed for this IP address"));
|
||
}
|
||
if (req.http.X-Purge-Method == "regex") {
|
||
ban("obj.http.x-url ~ " + req.url + " && obj.http.x-host == " + req.http.host);
|
||
return(synth(200, "Purged"));
|
||
}
|
||
ban("obj.http.x-url == " + req.url + " && obj.http.x-host == " + req.http.host);
|
||
return(synth(200, "Purged"));
|
||
}
|
||
|
||
# Only handle relevant HTTP request methods
|
||
if (
|
||
req.method != "GET" &&
|
||
req.method != "HEAD" &&
|
||
req.method != "PUT" &&
|
||
req.method != "POST" &&
|
||
req.method != "PATCH" &&
|
||
req.method != "TRACE" &&
|
||
req.method != "OPTIONS" &&
|
||
req.method != "DELETE"
|
||
) {
|
||
return (pipe);
|
||
}
|
||
|
||
# Remove tracking query string parameters used by analytics tools
|
||
if (req.url ~ "(\?|&)(utm_source|utm_medium|utm_campaign|utm_content|gclid|cx|ie|cof|siteurl)=") {
|
||
set req.url = regsuball(req.url, "&(utm_source|utm_medium|utm_campaign|utm_content|gclid|cx|ie|cof|siteurl)=([A-z0-9_\-\.%25]+)", "");
|
||
set req.url = regsuball(req.url, "\?(utm_source|utm_medium|utm_campaign|utm_content|gclid|cx|ie|cof|siteurl)=([A-z0-9_\-\.%25]+)", "?");
|
||
set req.url = regsub(req.url, "\?&", "?");
|
||
set req.url = regsub(req.url, "\?$", "");
|
||
}
|
||
|
||
# Only cache GET and HEAD requests
|
||
if (req.method != "GET" && req.method != "HEAD") {
|
||
set req.http.X-Cacheable = "NO:REQUEST-METHOD";
|
||
return(pass);
|
||
}
|
||
|
||
# Mark static files with the X-Static-File header, and remove any cookies
|
||
# X-Static-File is also used in vcl_backend_response to identify static files
|
||
if (req.url ~ "^[^?]*\.(7z|avi|bmp|bz2|css|csv|doc|docx|eot|flac|flv|gif|gz|ico|jpeg|jpg|js|less|mka|mkv|mov|mp3|mp4|mpeg|mpg|odt|ogg|ogm|opus|otf|pdf|png|ppt|pptx|rar|rtf|svg|svgz|swf|tar|tbz|tgz|ttf|txt|txz|wav|webm|webp|woff|woff2|xls|xlsx|xml|xz|zip)(\?.*)?$") {
|
||
set req.http.X-Static-File = "true";
|
||
unset req.http.Cookie;
|
||
return(hash);
|
||
}
|
||
|
||
# No caching of special URLs, logged in users and some plugins
|
||
if (
|
||
req.http.Cookie ~ "wordpress_(?!test_)[a-zA-Z0-9_]+|wp-postpass|comment_author_[a-zA-Z0-9_]+|woocommerce_cart_hash|woocommerce_items_in_cart|wp_woocommerce_session_[a-zA-Z0-9]+|wordpress_logged_in_|comment_author|PHPSESSID" ||
|
||
req.http.Authorization ||
|
||
req.url ~ "add_to_cart" ||
|
||
req.url ~ "edd_action" ||
|
||
req.url ~ "nocache" ||
|
||
req.url ~ "^/addons" ||
|
||
req.url ~ "^/bb-admin" ||
|
||
req.url ~ "^/bb-login.php" ||
|
||
req.url ~ "^/bb-reset-password.php" ||
|
||
req.url ~ "^/cart" ||
|
||
req.url ~ "^/checkout" ||
|
||
req.url ~ "^/control.php" ||
|
||
req.url ~ "^/login" ||
|
||
req.url ~ "^/logout" ||
|
||
req.url ~ "^/lost-password" ||
|
||
req.url ~ "^/my-account" ||
|
||
req.url ~ "^/product" ||
|
||
req.url ~ "^/register" ||
|
||
req.url ~ "^/register.php" ||
|
||
req.url ~ "^/server-status" ||
|
||
req.url ~ "^/signin" ||
|
||
req.url ~ "^/signup" ||
|
||
req.url ~ "^/stats" ||
|
||
req.url ~ "^/wc-api" ||
|
||
req.url ~ "^/wp-admin" ||
|
||
req.url ~ "^/wp-comments-post.php" ||
|
||
req.url ~ "^/wp-cron.php" ||
|
||
req.url ~ "^/wp-login.php" ||
|
||
req.url ~ "^/wp-activate.php" ||
|
||
req.url ~ "^/wp-mail.php" ||
|
||
req.url ~ "^/wp-login.php" ||
|
||
req.url ~ "^\?add-to-cart=" ||
|
||
req.url ~ "^\?wc-api=" ||
|
||
req.url ~ "^/preview=" ||
|
||
req.url ~ "^/\.well-known/acme-challenge/"
|
||
) {
|
||
set req.http.X-Cacheable = "NO:Logged in/Got Sessions";
|
||
if(req.http.X-Requested-With == "XMLHttpRequest") {
|
||
set req.http.X-Cacheable = "NO:Ajax";
|
||
}
|
||
return(pass);
|
||
}
|
||
|
||
# Remove any cookies left
|
||
unset req.http.Cookie;
|
||
return(hash);
|
||
}
|
||
|
||
sub vcl_hash {
|
||
if(req.http.X-Forwarded-Proto) {
|
||
# Create cache variations depending on the request protocol
|
||
hash_data(req.http.X-Forwarded-Proto);
|
||
}
|
||
}
|
||
|
||
sub vcl_backend_response {
|
||
# Inject URL & Host header into the object for asynchronous banning purposes
|
||
set beresp.http.x-url = bereq.url;
|
||
set beresp.http.x-host = bereq.http.host;
|
||
|
||
# If we dont get a Cache-Control header from the backend
|
||
# we default to 1h cache for all objects
|
||
if (!beresp.http.Cache-Control) {
|
||
set beresp.ttl = 1h;
|
||
set beresp.http.X-Cacheable = "YES:Forced";
|
||
}
|
||
|
||
# If the file is marked as static we cache it for 1 day
|
||
if (bereq.http.X-Static-File == "true") {
|
||
unset beresp.http.Set-Cookie;
|
||
set beresp.http.X-Cacheable = "YES:Forced";
|
||
set beresp.ttl = 1d;
|
||
}
|
||
|
||
# Remove the Set-Cookie header when a specific Wordfence cookie is set
|
||
if (beresp.http.Set-Cookie ~ "wfvt_|wordfence_verifiedHuman") {
|
||
unset beresp.http.Set-Cookie;
|
||
}
|
||
|
||
if (beresp.http.Set-Cookie) {
|
||
set beresp.http.X-Cacheable = "NO:Got Cookies";
|
||
} elseif(beresp.http.Cache-Control ~ "private") {
|
||
set beresp.http.X-Cacheable = "NO:Cache-Control=private";
|
||
}
|
||
}
|
||
|
||
sub vcl_deliver {
|
||
# Debug header
|
||
if(req.http.X-Cacheable) {
|
||
set resp.http.X-Cacheable = req.http.X-Cacheable;
|
||
} elseif(obj.uncacheable) {
|
||
if(!resp.http.X-Cacheable) {
|
||
set resp.http.X-Cacheable = "NO:UNCACHEABLE";
|
||
}
|
||
} elseif(!resp.http.X-Cacheable) {
|
||
set resp.http.X-Cacheable = "YES";
|
||
}
|
||
|
||
# Cleanup of headers
|
||
unset resp.http.x-url;
|
||
unset resp.http.x-host;
|
||
}</code></pre>
|
||
</p>
|
||
<p>Ce script de configuration va mettre en cache toutes les pages non dynamiques de WordPress. Les utilisateurs connectés et administrateurs, eux verront la version normale du site.</p>
|
||
</p>
|
||
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="249" src="https://www.mistergeek.net/wp-content/uploads/2023/04/cache-varnish-chrome-1024x249.png" alt="Panneau de développement web de Chrome avec affichage de l'entête HTTP." class="wp-image-5610" srcset="https://www.mistergeek.net/wp-content/uploads/2023/04/cache-varnish-chrome-1024x249.png 1024w, https://www.mistergeek.net/wp-content/uploads/2023/04/cache-varnish-chrome-300x73.png 300w, https://www.mistergeek.net/wp-content/uploads/2023/04/cache-varnish-chrome-768x187.png 768w, https://www.mistergeek.net/wp-content/uploads/2023/04/cache-varnish-chrome-380x92.png 380w, https://www.mistergeek.net/wp-content/uploads/2023/04/cache-varnish-chrome-800x195.png 800w, https://www.mistergeek.net/wp-content/uploads/2023/04/cache-varnish-chrome-1160x282.png 1160w, https://www.mistergeek.net/wp-content/uploads/2023/04/cache-varnish-chrome.png 1233w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">La page demandée est bien mise cache.</figcaption></figure>
|
||
</p>
|
||
<p>Encore une fois avec le panneau de développement d’un navigateur web il est possible de se renseigner sur l’état du cache pour le client.</p>
|
||
</p>
|
||
<h2 class="wp-block-heading"><span class="ez-toc-section" id="Conclusion"></span>Conclusion<span class="ez-toc-section-end"></span></h2>
|
||
</p>
|
||
<p>Cet article vous donne un aperçu des avantages que vous pouvez avoir à utiliser Varnish cache. Ainsi, vous pouvez augmenter la capacité de votre site web sans avoir à ajouter des serveurs complémentaires.</p></p>
|