Installation

Pour l'installer sur Ubuntu, il faut d'abord ajouter la clé du repository:


curl http://repo.varnish-cache.org/debian/GPG-key.txt > key.txt
sudo apt-key add key.txt


Il faut ensuite modifier le fichier /etc/apt/sources.list, et ajouter la ligne suivante:

deb http://repo.varnish-cache.org/ubuntu/ lucid varnish-3.0

Et finalement l'installer de manière classique:


sudo apt-get update
sudo apt-get install varnish


Configuration

Pour la configuration ci-dessous, Varnish est installé sur la même machine que le serveur web Apache. Varnish écoute sur le port 80, et Apache sur le port 8080.

Pour modifier les options de démarrage de Varnish, il faut modifier le fichier /etc/default/varnish:


DAEMON_OPTS="-a :80 \
             -T localhost:6082 \
             -f /etc/varnish/default.vcl \
             -S /etc/varnish/secret \
             -s malloc,256m"


• -a est le port sur lequel Varnish doit écouter
• -s indique le mécanisme à utiliser pour le cache, ainsi que sa taille (256MB dans l'exemple)

Il faut ensuite, dans le fichier /etc/varnish/default.vcl, indiquer à Varnish où se trouvent le ou les serveurs web. Dans ce cas-ci, il se trouve sur la même machine (127.0.0.1) et sur le port 8080:


backend default {
      .host = "127.0.0.1";
      .port = "8080";
}


Par défaut, Varnish utilise une politique de mise en cache très prudente. Il ne met pas le contenu en cache si le browser envoie un cookie dans sa requête. Comme la plupart des sites utilisent les sessions et que le numéro de session est généralement stocké dans un cookie, le browser enverra le numéro de session pour chaque requête, donc également pour télécharger les images, fichiers vidéos, javascript, css,... ce qui empêche la mise en cache.

Comme règle de base, il faut autoriser Varnish à mettre en cache toutes les photos, les fichiers CSS et Javascript etc. malgré la présence d'un éventuel cookie dans la requête. Toujours dans le fichier /etc/varnish/default.vcl, il faut ajouter:


# Si l'url se termine par jpg/png/... regarder d'abord dans le cache
sub vcl_recv {
    if (req.http.Cache-Control ~ "private") {
        return(pass);
    }

    if (req.url ~ "\.(png|gif|jpg|swf|css|js)$") {
        return(lookup);
    }
}

# Lorsqu'on a reçu la réponse du serveur, supprimer les cookies
# éventuels avant d'enregistrer dans le cache
sub vcl_fetch {
    if (beresp.http.Cache-Control ~ "private") {
        return(hit_for_pass);
    }

    if (req.url ~ "\.(png|gif|jpg|swf|css|js)$") {
        unset beresp.http.set-cookie;
    }
}


Configurer Apache

Pour que Apache écoute sur le port 8080 au lieu du classique port 80, il faut d'abord modifier le fichier /etc/apache2/ports.conf:


NameVirtualHost *:8080
Listen 8080


Il faut ensuite modifier tous les virtual-hosts (tous les fichiers /etc/apache2/sites-enabled/...):


<VirtualHost *:8080>
...


Démarrage et test

On peut enfin redémarrer Apache, et démarrer Varnish:


sudo /etc/init.d/apache restart
sudo /etc/init.d/varnish start


Pour vérifier que Apache fonctionne correctement, il suffit d'ajouter :8080 dans l'url, par exemple http://mon.serveur.com:8080/ma/page.html

Varnish possède également plusieurs utilitaires pour tester son fonctionnement. Par exemple, pour savoir quelles URLs sont demandées par les clients au serveur Varnish:

varnishtop -i rxurl

Pour savoir quelles requêtes sont transmises par Varnish au serveur web (Apache):

varnishtop -i txurl

• Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
• Pragma: no-cache
• Une date d'expiration (Expires) dans le passé.

Ces headres demandent au navigateur de l'utilisateur, ainsi qu'aux éventuels proxys, de ne pas mettre ce contenu en cache, et de chaque fois le télécharger depuis le serveur. Ceci va naturellement ralentir le site web, et peut également surcharger le serveur.

Pour demander la mise en cache du contenu, il faut utiliser les headers suivants:


$delais = 60 * 60 * 24 * 7;   // Une semaine
header("Pragma: public");
header("Cache-Control: maxage=".$delais);
header("Expires: " . gmdate('D, d M Y H:i:s', time() + $delais) . " GMT");
 


<div style="
 background: url(image.jpg) center center no-repeat;">
</div>
 

Il est même possible, grâce à CSS3, de redimensionner automatiquement l'image à la taille du div:


<div style="
 background: url(image.jpg) center center no-repeat;
 background-size: contain;">
</div>
 

1. Pour les conteneurs, utiliser max-width et min-height au lieu de width et height, pour que la page puisse s'adapter lorsque la taille de la fenêtre diminue
2. Pour éviter que les images ne débordent de la fenêtre lorsque celle-ci est réduite, ajouter le code suivant à la feuille de style css:
img {
  max-width: 100%;
}
 
3. Les navigateurs de smartphones "simulent" généralement un écran plus grand. Pour les forcer à utiliser leur résolution réelle, il suffit d'ajouter dans la section head de la page html:
<meta name="viewport" content="width=device-width, initial-scale=1">
 
4. Finalement, grâce aux media queries CSS3, il est possible d'ajouter du code css pour certaines tailles d'écran seulement:
/* Code CSS de base */

@media screen and (min-width:480px) and (max-width:800px) {
  /* Tablettes, et smartphones disposant d'un grand écran */
}

@media screen and (max-width:479px) {
  /* Autres smartphones */
}
 

Malheureusement, si un utilisateur active ce mode par erreur, un site récent risque de s'afficher de manière complètement erronée. Pour éviter ce désagrément, il est possible de désactiver le mode "compatibilité" en ajoutant la balise meta "X-UA-Compatible" avant toutes les autres balises meta:


<head>
  <title>Ma page web</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" >

  <!-- autres balises meta -->
</head>
 

Il est également possible d'émuler une version spécifique de Internet Explorer:


<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >