WordPress Google Cloud Storage – Comment décharger vos médias

Dans un tutoriel précédent, nous vous avons montré comment décharger des médias sur Amazon S3. Aujourd’hui, nous allons vous expliquer quelques options pour comment décharger des médias sur votre site WordPress vers Google Cloud Storage, ainsi qu’éventuellement servir vos médias directement depuis Google Cloud Storage ou un CDN.

Depuis que Kinsta est propulsé par la plateforme Google Cloud, nous sommes évidemment de grands fans de leur technologie et de leur infrastructure. La principale raison de le faire est d’économiser de l’espace disque.

Google Cloud Storage n’est qu’une petite partie des nombreux produits et services de Google Cloud Platform. Grâce à l’infrastructure massive de Google et au fait qu’ils traitent le stockage en masse, ils sont en mesure d’offrir des coûts de stockage très bas. Beaucoup plus bas qu’un hébergeur WordPress.

Le stockage dans le cloud est généralement utilisé pour les sites qui ont besoin de sauvegardes supplémentaires grâce à une solution comme notre module de sauvegarde externe, ou qui servent des fichiers volumineux (images, photos, téléchargements, logiciels, vidéos, jeux). Parmi leurs clients figurent Spotify, Vimeo, Coca-Cola, Philips, Evernote et Motorola.

Google Cloud Storage vs Google Cloud CDN

Google Cloud Storage ne doit pas être confondu avec Google Cloud CDN ou tout autre fournisseur de CDN. Un réseau de diffusion de contenu (CDN) est conçu spécifiquement pour accélérer la diffusion de vos articles, tandis que Google Cloud Storage est conçu spécifiquement comme une solution de stockage en masse.

Cependant, Google Cloud Storage peut vous aider à accélérer votre site car il utilise ce qu’on appelle le stockage multirégional. Cela signifie que votre contenu Google Cloud Storage est stocké et diffusé à partir de plusieurs emplacements dans cette région, comme un CDN. Il utilise même la même technologie de cache à bord. Mais il est important de noter que ce n’est pas mondial et que la latence sera probablement plus élevée que celle d’une solution CDN à part entière. Google Cloud Storage vous permet de choisir entre trois régions :

• Asie-Pacifique
• Union européenne
• États-Unis

Mais nous allons vous montrer ci-dessous comment utiliser également un CDN avec Google Cloud Storage.

Si vous êtes un client Kinsta, dans le cadre de notre intégration avec Cloudflare, Le cache edge enregistre le cache de votre site/page Kinsta dans l’un des 275+ centres de données du réseau mondial de Cloudflare.

Le cache edge est inclus gratuitement dans tous les plans Kinsta, ne nécessite pas d’extension séparée, et réduit le temps nécessaire pour servir le HTML WordPress en cache de plus de 50 % en moyenne !

Prix de Google Cloud Storage

Google Cloud Platform offre une période d’essai gratuite de 3 mois, 300 $ pour les nouveaux clients. Si vous n’avez jamais été un client payant de Google Cloud Platform et que vous ne vous êtes pas encore inscrit pour l’essai gratuit, vous êtes admissible. C’est une excellente façon de tester Google Cloud Storage et de voir si cela convient à votre site avant de devoir payer quoi que ce soit. Consultez la FAQ d’essai gratuit et les tarifs de Google Cloud Storage.

Configuration de Google Cloud Storage sur WordPress avec WP-Stateless

Votre première option pour intégrer Google Cloud Storage à votre site WordPress est d’utiliser le plugin gratuit WP-Stateless, développé par la formidable équipe de Usability Dynamics.

Le plugin copie automatiquement les fichiers de votre site WordPress vers Google Cloud Storage lorsqu’ils sont chargés dans la médiathèque. Il offre ensuite différents modes, tels que la sauvegarde d’une copie de votre média ou même la suppression du média de WordPress et le servir à partir de Google Cloud Storage.

Ce plugin est encore assez nouveau mais a une grande réputation et est activement maintenu et mis à jour. Au moment d’écrire ces lignes, il compte actuellement plus de 2 000 installations actives avec une note impressionnante de 5 étoiles sur 5. Il offre également une compatibilité officielle avec les plugins tiers suivants :

• Easy Digital Downloads
• Imagify Image Optimizer
• WPForms
• WP Smush
• Advanced Custom Fields Image Crop Addon
• SiteOrigin Widget Bundle
• SiteOrigin CSS
• Gravity Forms
• WPBakery Page Builder

Ce n’est pas parce qu’un plugin n’est pas listé au-dessus qu’il ne fonctionnera pas avec l’intégration. Ce sont simplement des plugins sur lesquels l’équipe Usability Dynamics a passé du temps supplémentaire pour corriger des bugs et confirmer la compatibilité. Cependant, nous recommandons toujours de tester les nouveaux plugins comme celui-ci dans un environnement de staging d’abord.

Étape 1

Pour installer le plugin gratuit WP-Stateless, vous pouvez le télécharger à partir du dépôt WordPress ou en recherchant « WP-Stateless » dans votre tableau de bord WordPress sous « Ajouter » extensions. Cliquez sur « Installer maintenant » et activez-le.

