Comment configurer Nginx avec CloudFront pour bénéficier de la mise en cache de CloudFront?

Question

J'ai un site web avec Wordpress. Ce site est hébergé sur Nginx & php-fpm. J'ai ajouté CloudFront pour augmenter les performances et diminuer la charge du serveur d'origine.

Cependant, je peux voir dans la console des outils de développement de Chrome que toutes les ressources ont la valeur Miss from CloudFront dans l'en-tête x-cache.

Je ne sais pas comment configurer Nginx & CloudFront pour fonctionner correctement et bénéficier de la mise en cache.

Je crois que tout dépend des en-têtes appropriés qui devraient être définis par Nginx (par exemple Cache-Control: public pour les images?). Je ne trouve aucun exemple qui couvrirait tous les cas et ne gâcherait pas le panneau d'administration de Wordpress (celui-ci ne devrait pas être mis en cache, n'est-ce pas?).

Answer 1

Une solution rapide pourrait être d'installer le WP Super Cache plugin; a le support CDN en plus d'autres choses.

Du côté Nginx vous pourriez faire quelque chose comme ça pour le contenu statique:

location ~* \.(?:ico|css|js|gif|jpe?g|png)$ { 
    expires 30d; 
    add_header Pragma public; 
    add_header Cache-Control "public"; 
} 

Vous pouvez ajouter autant de directives, non necesary seulement des images, par exemple:

location ~* \.(?:cur|gz|svg|mp4|ogg|ogv|webm|htc)$ { 
    access_log off; 
    add_header Cache-Control "max-age=2592000"; 
    #... more options 
} 

Le préfixe ?: est une marque «non-capturante», ce qui signifie que nous n'avons pas besoin que le motif soit capturé en $1, ce qui devrait améliorer les performances. Vous pouvez trouver plus d'informations sur le Nginx expires option here.