Construiți automat aplicația Gatsby utilizând Webhook personalizat pe WordPress

( Shoyeb Inamdar) (5 mai 2020)

Prezentare generală:

La Technogise , am realizat recent un proiect pentru unul dintre clienții noștri, care este un producător multinațional de alimente pentru animale de companie . Clientul are mai multe site-uri web în WordPress și fiecare site web are mult conținut, inclusiv fotografii și videoclipuri. De asemenea, adaugă mai multe postări pe blog în fiecare zi pe platformă.

Provocarea:

Cu atât de mult conținut, timpul de răspuns al site-ului de la WordPress a fost foarte lent . Nu au dorit să adauge mai multe & mai multe servere pentru a gestiona traficul și au căutat o soluție mai logică.

Soluția noastră:

După analiza noastră, colega mea Ankita Saxena și Mi-am dat seama că cea mai mare parte a conținutului este static în natură. Au existat puține formulare sau fluxuri de utilizatori critici pentru afaceri care trebuiau încă să fie acceptate. Abordarea noastră a fost să facem mai întâi modificări într-un microsit și să vedem rezultatele. Dacă ar satisface nevoile afacerii, atunci le vom reproduce la fel pentru alte site-uri. Deoarece conținutul era static, era foarte clar că ar trebui să folosim capacitățile CDN pentru a lua datele mai aproape de utilizatori în timp ce încă având puterea de a actualiza memoria cache atunci când datele se schimbă. Pentru a realiza acest lucru, am folosit Gatsby .

Gatsby cu WordPress

Gatsby este un generator de site rapid și rapid div id = „ef4709d001”> pentru ReactJS . Gatsby poate extrage date din orice sursă de date precum WordPress, Drupal, YAML, JSON, baze de date etc. și apoi poate crea pagini web statice cu ajutorul interogărilor GraphQL.

În acest articol, ne vom concentra mai mult pe construirea Site Gatsby cu WordPress ca sursă de date. Am creat un exemplu de proiect folosind Gatsby care construiește un site static din datele WordPress. Pentru detalii suplimentare, vă rugăm să consultați documentația oficială a Gatsby pentru aprovizionare din WordPress .

Prezentare generală a Gatsby

Permiteți-ne faceți o prezentare generală de 10.000 de metri a procesului de construire a lui Gatsby.

După o construcție Gatsby de succes, generează toate activele necesare pentru a rula site-ul web în folderul public. Activele includ fișiere minimizate, imagini transformate, fișiere JSON cu informații & date pentru fiecare pagină, HTML static pentru fiecare pagină și multe altele. Construcția finală este doar fișiere statice care pot fi implementate oriunde.

Pentru a reflecta modificările activelor statice generate corespunzătoare schimbării sursei, trebuie să reconstruim și să redistribuim.

Modalități să reconstruim automat

Pentru a menține site-ul Gatsby actualizat cu WordPress, trebuie întotdeauna să construim automat site-ul nostru ori de câte ori există o actualizare a datelor WordPress (cum ar fi adăugarea de pagini / postări / meniuri). Pe baza naturii site-ului web, sunt prezentate următoarele abordări pentru reconstruirea automată:

  1. Cron Job : Programați o construcție Gatsby la un interval de timp pentru a reconstrui activele.
  2. Webhook utilizând pluginul : Creați un Webhook care reconstruiește site-ul web ori de câte ori există modificări în sursă. Iată câteva modalități prin care puteți declanșa webhook-ul:
  • – Instalați pluginul Build Trigger pentru Gatsby și configurați URL webhook. Aceasta poate fi o adresă URL a jobului Jenkins. Cu toate acestea, este disponibilă o personalizare foarte limitată.
  • – Utilizați instrumente externe precum Netlify sau Vercel , care poate construi rapid site-ul nostru web.
  • – Creați un plugin personalizat pentru a apela în siguranță webhook-ul

În cazul nostru, conținutul trebuia să să fie publicat de mai multe ori într-o zi și imediat ce a fost schimbat. Acest lucru ne-a lăsat opțiunea de a merge cu abordarea webhook .Clientul a ezitat să folosească o aplicație terță parte, așa că am continuat cu crearea propriului nostru plugin personalizat .

Custom Webhook on WordPress

Pentru a configura un Webhook personalizat, trebuie să facem următoarele două lucruri,

  1. Configurați WordPress pentru a declanșa webhook-ul la orice modificare a conținutului
  2. Creați un punct final pentru a reconstrui site-ul utilizând Gatsby

Acum, să intrăm în detaliile fiecărui pas:

Configurează WordPress

Pentru a configura wordpress pentru a declanșa webhook-ul, adaugă următorul fragment de cod la wp-includes / functions.php .

Notă: Acest fragment este doar pentru postările WordPress. Pentru alte entități din WordPress, trebuie să adăugăm fragmente relevante.

Custom Webhook

Pentru a crea un webhook personalizat, trebuie să creăm un punct final final (în orice limbă preferată de noi) . Am folosit Java – Spring Boot ca implementare de referință pentru a crea un webhook. Acest punct final declanșează construirea Gatsby pentru a genera un site static. Pentru sursa completă, vă rugăm să consultați depozitul wordpress-gatsby-webhook .

Dacă datele dvs. se schimbă prea frecvent , atunci implementarea de referință a webhook-ului poate fi îmbunătățită în continuare prin coadă cererea pentru o fereastră de zece minute X, apoi declanșează construirea. Acest lucru va evita reconstruirile multiple.

Concluzie

Abordarea de mai sus de a utiliza Gatsby și webhook personalizat ne-a ajutat să reconstruim și să implementăm instantaneu actualizări / modificări în wordpress în timpul rulării. Acest lucru l-a ajutat pe client să nu doar să servească site-ul web mai repede, ci și să facă modificări frecvente și să le vadă rapid pe site-ul web live.

Următorii pași pentru noi este de a face versiunea flexibilă pentru a genera active pentru conținutul actualizat. numai.

Nu ezitați să folosiți, să utilizați sau să contribuiți în următoarele depozite:

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

I vreau să mulțumesc coechipierului meu Ankita Saxena pentru ea colaborare și contribuție la acest proiect, precum și la acest articol.