Gatsby-applicatie automatisch bouwen met aangepaste webhook in WordPress

( Shoyeb Inamdar) (5 mei 2020)

Overzicht:

Op Technogise , we hebben onlangs een project gedaan voor een van onze klanten, een In de EU gevestigde multinationale producent van huisdiervoer . De klant heeft meerdere websites in WordPress en elke website heeft veel inhoud, inclusief fotos en videos. Ze voegen ook elke dag meerdere blogberichten toe aan het platform.

De uitdaging:

Met zoveel inhoud is de reactietijd van de website van WordPress was erg traag . Ze wilden niet meer & servers toevoegen om het verkeer te beheren en waren op zoek naar een meer logische oplossing.

Onze oplossing:

Na onze analyse, mijn collega Ankita Saxena en Ik realiseerde me dat de meeste inhoud statisch van aard is. Er waren weinig formulieren of bedrijfskritische gebruikersstromen die nog moesten worden ondersteund. Onze insteek was om eerst wijzigingen aan te brengen in één microsite en de resultaten te zien. Als het aan de zakelijke behoeften zou voldoen, zouden we hetzelfde repliceren voor andere sites. Aangezien de inhoud statisch was, was het heel duidelijk dat we gebruik moesten maken van CDN -mogelijkheden om gegevens dichter bij de gebruikers te brengen terwijl nog steeds de mogelijkheid hebben om de cache bij te werken wanneer de gegevens veranderen. Om dit te bereiken, gebruikten we Gatsby .

Gatsby met WordPress

Gatsby is een razendsnelle moderne sitegenerator voor ReactJS . Gatsby kan gegevens uit elke gegevensbron halen, zoals WordPress, Drupal, YAML, JSON, databases, enz. En vervolgens statische webpaginas bouwen met behulp van GraphQL-querys.

In dit artikel zullen we ons meer concentreren op het bouwen Gatsby-site met WordPress als databron. We hebben een voorbeeldproject gemaakt met Gatsby waarmee een statische website van WordPress-gegevens. Voor meer details verwijzen wij u naar de officiële documentatie van Gatsby voor sourcing uit WordPress .

Gatsby Overview

Laat het ons neem een ​​overzicht van 300 meter van het bouwproces van Gatsby.

Na een succesvolle Gatsby-build genereert het alle benodigde middelen om de website in de openbare map te laten draaien. De middelen omvatten verkleinde bestanden, getransformeerde afbeeldingen, JSON-bestanden met informatie & gegevens voor elke pagina, statische HTML voor elke pagina en meer. De uiteindelijke build bestaat uit slechts statische bestanden die overal kunnen worden geïmplementeerd.

Om wijzigingen in de gegenereerde statische activa weer te geven die overeenkomen met de wijziging in de bron, moeten we opnieuw opbouwen en opnieuw implementeren.

Manieren automatisch opnieuw opbouwen

Om de Gatsby-site up-to-date te houden met WordPress, moeten we onze site altijd automatisch bouwen wanneer er is een update over WordPress-gegevens (zoals toevoeging van paginas / berichten / menus). Op basis van de aard van de website zijn de volgende benaderingen om automatisch opnieuw op te bouwen:

  1. Cron Job : Plan een Gatsby-build met een tijdsinterval om de activa opnieuw op te bouwen.
  2. Webhook met plugin : Bouw een Webhook die de website opnieuw opbouwt wanneer de broncode verandert. Hier zijn een paar manieren waarop u de webhook kunt activeren:
  • – Installeer Build Trigger for Gatsby plug-in en configureer webhook-URL. Dit kan een Jenkins-taak-URL zijn. Er is hier echter een zeer beperkte aanpassing beschikbaar.
  • – Gebruik externe tools zoals Netlify of Vercel , die snel onze website kan bouwen.
  • – Bouw een aangepaste plug-in om de webhook veilig te bellen

In ons geval moest de inhoud worden meerdere keren per dag gepubliceerd en zodra deze is gewijzigd. Dit gaf ons de mogelijkheid om voor de webhook-benadering te kiezen.De klant aarzelde om een ​​app van derden te gebruiken, dus gingen we door met het bouwen van onze eigen plug-in .

Aangepaste webhook op WordPress

Om een ​​aangepaste webhook te configureren, moeten we de volgende twee dingen doen:

  1. WordPress configureren om de webhook te activeren bij elke wijziging in de inhoud
  2. Maak een eindpunt om de site opnieuw op te bouwen met Gatsby

Laten we nu ingaan op de details van elke stap:

WordPress configureren

Om wordpress te configureren om de webhook te activeren, voegt u het volgende codefragment toe aan wp-include / functions.php .

Opmerking: dit fragment is alleen voor WordPress-berichten. Voor andere entiteiten in WordPress moeten we relevante fragmenten toevoegen.

Aangepaste webhook

Om een ​​aangepaste webhook te maken, moeten we een basis-eindpunt maken (in elke taal van onze voorkeur) . We hebben Java – Spring Boot gebruikt als referentie-implementatie om een ​​webhook te maken. Dit eindpunt triggert Gatsby om een ​​statische website te genereren. Voor de volledige bron raadpleegt u de wordpress-gatsby-webhook repository.

Als uw gegevens veranderen te vaak , dan kan de referentie-implementatie van webhook verder worden verbeterd door in de wachtrij te plaatsen het verzoek om een ​​venster van bijvoorbeeld X minuten, en start vervolgens de build. Dit voorkomt meerdere herbouwingen.

Conclusie

De bovenstaande benadering van het gebruik van Gatsby en aangepaste webhook hielp ons onmiddellijk opnieuw op te bouwen en updates / wijzigingen in wordpress tijdens runtime. Dit hielp de klant om niet alleen de website sneller van dienst te zijn, maar ook om regelmatig wijzigingen aan te brengen en die snel op de live website te zien.

Volgende stappen voor ons zijn om de build flexibel te maken om middelen te genereren voor de bijgewerkte inhoud alleen.

Voel je vrij om de volgende repositories te splitsen, te gebruiken of bij te dragen:

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

I wil mijn teamgenoot Ankita Saxena voor haar bedanken samenwerking en bijdrage aan dit project en dit artikel.