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.

Généralement utilisé pour les grands sites qui ont besoin de sauvegardes supplémentaires ou qui servent de gros fichiers (images, photos, téléchargements, logiciels, vidéos, jeux). Certains de leurs clients incluent Spotify, Vimeo, Coca-Cola, Philips, Evernote, et Motorola.

Le transfert automatique de vos fichiers volumineux vers Google Cloud Storage peut être un moyen facile d'économiser de l'espace disque ! 👍 Cliquez pour Tweet

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. Cependant, il est important de noter qu’il ne s’agit pas d’une solution globale et qu’elle aura probablement une latence plus élevée qu’une solution CDN complète. 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.

Prix de Google Cloud Storage

Google Cloud Platform offre une période d’essai gratuite de 12 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.

Essai gratuit de la plateforme Google Cloud

Essai gratuit de la plateforme Google Cloud

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.

Plugin WP-Stateless WordPress

Plugin WP-Stateless WordPress

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
  • ShortPixel 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 développement 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.

Installer le plugin WP-Stateless WordPress

Installer le plugin WP-Stateless WordPress

Étape 2

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

Configuration de WP-Stateless

Configuration de WP-Stateless

É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.

WP-Stateless Google login

WP-Stateless Google login

É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.

Demande d'autorisation de compte Google

Demande d’autorisation de compte Google

É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 12 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.

Projet et bucket WP-Stateless

Projet et bucket WP-Stateless

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

Configuration de WP-Stateless

Configuration de WP-Stateless

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.
Mode WP-Stateless

Mode WP-Stateless

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).

Dossiers WordPress dans Google Cloud Storage

Dossiers WordPress dans Google Cloud Storage

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.
Paramètres supplémentaires WP-Stateless

Paramètres supplémentaires WP-Stateless

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 :

Vous avez des problèmes de temps d'indisponibilité et de WordPress ? Kinsta est la solution d'hébergement conçue pour vous faire gagner du temps ! Découvrez nos fonctionnalités
  • 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.
Synchronisation WP-Stateless

Synchronisation WP-Stateless

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.

WP Offload Media WordPress plugin

WP Offload Media WordPress plugin

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.

Install WP Offload Lite WordPress plugin

Install WP Offload Lite WordPress plugin

Step 2

Follow their quickstart instructions for Google Cloud Storage:

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 !

Google Cloud Storage et KeyCDN

Google Cloud Storage et KeyCDN

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.
Exclusions CDN dans Perfmatters

Exclusions CDN dans Perfmatters

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 !

Combo Google Cloud Storage et CDN

Combo Google Cloud Storage et CDN

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.

22
Partages