Auto-build Gatsby-applikasjon ved bruk av tilpasset Webhook på WordPress

( Shoyeb Inamdar) (5. mai 2020)

Oversikt:

Ved Technogise , vi gjorde nylig et prosjekt for en av våre kunder, som er en EU-basert multinasjonal produsent av kjæledyrmat . Klienten har flere nettsteder i WordPress og hvert nettsted har mye innhold, inkludert bilder og videoer. De legger også til flere blogginnlegg hver dag på plattformen.

Utfordringen:

Med så mye innhold, nettstedets responstid fra WordPress var veldig treg . De ønsket ikke å legge til flere & flere servere for å administrere trafikken og lette etter en mer logisk løsning.

Løsningen vår:

Etter analysen vår, min kollega Ankita Saxena og Jeg innså at det meste av innholdet er statisk i naturen. Det var få skjemaer eller forretningskritiske brukerstrømmer som fortsatt måtte støttes. Vår tilnærming var å først gjøre endringer på ett mikrosite og se resultatene. Hvis det oppfyller forretningsbehovene, ville vi replikere det samme for andre nettsteder. Siden innholdet var statisk, var det veldig klart at vi skulle utnytte CDN for å ta data nærmere brukerne mens fortsatt har makten til å oppdatere hurtigbufferen når dataene endres. For å oppnå dette brukte vi Gatsby .

Gatsby med WordPress

Gatsby er en lynrask, moderne nettstedgenerator for ReactJS . Gatsby kan hente data fra hvilken som helst datakilde som WordPress, Drupal, YAML, JSON, databaser osv. Og deretter bygge statiske websider ved hjelp av GraphQL-spørsmål.

I denne artikkelen vil vi fokusere mer på å bygge Gatsby-nettsted med WordPress som datakilde. Vi opprettet et prøveprosjekt ved hjelp av Gatsby som bygger en statisk nettsted fra WordPress-data. For mer informasjon, se offisiell dokumentasjon for Gatsby for sourcing fra WordPress .

Gatsby Oversikt

La oss ta en 10.000 fot oversikt over Gatsbys byggeprosess.

Etter en vellykket Gatsby-bygging genererer den alle nødvendige eiendeler for å kjøre nettstedet i den offentlige mappen. Innholdselementene inkluderer minifiserte filer, transformerte bilder, JSON-filer med informasjon & data for hver side, statisk HTML for hver side og mer. Den endelige versjonen er bare statiske filer som kan distribueres hvor som helst.

For å gjenspeile endringer i de genererte statiske eiendelene som tilsvarer endringen i kilden, må vi bygge om og distribuere på nytt.

Måter for å gjenoppbygge automatisk

For å holde Gatsby-nettstedet oppdatert med WordPress, må vi alltid bygge nettstedet vårt når det er en oppdatering på WordPress-data (som tillegg av sider / innlegg / menyer). Basert på innholdet på nettstedet, er følgende tilnærminger for automatisk gjenoppbygging:

  1. Cron Job : Planlegg en Gatsby-bygging med et tidsintervall for å gjenoppbygge eiendelene.
  2. Webhook ved hjelp av plugin : Bygg en Webhook som gjenoppbygger nettstedet når det er endring i kilden. Her er noen måter du kan utløse webhook:
  • – Installer Build Trigger for Gatsby plugin og konfigurer webhook URL. Dette kan være en Jenkins-jobb-URL. Det er imidlertid svært begrenset tilpasning tilgjengelig her.
  • – Bruk eksterne verktøy som Netlify eller Vercel , som raskt kan bygge nettstedet vårt.
  • – Bygg tilpasset plugin for å ringe nettkroken sikkert

I vårt tilfelle skulle innholdet være publiseres flere ganger på en dag og så snart den ble endret. Dette ga oss muligheten til å gå med webhook-tilnærmingen .Klienten nølte med å bruke en tredjepartsapp, så vi fortsatte med å bygge vår egen tilpassede plugin .

Egendefinert Webhook på WordPress

For å konfigurere en tilpasset Webhook, må vi gjøre følgende to ting,

  1. Konfigurer WordPress for å utløse webhooken ved endring i innholdet
  2. Opprett et sluttpunkt for å gjenoppbygge nettstedet ved hjelp av Gatsby

La oss nå komme inn i detaljene for hvert trinn:

Konfigurer WordPress

For å konfigurere wordpress for å utløse webhook, legg til følgende kodebit til wp-inkluderer / features.php .

Merk: Denne kodebiten er kun for WordPress-innlegg. For andre enheter i WordPress, må vi legge til relevante utdrag.

Tilpasset webhook

For å opprette en tilpasset webhook må vi opprette et grunnleggende endepunkt (på hvilket som helst språk vi ønsker) . Vi brukte Java – Spring Boot som en referanseimplementering for å lage en webhook. Dette endepunktet utløser Gatsby build for å generere statisk nettsted. For fullstendig kilde, se wordpress-gatsby-webhook repository.

Hvis dataene dine endres for ofte , så kan referanseimplementeringen av webhook forbedres ytterligere ved i kø forespørselen om et vindu på si X minutter, og utløs deretter bygningen. Dette vil unngå flere gjenoppbygginger.

Konklusjon

Ovennevnte tilnærming med bruk av Gatsby og tilpasset webhook hjalp oss umiddelbart å gjenoppbygge og distribuere oppdateringer / endringer i wordpress ved kjøretid. Dette hjalp klienten til å ikke bare betjene nettstedet raskere, men også gjøre hyppige endringer og raskt se dem på live-nettstedet.

Neste trinn for oss er å gjøre bygningen fleksibel for å generere ressurser for oppdatert innhold. bare.

Gaffel, bruk eller bidra gjerne i følgende arkiver:

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

I vil takke lagkameraten min Ankita Saxena for henne samarbeid og bidrag til dette prosjektet, så vel som denne artikkelen.