Comment configurer Amazon CloudFront avec W3 Total Cache/WP Super Cache

Vous souhaitez configurer un CDN avec votre site WordPress mais vous n'êtes pas sûr de Max CDN ? Amoureux d'Amazon Web Services ? Dans ce didacticiel, nous expliquons exactement comment configurer Amazon Cloudfront avec les plug-ins W3 Total Cache et WP Super Cache.

L'utilisation d'un CDN est un excellent moyen de réduire la vitesse de chargement de votre site WordPress dans le monde entier, et CloudFront est l'une des options les moins chères et les meilleures sur le marché.

Avant de commencer avec l'un ou l'autre des plugins, vous devrez créer un compte AWS et créer une distribution CloudFront.

1. Inscrivez-vous à AWS

La première chose à faire est de créer un compte Amazon Web Services. Allez simplement à leur site Internet et créer un compte. Le processus est tout à fait simple, à peu près identique à tout autre processus d'inscription en ligne pour un service payant en ligne.

Ce qui est formidable, c'est que si vous vous inscrivez pour la première fois, vous avez droit à 1 an complet de service gratuit, y compris CloudFront, jusqu'à un certain point. Pour les sites à grand volume, vous pouvez le parcourir rapidement, mais pour les sites plus petits, cela peut durer toute l'année.

2. Configurer une distribution Cloudfront

Après vous être inscrit, connectez-vous à « votre console » sur AWS. Cliquez ensuite sur CloudFront sous « Stockage et diffusion de contenu ».

Cliquez maintenant pour créer la distribution.

Vous devez maintenant cliquer sur le bouton “Commencer” sous la section Web, et non sur la section RTMP. RTMP sert à créer un CDN pour le streaming multimédia

Tout ce que vous avez à faire ici, c'est simplement d'entrer l'url de votre site. Cloudfront enregistrera alors automatiquement les fichiers de votre site sur le CDN chaque fois qu'ils seront demandés pour la première fois.

En gros, c'est toute la configuration dont vous avez besoin pour votre distribution CloudFront, à moins que vous ne vouliez que l'URL de vos fichiers ait l'air fantaisiste.

Si vous souhaitez ajouter un CNAME pour rendre l'url des fichiers fournis par le CDN plus joli, vous pouvez le faire. Mais vous devrez également le configurer à partir de votre tableau de bord DNS ou au sein de votre panneau de serveur, par exemple cPanel.

Passons maintenant à la façon d'intégrer facilement CloudFront avec le plugin WordPress W3 Total Cache. Il y a deux façons de le faire. La première méthode utilise la fonction de miroir générique et est extrêmement facile à configurer. La deuxième option utilise les paramètres personnalisés de W3TC pour CloudFront, et est un peu plus sophistiquée et prend plus de temps à configurer.

3. Configurer CloudFront avec le cache total W3 (méthode 1)