Étape 2

Cliquez sur « Begin Setup Assistant ». Vous pouvez aussi suivre leurs instructions de configuration manuelle.

Étape 3

Cliquez sur « Google Login ». Vous devez utiliser le compte Google que vous souhaitez associer à ce site Web et accepter la demande d’autorisation. Si vous n’êtes pas sûr d’être autorisé à accéder à votre compte Google, consultez leur documentation sur la demande d’autorisation. Si vous préférez ne pas donner accès à votre compte Google, vous pouvez toujours suivre la procédure de configuration manuelle.

Étape 4

Cliquez sur « Autoriser » pour qu’ils puissent visualiser et gérer vos données sur les services de la plateforme Google Cloud. Remarque : Une fois le processus de connexion de l’utilisateur terminé, ils ne conservent pas de jetons ni d’identifiants d’accès.

Étape 5

WP-Stateless vous aidera ensuite à configurer votre projet Google Cloud et le bucket qui stockera vos fichiers multimédia WordPress.

• Google Cloud Project : Chaque bucket Google Cloud est contenu dans un projet. Vous pouvez créer un nouveau projet ou choisir parmi vos projets existants.
• Google Cloud Bucket : Toutes vos données WordPress sont stockées dans un bucket. Vous pouvez créer un nouveau bucket ou choisir un de vos buckets existants.
• Google Cloud Bucket Multi-Regional Location : Votre bucket nouvellement créé sera doté d’une classe de stockage multirégional. Sélectionnez la région la plus proche de la majorité des visiteurs de votre site Web.
• Google Cloud Billing : Si vous n’avez pas de compte de facturation, cliquez sur le bouton pour en créer un. N’oubliez pas qu’ils offrent un essai gratuit de 3 mois et 300 $.

Important: Si vous souhaitez utiliser votre propre domaine personnalisé ou URL CDN pour Google Cloud Storage, veillez à nommer votre bucket exactement comme l’URL de votre domaine CDN. Nom du bucket : gcs.yourdomain.com. Il vous donnera un avertissement au sujet des caractères, mais les points peuvent être utilisés dans les noms de bucket. Il doit simplement commencer et se terminer par un caractère alphanumérique.

Une fois que vous avez tout configuré, cliquez sur « Continuer ». Vous devriez alors voir une confirmation que tout est correctement configuré.

Paramètres de Google Cloud Storage dans le plugin WP-Stateless

Vous trouverez les paramètres WP-Stateless et Google Cloud Storage sous « Media → Stateless Settings ». Sous l’onglet « Paramètres », vous voudrez configurer le mode que vous préférez.

• Disabled : Désactiver les médias apatrides.
• Backups : Téléchargez des fichiers multimédias vers Google Storage et diffusez les URLs des fichiers locaux.
• CDN : Copiez les fichiers multimédia sur Google Storage et servez-les directement à partir de là. Remarque : Vous ne pouvez pas utiliser Kinsta CDN et cette option. Vous devez choisir l’un ou l’autre.
• Stateless : Stocker et servir des fichiers multimédias avec Google Cloud Storage uniquement. Les fichiers multimédias ne sont pas stockés localement. Cette option vous permettrait d’économiser le plus d’espace disque possible.
• File URL Replacement : Analyse le contenu et les méta pendant la présentation et remplace les URL des fichiers multimédias locaux par des URL de stockage Google Cloud. Ce paramètre ne modifie pas votre base de données.

Vous avez peur d’avoir vos fichiers médias plus tard ? Ne vous inquiétez pas, le plugin a une fonction de synchronisation (que nous explorons plus bas) au cas où vous voudriez revenir en arrière. Vous pouvez également toujours récupérer vos dossiers de téléchargement WordPress à partir du bucket Google Cloud Storage lui-même car il imite simplement l’apparence exacte de votre médiathèque (comme indiqué ci-dessous).

Plus bas dans la page, vous trouverez les paramètres supplémentaires :

• Cache-Control :  Par défaut, cette valeur est : public, max-age=36000, must-revalidate.Vous pouvez la remplacer si vous voulez.
• Delete GSC File : Activez cette option si vous voulez que le fichier soit supprimé de GSC lorsque vous le supprimez de votre médiathèque WordPress.
• File URL and Domain : Remplacez le domaine GCS par défaut par votre propre domaine personnalisé. Pour cela, vous devrez configurer un CNAME. Veuillez noter que le nom de bucket et le nom de domaine doivent correspondre exactement. Selon leur documentation, HTTPS n’est pas supporté par un domaine personnalisé, mais cela a bien fonctionné pour nous.
• Organisation : Organisez les téléchargements en dossiers par année et par mois.
• Cache Busting : Prépare un ensemble aléatoire de chiffres et de lettres pour le nom du fichier. Ceci est utile pour éviter les problèmes de mise en cache lors du téléchargement de fichiers ayant le même nom de fichier.

