Automatycznie buduj aplikację Gatsby przy użyciu niestandardowego elementu Webhook w WordPress

( Shoyeb Inamdar) (5 maja 2020 r.)

Omówienie:

At Technogise , niedawno wykonaliśmy projekt dla jednego z naszych klientów, który jest międzynarodowym producentem karmy dla zwierząt domowych z siedzibą w UE . Klient ma wiele witryn internetowych w WordPress , a każda witryna zawiera dużo treści, w tym zdjęcia i filmy. Każdego dnia dodają też do platformy wiele postów na blogu.

Wyzwanie:

Przy tak dużej ilości treści czas reakcji witryny z WordPress był bardzo powolny . Nie chcieli dodawać kolejnych & serwerów do zarządzania ruchem i szukali bardziej logicznego rozwiązania.

Nasze rozwiązanie:

Po naszej analizie moja koleżanka Ankita Saxena i Zdałem sobie sprawę, że większość treści jest statyczna z natury. Było kilka formularzy lub przepływów użytkowników o znaczeniu krytycznym dla biznesu, które nadal musiały być obsługiwane. Naszym podejściem było najpierw wprowadzić zmiany w jednej mikrowitrynie i zobaczyć wyniki. Gdyby spełniał potrzeby biznesowe, replikowalibyśmy to samo dla innych witryn. Ponieważ treść była statyczna, było bardzo jasne, że powinniśmy wykorzystać możliwości CDN , aby zbliżyć dane do użytkowników, nadal ma możliwość aktualizowania pamięci podręcznej po zmianie danych. Aby to osiągnąć, użyliśmy Gatsby .

Gatsby z WordPress

Gatsby to niesamowicie szybki i nowoczesny generator witryn dla ReactJS . Gatsby może pobierać dane z dowolnego źródła danych, takiego jak WordPress, Drupal, YAML, JSON, bazy danych itp., A następnie tworzyć statyczne strony internetowe za pomocą zapytań GraphQL.

W tym artykule skupimy się bardziej na tworzeniu Witryna Gatsby z WordPress jako źródłem danych. Utworzyliśmy przykładowy projekt przy użyciu Gatsby, który tworzy statyczna strona internetowa z danych WordPress. Aby uzyskać więcej informacji, zapoznaj się z oficjalną dokumentacją Gatsby dotyczącą pozyskiwania z WordPress .

Gatsby Overview

Pozwól nam zapoznaj się z procesem budowania Gatsbyego o długości 10 km.

Po udanej kompilacji Gatsby generuje wszystkie zasoby wymagane do uruchomienia serwisu WWW w folderze publicznym. Zasoby obejmują zminimalizowane pliki, przekształcone obrazy, pliki JSON z danymi & dla każdej strony, statyczny kod HTML każdej strony i nie tylko. Ostateczna kompilacja to tylko statyczne pliki, które można wdrożyć w dowolnym miejscu.

Aby odzwierciedlić zmiany w wygenerowanych statycznych zasobach odpowiadające zmianie w źródle, musimy odbudować i ponownie wdrożyć.

Sposoby aby automatycznie odbudować

Aby witryna Gatsby była aktualizowana za pomocą WordPress, musimy zawsze automatycznie tworzyć naszą witrynę zawsze, gdy aktualizacja danych WordPressa (np. dodanie stron / postów / menu). Uwzględniając charakter witryny, przedstawiono następujące sposoby automatycznej przebudowy:

  1. Cron Job : Zaplanuj kompilację Gatsby w odstępach czasu, aby odbudować zasoby.
  2. Webhook za pomocą wtyczki : Zbuduj webhook , który przebudowuje witrynę po każdej zmianie źródła. Oto kilka sposobów na uruchomienie webhooka:
  • – Zainstaluj wtyczkę Build Trigger for Gatsby i skonfiguruj adres URL webhooka. Może to być adres URL zadania Jenkins. Jednak dostępne są tutaj bardzo ograniczone możliwości dostosowania.
  • – Użyj narzędzi zewnętrznych, takich jak Netlify lub Vercel , który może szybko zbudować naszą witrynę.
  • – Zbuduj niestandardową wtyczkę, aby bezpiecznie wywoływać webhook

W naszym przypadku zawartość miała być publikowane kilka razy w ciągu dnia i zaraz po zmianie. To pozostawiło nam możliwość skorzystania z podejścia webhook .Klient wahał się, czy skorzystać z aplikacji innej firmy, więc przystąpiliśmy do tworzenia własnej wtyczki niestandardowej .

Niestandardowy element webhook w WordPress

Aby skonfigurować niestandardowego webhooka, musimy wykonać następujące dwie rzeczy:

  1. Skonfiguruj WordPress tak, aby uruchamiał webhook przy każdej zmianie w treści
  2. Utwórz punkt końcowy , aby przebudować witrynę za pomocą Gatsby

Przejdźmy teraz do szczegółów każdego kroku:

Skonfiguruj WordPress

Aby skonfigurować wordpress do uruchamiania webhooka, dodaj następujący fragment kodu do wp-include / functions.php .

Uwaga: ten fragment kodu dotyczy tylko postów WordPress. W przypadku innych podmiotów w WordPress musimy dodać odpowiednie fragmenty.

Niestandardowy element Webhook

Aby utworzyć niestandardowy element webhook, musimy utworzyć podstawowy punkt końcowy (w dowolnym języku według naszych preferencji) . Użyliśmy Java – Spring Boot jako implementacji referencyjnej do stworzenia webhooka. Ten punkt końcowy wyzwala kompilację Gatsby w celu wygenerowania statycznej witryny internetowej. Pełne źródło znajdziesz w repozytorium wordpress-gatsby-webhook .

Jeśli Twoje dane się zmieniają zbyt często , to referencyjną implementację webhooka można jeszcze ulepszyć, kolejkowanie żądanie okna, powiedzmy X minut, a następnie uruchom kompilację. Pozwoli to uniknąć wielokrotnych przebudowań.

Wniosek

Powyższe podejście polegające na użyciu Gatsby i niestandardowego elementu webhook pomogło nam natychmiast odbudować i wdrożyć aktualizacje / zmiany w wordpress w czasie wykonywania. Pomogło to klientowi nie tylko szybciej obsługiwać witrynę, ale także wprowadzać częste zmiany i szybko przeglądać te w aktywnej witrynie.

Kolejnym krokiem dla nas jest uelastycznienie kompilacji w celu generowania zasobów dla zaktualizowanej treści. tylko.

Zapraszam do forka, używania lub współtworzenia w następujących repozytoriach:

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

I chciałbym podziękować mojej koleżance z zespołu Ankita Saxena za nią współpraca i wkład w ten projekt, a także w ten artykuł.