Créer automatiquement une application Gatsby à laide dun Webhook personnalisé sur WordPress

( Shoyeb Inamdar) (5 mai 2020)

Présentation:

At Technogise , nous avons récemment réalisé un projet pour lun de nos clients, qui est un producteur multinational de nourriture pour animaux de compagnie basé dans lUE . Le client possède plusieurs sites Web dans WordPress et chaque site Web a beaucoup de contenu, y compris des photos et des vidéos. Ils ajoutent également plusieurs articles de blog chaque jour à la plate-forme.

Le défi:

Avec autant de contenu, le temps de réponse du site Web de WordPress était très lent . Ils ne voulaient pas ajouter plus de & serveurs supplémentaires pour gérer le trafic et cherchaient une solution plus logique.

Notre solution:

Après notre analyse, mon collègue Ankita Saxena et Jai réalisé que la plupart du contenu était de nature statique . Il y avait peu de formulaires ou de flux dutilisateurs critiques pour lentreprise qui devaient encore être pris en charge. Notre approche consistait dabord à apporter des modifications dans un microsite et à voir les résultats. Si cela répondait aux besoins de lentreprise, nous reproduirions la même chose pour dautres sites. Le contenu étant statique, il était très clair que nous devrions tirer parti des capacités de CDN pour rapprocher les données des utilisateurs tout en ayant toujours le pouvoir de mettre à jour le cache lorsque les données changent. Pour ce faire, nous avons utilisé Gatsby .

Gatsby avec WordPress

Gatsby est un générateur de sites moderne et ultra-rapide pour ReactJS . Gatsby peut extraire des données de nimporte quelle source de données comme WordPress, Drupal, YAML, JSON, bases de données, etc., puis créer des pages Web statiques à laide de requêtes GraphQL.

Dans cet article, nous nous concentrerons davantage sur la création Site Gatsby avec WordPress comme source de données. Nous avons créé un exemple de projet à laide de Gatsby, qui crée un site Web statique à partir de données WordPress. Pour plus de détails, veuillez consulter la documentation officielle de Gatsby pour sourcing depuis WordPress .

Présentation de Gatsby

Laissez-nous Prenez un aperçu de 10 000 pieds du processus de construction de Gatsby.

Après une compilation réussie de Gatsby, il génère tous les éléments nécessaires pour exécuter le site Web dans le dossier public. Les ressources comprennent des fichiers minifiés, des images transformées, des fichiers JSON avec des données & pour chaque page, du code HTML statique pour chaque page, etc. La version finale est juste des fichiers statiques qui peuvent être déployés nimporte où.

Pour refléter les changements dans les actifs statiques générés correspondant au changement de source, nous devons reconstruire et redéployer.

Manières pour reconstruire automatiquement

Pour maintenir le site Gatsby à jour avec WordPress, nous devons toujours créer automatiquement notre site chaque fois que il y a une mise à jour sur les données WordPress (comme lajout de pages / articles / menus). En fonction de la nature du site Web, les approches de reconstruction automatique sont les suivantes:

  1. Cron Job : Planifiez une compilation de Gatsby à un intervalle de temps pour reconstruire les ressources.
  2. Webhook à laide du plug-in : Créez un Webhook qui reconstruit le site Web chaque fois quil y a un changement dans la source. Voici quelques façons de déclencher le webhook:
  • – Installez le plug-in Build Trigger for Gatsby et configurez-le URL du webhook. Cela peut être une URL de travail Jenkins. Cependant, la personnalisation est très limitée ici.
  • – Utilisez des outils externes comme Netlify ou Vercel , qui peut rapidement créer notre site Web.
  • – Créer un plugin personnalisé pour appeler le webhook en toute sécurité

Dans notre cas, le contenu était censé être publié plusieurs fois par jour et dès quil a été modifié. Cela nous a laissé la possibilité dutiliser lapproche du webhook .Le client hésitait à utiliser une application tierce, nous avons donc continué à créer notre propre plug-in personnalisé .

Webhook personnalisé sur WordPress

Pour configurer un Webhook personnalisé, nous devons faire les deux choses suivantes,

  1. Configurer WordPress pour déclencher le webhook sur toute modification du contenu
  2. Créez un endpoint pour reconstruire le site à laide de Gatsby

Passons maintenant aux détails de chaque étape:

Configurer WordPress

Pour configurer wordpress pour déclencher le webhook, ajoutez lextrait de code suivant à wp-includes / functions.php .

Remarque: cet extrait de code concerne uniquement les articles WordPress. Pour les autres entités dans WordPress, nous devons ajouter des extraits de code pertinents.

Webhook personnalisé

Pour créer un webhook personnalisé, nous devons créer un point de terminaison de base (dans nimporte quelle langue de notre préférence) . Nous avons utilisé Java – Spring Boot comme implémentation de référence pour créer un webhook. Ce point de terminaison déclenche la génération de Gatsby pour générer un site Web statique. Pour obtenir la source complète, veuillez vous référer au référentiel wordpress-gatsby-webhook .

Si vos données changent trop fréquemment , alors limplémentation de référence du webhook peut encore être améliorée en mise en file dattente la demande dune fenêtre de dire X minutes, puis déclencher la construction. Cela évitera plusieurs reconstructions.

Conclusion

Lapproche ci-dessus consistant à utiliser Gatsby et un webhook personnalisé nous a aidés à reconstruire et déployer instantanément mises à jour / modifications dans wordpress au moment de lexécution. Cela a aidé le client non seulement à servir le site Web plus rapidement, mais aussi à effectuer des changements fréquents et à voir rapidement ceux sur le site Web en direct.

Les prochaines étapes pour nous consistent à rendre la construction flexible afin de générer des éléments pour le contenu mis à jour uniquement.

Nhésitez pas à bifurquer, utiliser ou contribuer dans les dépôts suivants:

https://github.com/technogise / wordpress-gatsby-webhook
https://github.com/technogise/gatsby-wordpress

I souhaite remercier ma coéquipière Ankita Saxena pour elle collaboration et contribution à ce projet ainsi quà cet article.