Les images que vous téléchargez dans votre médiathèque WordPress sont automatiquement copiées dans Google Cloud Storage. Cependant, après avoir d’abord configuré le plugin, vous devrez exécuter une synchronisation en masse. Sous « Media → Stateless Settings → Sync », vous disposez des options suivantes :

• Régénérer toutes les images sans état et synchroniser Google Storage avec le serveur local. (Remarque : cette option prendra un certain temps la première fois)
• Synchroniser les fichiers non-images entre Google Storage et le serveur local.
• Synchroniser les fichiers non multimédia de la bibliothèque entre Google Storage et le serveur local.

WordPress Google Cloud Storage Setup with WP Offload Media

Your second option for integrating Google Cloud Storage with your WordPress site is to use the equally awesome free WP Offload Media Lite plugin (or premium WP Offload Media) from Delicious Brains Inc.

You can definitely meet most of your needs with the lite version of WP Offload Media; however, there are some nice features if you upgrade to the premium version:

• PriorityExpert™ email support.
• Upload existing Media Library to cloud storage.
• Control cloud storage files from the Media Library.
• Remove files from the server once offloaded in the background.
• Download and remove from cloud storage.
• Copy files between buckets on your storage provider in the background.
• Serve site assets (CSS, JS, images, fonts, etc) from CloudFront or another CDN in just a few clicks with the Assets Pull Addon.
• Integrations with WooCommerce, WPML, Easy Digital Downloads, Meta Slider, Enable Media Replace, and Advanced Custom Fields.

Step 1

To install the free WP Offload Media Lite plugin, you can download it from the WordPress repository or by searching for “WP Offload Media Lite” within your WordPress dashboard under “Add New” plugins. Click on “Install Now” and activate it.

Step 2

Follow their quickstart instructions for Google Cloud Storage:

• Log in to the Google Cloud Platform (GCP) Console
• Create a Service Account Key File for GCS
• Saving the Service Account Key FIle details
• Activate Your WP Offload Media License
• Configure WP Offload Media
• Offload Your Existing Media Library

Intégration du CDN Google Cloud Storage

Vous vous inquiétez des performances de Google Cloud Storage ? Il est vrai que le stockage multirégional ne sera tout simplement pas aussi rapide qu’un CDN normal, et ce n’est certainement pas génial pour les utilisateurs dans le monde entier. Cependant, vous pouvez toujours livrer des fichiers via votre fournisseur CDN préféré. Voici quelques options différentes.

Configurer WP-Stateless avec KeyCDN

Suivez simplement les étapes ci-dessous, dans lesquelles nous utiliserons KeyCDN comme exemple.

Important : Cela signifie que vous serez facturé à la fois par Google Cloud Storage et par votre fournisseur CDN, vous aurez donc probablement besoin de connaître les chiffres à l’avance. Ou si vous utilisez la version d’essai de Google Cloud Platform, c’est un excellent moyen d’estimer vos coûts sans être facturé par Google. Ce qui suit ne fonctionne pas actuellement avec Kinsta CDN.

1. Créez une nouvelle zone spécialement pour le support de Google Cloud Storage. Suivez le tutoriel de KeyCDN sur l’intégration CDN de Google Cloud Storage. Essentiellement, vous utilisez Google Cloud Storage comme serveur d’origine.
2. Déployez Let’s Encrypt pour le HTTPS sur la nouvelle zone.
3. Configurez un nouvel alias de zone sur KeyCDN. Exemple : gcs.yourdomain.com.
4. Utilisez votre alias de zone dans les paramètres du plugin WP-Stateless.

Le résultat est que KeyCDN fournit désormais tous vos fichiers Google Cloud Storage. Problème de performances résolu !

Etant donné que le plugin WP-Stateless ne gère que votre médiathèque (images), vous souhaitez probablement aussi servir vos scripts (JS, CSS) via un CDN. Suivez simplement les étapes ci-dessous.

1. Configurez une zone séparée avec votre fournisseur CDN pour vos ressources et utilisez une URL différente de celle ci-dessus, telle que cdn.yourdomain.com.
2. Installez un plugin CDN WordPress qui prend en charge les exclusions : CDN Enabler (gratuit), Perfmatters (premium) ou WP Rocket (premium).
3. Configurez les exclusions de sorte que votre plugin CDN ne charge que CSS, JS, etc. De cette façon, le plugin WP-Stateless gère vos fichiers multimédia et le plugin CDN gère vos ressources.

Le résultat final est que vos médias se chargent à partir de votre URL CDN personnalisée (qui est tirée de Google Cloud Storage) et vos ressources à partir de votre autre URL CDN personnalisée.  Et si vous êtes en mode « Stateless », votre site WordPress n’utilisera pas d’espace disque pour ses images. Plutôt cool !

Configurer WP Offload Media avec Google Cloud CDN

Par défaut, WP Offload Media est configuré pour utiliser les URLs brutes de Google Cloud Storage lors de la diffusion de médias déchargés. Les URLs de vos médias peuvent ressembler à ceci :

http://storage.googleapis.com/bucket-name/wp-content/uploads/…

Découvrez leur tutoriel sur la configuration d’un domaine de CDN personnalisé pour Google Cloud Storage.