Crea automaticamente applicazione Gatsby utilizzando webhook personalizzato su WordPress

( Shoyeb Inamdar) (5 maggio 2020)

Panoramica:

allindirizzo Technogise , abbiamo recentemente realizzato un progetto per uno dei nostri clienti, che è un produttore multinazionale di alimenti per animali domestici . Il client ha più siti web in WordPress e ogni sito web ha molti contenuti, inclusi foto e video. Aggiungono anche più post di blog ogni giorno alla piattaforma.

La sfida:

Con così tanti contenuti, il tempo di risposta del sito web di WordPress era molto lento . Non volevano aggiungere altri & più server per gestire il traffico e cercavano una soluzione più logica.

La nostra soluzione:

Dopo la nostra analisi, la mia collega Ankita Saxena e Mi sono reso conto che la maggior parte dei contenuti è di natura statica . Cerano poche forme o flussi di utenti critici per lazienda che dovevano ancora essere supportati. Il nostro approccio è stato quello di apportare prima modifiche in un microsito e vedere i risultati. Se soddisfacesse le esigenze aziendali, replicheremo lo stesso per altri siti. Poiché il contenuto era statico, era molto chiaro che avremmo dovuto sfruttare le funzionalità di CDN per avvicinare i dati agli utenti mentre avendo ancora il potere di aggiornare la cache quando i dati cambiano. A tale scopo, abbiamo utilizzato Gatsby .

Gatsby con WordPress

Gatsby è un moderno generatore di siti per ReactJS . Gatsby può estrarre dati da qualsiasi fonte di dati come WordPress, Drupal, YAML, JSON, database, ecc. E quindi creare pagine web statiche con laiuto di query GraphQL.

In questo articolo, ci concentreremo maggiormente sulla creazione Sito Gatsby con WordPress come origine dati. Abbiamo creato un progetto di esempio utilizzando Gatsby che crea un sito web statico da dati WordPress. Per ulteriori dettagli, fare riferimento alla documentazione ufficiale di Gatsby per origine da WordPress .

Panoramica di Gatsby

Cerchiamo fai una panoramica di 10.000 piedi del processo di creazione di Gatsby.

Dopo una corretta compilazione Gatsby, genera tutte le risorse necessarie per eseguire il sito Web nella cartella pubblica. Gli asset includono file minimizzati, immagini trasformate, file JSON con informazioni & dati per ogni pagina, HTML statico per ogni pagina e altro ancora. La build finale è costituita da file statici che possono essere distribuiti ovunque.

Per riflettere le modifiche negli asset statici generati corrispondenti alla modifica nella sorgente, dobbiamo ricostruire e ridistribuire.

Modi per ricostruire automaticamente

Per mantenere aggiornato il sito Gatsby con WordPress, dobbiamo sempre creare automaticamente il nostro sito ogni volta che cè un aggiornamento sui dati di WordPress (come laggiunta di pagine / post / menu). In base alla natura del sito web, i seguenti sono gli approcci per la ricostruzione automatica:

  1. Cron Job : pianifica una build Gatsby in un intervallo di tempo per ricostruire le risorse.
  2. webhook utilizzando il plug-in : Crea un webhook che ricostruisca il sito web ogni volta che viene apportata una modifica alla fonte. Ecco alcuni modi per attivare il webhook:
  • – Installa il plug-in Build Trigger for Gatsby e configura URL del webhook. Può essere lURL di un lavoro Jenkins. Tuttavia, qui è disponibile una personalizzazione molto limitata.
  • – Utilizza strumenti esterni come Netlify o Vercel , che può creare rapidamente il nostro sito Web.
  • – Crea plug-in personalizzato per chiamare in modo sicuro il webhook

Nel nostro caso, il contenuto doveva essere pubblicato più volte in un giorno e non appena è stato modificato. Questo ci ha lasciato la possibilità di utilizzare l approccio al webhook .Il cliente esitava a utilizzare unapp di terze parti, quindi siamo andati avanti con la creazione del nostro plug-in personalizzato .

Webhook personalizzato su WordPress

Per configurare un webhook personalizzato, dobbiamo fare le seguenti due cose,

  1. Configurare WordPress per attivare il webhook su qualsiasi cambiamento nel contenuto
  2. Crea un endpoint per ricostruire il sito utilizzando Gatsby

Ora entriamo nei dettagli di ogni passaggio:

Configura WordPress

Per configurare wordpress per attivare il webhook, aggiungi il seguente snippet di codice a wp-includes / functions.php .

Nota: questo snippet è solo per i post di WordPress. Per altre entità in WordPress, dobbiamo aggiungere snippet pertinenti.

Webhook personalizzato

Per creare un webhook personalizzato, dobbiamo creare un endpoint di base (in qualsiasi lingua di nostra preferenza) . Abbiamo utilizzato Java – Spring Boot come implementazione di riferimento per creare un webhook. Questo endpoint attiva la build di Gatsby per generare un sito Web statico. Per la fonte completa, fai riferimento al repository wordpress-gatsby-webhook .

Se i tuoi dati stanno cambiando troppo spesso , limplementazione di riferimento del webhook può essere ulteriormente migliorata accodando la richiesta di una finestra di dire X min, quindi attivare la compilazione. Ciò eviterà più ricostruzioni.

Conclusione

Lapproccio di cui sopra di utilizzare Gatsby e il webhook personalizzato ci ha aiutato a ricostruire e distribuire immediatamente aggiornamenti / modifiche in wordpress in fase di esecuzione. Ciò ha aiutato il cliente non solo a servire il sito web più velocemente, ma anche ad apportare modifiche frequenti e a vedere rapidamente quelle sul sito web live.

I passaggi successivi per noi è rendere la build flessibile per generare risorse per il contenuto aggiornato solo.

Sentiti libero di fare fork, usare o contribuire nei seguenti repository:

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

I vorrei ringraziare la mia compagna di squadra Ankita Saxena per lei collaborazione e contributo a questo progetto e a questo articolo.