Automatické vytváření aplikace Gatsby pomocí vlastního Webhooku na WordPressu

( Shoyeb Inamdar) (5. května 2020)

Přehled:

Na Technogise , nedávno jsme vytvořili projekt pro jednoho z našich klientů, kterým je nadnárodní výrobce krmiv pro domácí zvířata . Klient má v WordPress více webů a každý web má spoustu obsahu, včetně fotografií a videí. Také na platformu každý den přidávají více blogových příspěvků.

Výzva:

S tolika obsahem je doba odezvy webu z WordPressu byl velmi pomalý . Nechtěli přidat více & dalších serverů pro správu provozu a hledali logičtější řešení.

Naše řešení:

Po naší analýze moje kolegyně Ankita Saxena a Uvědomil jsem si, že většina obsahu má statickou povahu. Existovalo několik formulářů nebo obchodních kritických toků uživatelů, které musely být stále podporovány. Náš přístup spočíval v tom, že nejprve provedeme změny na jedné microsite a uvidíme výsledky. Pokud by vyhovovalo obchodním potřebám, replikovali bychom to samé pro jiné weby. Vzhledem k tomu, že obsah byl statický, bylo zcela jasné, že bychom měli využívat CDN možnosti, jak přiblížit data uživatelům, zatímco stále má možnost aktualizovat mezipaměť při změně dat. K dosažení tohoto cíle jsme použili Gatsby .

Gatsby s WordPress

Gatsby je bleskově rychlý moderní generátor webů pro ReactJS . Gatsby může stahovat data z libovolného zdroje dat, jako jsou WordPress, Drupal, YAML, JSON, databáze atd., A poté vytvářet statické webové stránky pomocí dotazů GraphQL.

V tomto článku se více zaměříme na vytváření Web Gatsby s WordPressem jako zdrojem dat. Vytvořili jsme ukázkový projekt pomocí Gatsbyho, který vytváří statický web z dat WordPressu. Další podrobnosti naleznete v oficiální dokumentaci Gatsby pro zdroje z WordPressu .

Přehled Gatsby

Pojďme udělejte si 10 000 stop přehledu procesu sestavování Gatsbyho.

Po úspěšném sestavení Gatsby vygeneruje všechny potřebné prostředky pro spuštění webu ve veřejné složce. Mezi aktiva patří minifikované soubory, transformované obrázky, soubory JSON s informacemi & dat pro každou stránku, statické HTML pro každou stránku a další. Konečné sestavení jsou jen statické soubory, které lze nasadit kdekoli.

Abychom odráželi změny ve vygenerovaných statických prostředcích odpovídajících změně zdroje, musíme je znovu sestavit a znovu nasadit.

Způsoby automaticky znovu sestavit

Abychom udrželi web Gatsby aktualizovaný pomocí WordPressu, musíme vždy automaticky vytvářet naše stránky kdykoli k dispozici je aktualizace dat WordPressu (jako přidání stránek / příspěvků / nabídek). Na základě povahy webu jsou přístupy k automatické obnově následující:

  1. Cron Job : Naplánujte sestavení Gatsbyho v časovém intervalu a znovu vytvořte aktiva.
  2. Webhook pomocí pluginu : Vytvořte Webhook , který znovu vytvoří web, kdykoli dojde ke změně zdroje. Webhook můžete spustit několika způsoby:
  • – Nainstalujte Vytvořte modul Trigger for Gatsby a nakonfigurujte URL webhooku. Může to být adresa URL Jenkinsovy úlohy. Zde je však k dispozici velmi omezené přizpůsobení.
  • – Použijte externí nástroje jako Netlify nebo Vercel , který dokáže rychle vytvořit náš web.
  • – Vytvořte si vlastní plugin pro bezpečné volání webhooku.

V našem případě měl obsah být zveřejněna několikrát za den a jakmile byla změněna. Díky tomu jsme měli možnost jít s přístupem webhook .Klient váhal s používáním aplikace třetí strany, a proto jsme pokračovali v budování vlastního vlastního pluginu .

Vlastní Webhook na WordPressu

Chcete-li nakonfigurovat vlastní Webhook, musíme udělat následující dvě věci,

  1. Konfigurovat WordPress, aby spustil webhook při jakékoli změně obsahu
  2. Vytvořte koncový bod k opětovnému vytvoření webu pomocí Gatsbyho

Pojďme se nyní věnovat podrobnostem každého kroku:

Konfigurace WordPressu

Chcete-li nakonfigurovat WordPress tak, aby spouštěl webhook, přidejte následující fragment kódu do wp-includes / functions.php .

Poznámka: Tento úryvek je určen pouze pro příspěvky ve WordPressu. U ostatních entit ve WordPressu musíme přidat příslušné úryvky.

Vlastní Webhook

Chcete-li vytvořit vlastní webhook, musíme vytvořit základní koncový bod (v jakémkoli jazyce podle našich preferencí) . Jako referenční implementaci k vytvoření webhooku jsme použili Java – Spring Boot. Tento koncový bod spouští sestavení Gatsby pro generování statického webu. Úplný zdroj najdete v úložišti wordpress-gatsby-webhook .

Pokud se vaše data mění příliš často , pak lze referenční implementaci webhooku dále vylepšit zařazením do fronty žádost o okno řekněme X minut a poté spusťte sestavení. Vyhnete se tak opakovanému sestavování.

Závěr

Výše ​​uvedený přístup pomocí Gatsbyho a vlastního webhooku nám pomohl okamžitě znovu sestavit a nasadit aktualizace / změny v wordpressu za běhu. To pomohlo klientovi nejen rychleji poskytovat webové stránky, ale také provádět časté změny a rychle vidět změny na živém webu.

Dalším krokem pro nás je flexibilita sestavení pro generování podkladů pro aktualizovaný obsah. pouze.

Nebojte se rozdvojovat, používat nebo přispívat do následujících úložišť:

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

I chtěl bych za ni poděkovat mé týmové kolegyni Ankitě Saxeně spolupráce a příspěvek k tomuto projektu i k tomuto článku.