La première chose que vous devez faire (après avoir installé le plugin si vous ne l'avez pas déjà fait) est de vous diriger vers les paramètres généraux du W3TC.

Sélectionnez Generic Mirror et enregistrez tous les paramètres.

Revenez maintenant à votre console AWS et examinez vos distributions CloudFront. Copiez le nom de domaine complet pour votre distribution.

Maintenant, tout ce que vous avez à faire est de revenir dans les paramètres W3TC dans le tableau de bord d'administration de WordPress, cette fois spécifiquement pour CDN, et de copier et coller l'URL de la distribution et d'enregistrer les paramètres.

Si vous actualisez votre site Web, vous devriez maintenant voir que votre navigateur extrait des fichiers du CDN. Confirmez que cela fonctionne en ouvrant une image dans un nouvel onglet et en vérifiant que l'URL indique qu'elle est fournie par le CDN.

C'est le moyen rapide et facile de configurer CloudFront avec W3TC. Si vous souhaitez le faire de la manière recommandée, vous devrez configurer les informations d'identification IAM dans AWS.

3.5 Configurer CloudFront avec W3TC (Way #2)

Comme mentionné précédemment, il existe plusieurs façons de configurer AWS CF avec W3TC. La deuxième méthode utilise les informations d'identification AWS IAM pour communiquer entre AWS et votre site via une API.

Cela garantit que les fichiers sont ajoutés à CloudFront au fur et à mesure qu'ils sont téléchargés ou mis à jour, au lieu d'être extraits dans CF uniquement la première fois qu'ils sont demandés à partir de votre site Web.

Si vous êtes prêt à travailler un peu plus pour le configurer correctement, c'est la voie à suivre.

Rendez-vous sur votre console AWS. Cliquez sur “Gestion de l'identité et des accès” dans la section “Sécurité et identité”.

Une fois que vous y êtes, cliquez sur “Créer un utilisateur”.

Vous devez maintenant créer une stratégie appropriée pour votre nouvel utilisateur IAM. Vous pouvez le faire à l'aide du générateur de règles AWS.

Si vous souhaitez que votre utilisateur ait uniquement accès à CloudFront et que vous souhaitiez uniquement qu'il puisse accéder à une distribution existante et la modifier. Alors c'est l'entrée que vous devriez lui donner.

Si cela ne vous dérange pas de donner un accès complet à CloudFront avec les informations d'identification, vous n'avez pas réellement besoin de créer une nouvelle stratégie. Vous pouvez utiliser la stratégie CloudFrontFullAccess préexistante pour votre utilisateur.

Si vous voulez la politique personnalisée, finissez de la générer et créez une nouvelle politique appelée cloudfront-user ou autre chose.

Maintenant, regardez l'aperçu de la politique, recherchez votre politique, sélectionnez-la et cliquez sur attacher.

Ensuite, tout ce que vous avez à faire est d'attacher la stratégie à l'utilisateur que vous avez créé.

Vous pouvez maintenant prendre les informations d'identification de l'utilisateur et les utiliser avec W3TC.

Revenez à votre tableau de bord WP et accédez aux paramètres généraux du W3TC. Faites défiler jusqu'à CDN, puis sélectionnez Amazon Cloudfront.

Accédez maintenant aux paramètres CDN spécifiques et entrez les clés d'accès et secrètes pour l'utilisateur IAM que vous avez créé précédemment. Cela permettra au W3TC d'accéder à votre distribution CloudFront via l'API.

Maintenant, copiez simplement et collez dans la première partie de l'URL de la distribution qui se trouve avant cloudfront.net.

Et vous avez réussi à configurer CloudFront avec W3TC de la manière recommandée.

3. (Plug-in alternatif) Configurer CloudFront avec WP Super Cache

Si vous préférez utiliser le plugin WP Super Cache pour vos projets WordPress, n'ayez crainte. Vous pouvez toujours facilement implémenter CloudFront avec le plugin de votre choix.

Après avoir installé WP Super Cache, tout ce que vous avez à faire est de vous diriger vers les paramètres de WP Super Cache, et de copier et coller dans l'URL de distribution CloudFront. Activez ensuite le CDN et enregistrez les paramètres.

Actualisez votre page et vous devriez pouvoir voir que votre site extrait du contenu du CDN au lieu de votre serveur normal.

Encore une fois, vous pouvez vérifier cela en ouvrant une image dans un nouvel onglet et en regardant l'URL.

Bien qu'il puisse sembler que sa configuration avec WP Super Cache est beaucoup plus facile dans ce didacticiel, sa configuration en tant que miroir générique n'est qu'une étape de plus avec W3TC.

La différence est que W3TC prend également en charge une approche intégrée qui utilise l'API AWS, ce qui la rend un peu plus flexible, par rapport au simple fait de l'ajouter en tant que miroir et de laisser CloudFront faire son propre travail pour obtenir les fichiers.

Conclusion

La mise en place d'un CDN est l'une des plus grandes victoires pour améliorer la vitesse de chargement de votre site Web. Si vous avez beaucoup de visiteurs du monde entier, vous pouvez supprimer des secondes entières de temps de chargement pour les personnes très éloignées de votre serveur normal.

Ainsi, même si cela peut sembler compliqué au début, il est fondamentalement obligatoire pour tout propriétaire de site WordPress de suivre ces étapes et de configurer CloudFront en tant que CDN pour son site. Si vous n'êtes pas encore inscrit à AWS, vous bénéficierez même de la première année gratuite (cela peut ne pas durer une année complète si vous avez un volume important de visiteurs sur votre site.)

Avez-vous réussi à configurer CloudFront avec W3TC ou WP Super Cache ? S'il vous plaît laissez-nous savoir dans les commentaires.