Automaattinen Gatsby-sovelluksen käyttäminen mukautettua Webhookia WordPressissa

( Shoyeb Inamdar) (5. toukokuuta 2020)

Yleiskatsaus:

At Technogise , teimme äskettäin projektin yhdelle asiakkaistamme, joka on EU-pohjainen monikansallinen lemmikkieläinten ruoan tuottaja . Asiakkaalla on useita verkkosivustoja WordPress -palvelussa, ja jokaisella verkkosivustolla on paljon sisältöä, mukaan lukien valokuvat ja videot. He lisäävät myös useita blogiviestejä päivittäin alustalle.

Haaste:

Kun sisältöä on niin paljon, -sivuston vasteaika WordPressista oli hyvin hidas . He eivät halunneet lisätä lisää & palvelimia liikenteen hallitsemiseksi ja etsivät loogisempaa ratkaisua.

Ratkaisumme:

Analyysin jälkeen kollegani Ankita Saxena ja Tajusin, että suurin osa sisällöstä on staattinen . Lomakkeita tai yrityskriittisiä käyttäjävirtoja oli vain vähän, ja niitä oli vielä tuettava. Lähestymistapamme oli tehdä ensin muutokset yhdellä mikrosivustolla ja nähdä tulokset. Jos se täyttäisi yrityksen tarpeet, kopioisimme saman muille sivustoille. Koska sisältö oli staattista, oli hyvin selvää, että meidän tulisi hyödyntää CDN -ominaisuuksia ottaaksemme tietoja lähemmäksi käyttäjiä samalla on edelleen valta päivittää välimuisti tietojen muuttuessa. Tämän saavuttamiseksi käytimme Gatsby .

Gatsby WordPressilla

Gatsby on loistava nopeasti moderni sivustogeneraattori kohteelle ReactJS . Gatsby voi hakea tietoja mistä tahansa tietolähteestä, kuten WordPress, Drupal, YAML, JSON, Databases, jne., Ja sitten rakentaa staattisia verkkosivuja GraphQL-kyselyjen avulla.

Tässä artikkelissa keskitymme enemmän rakentamiseen Gatsby-sivusto, jossa WordPress on tietolähde. Olemme luoneet näyteprojektin Gatsbyn avulla, joka rakentaa staattinen verkkosivusto WordPress-tiedoista. Lisätietoja on Gatsbyn virallisissa asiakirjoissa -hankinnasta WordPressistä .

Gatsbyn yleiskatsaus

Kerro meille ota 10000 jalan yleiskatsaus Gatsbyn rakennusprosessista.

Onnistuneen Gatsby-rakennuksen jälkeen se luo kaikki tarvittavat resurssit verkkosivuston ylläpitoon julkisessa kansiossa. Sisältö sisältää pienennetyt tiedostot, muunnetut kuvat, JSON-tiedostot, joissa on tietoja & jokaiselle sivulle, staattinen HTML jokaiselle sivulle ja paljon muuta. Lopullinen koontiversio on vain staattisia tiedostoja, jotka voidaan sijoittaa mihin tahansa.

Jotta voimme kuvata lähdemuutosta vastaavia luotujen staattisten resurssien muutoksia, meidän on rakennettava uudelleen ja asennettava uudelleen.

Tapoja automaattinen uudelleenrakentaminen

Pitääksemme Gatsby-sivuston ajan tasalla WordPress-palvelulla, meidän on aina rakennettava sivustomme automaattisesti aina, kun WordPress-tietoihin on päivitys (kuten sivujen / viestien / valikoiden lisääminen). Sivuston luonteen perusteella seuraavat uudelleensuuntausmenetelmät:

  1. Cron Job : Suunnittele Gatsbyn koontiversio tietyin väliajoin resurssien uudelleen rakentamiseksi.
  2. Verkkokoukku laajennuksella : Rakenna verkkokoukku , joka rakentaa sivuston uudelleen aina, kun lähteessä tapahtuu muutoksia. Tässä on muutama tapa käynnistää verkkokoukku:
  • – Asenna Build Trigger for Gatsby -laajennus ja määritä verkkokoukun URL-osoite. Tämä voi olla Jenkins-työn URL-osoite. Täällä on kuitenkin hyvin vähän mukautuksia.
  • – Käytä ulkoisia työkaluja, kuten Netlify tai Vercel , joka voi nopeasti rakentaa verkkosivustomme.
  • – Luo mukautettu laajennus, jotta voit kutsua verkkokoukkua turvallisesti

Meidän tapauksessamme sisällön piti julkaistaan ​​useita kertoja päivässä ja heti kun se on muutettu. Tämä antoi meille mahdollisuuden siirtyä verkkokoukku-lähestymistapaan .Asiakas epäröi käyttää kolmannen osapuolen sovellusta, joten jatkoimme oman oman laajennuksen rakentamista .

Mukautettu verkkokoukku WordPressissa

Mukautetun Webhookin määrittämiseksi meidän on tehtävä seuraavat kaksi asiaa:

  1. Määritä WordPress käynnistämään verkkokoukku kaikilla sisällön muutoksilla
  2. Luo päätepiste sivuston rakentamiseksi uudelleen Gatsbyn avulla

Mennään nyt kunkin vaiheen yksityiskohtiin:

Määritä WordPress

Määritä WordPress käynnistämään verkkokoukku lisäämällä seuraava koodinpätkä kohtaan wp-sisältää / toiminnot.php .

Huomaa: Tämä katkelma on tarkoitettu vain WordPress-viesteille. Muille WordPress-entiteeteille meidän on lisättävä asiaankuuluvat katkelmat.

Mukautettu verkkokoukku

Mukautetun verkkokoukun luomiseksi meidän on luotava peruspääte (millä tahansa haluamallamme kielellä). . Käytimme Java – Spring Bootia referenssitoteutuksena verkkokoukun luomiseen. Tämä päätepiste laukaisee Gatsbyn rakentamisen staattisen verkkosivuston luomiseksi. Täydelliset lähteet ovat wordpress-gatsby-webhook -tietovarastossa.

Jos tietosi muuttuvat liian usein , verkkokoukun referenssitoteutusta voidaan edelleen parantaa jonottamalla pyyntö ikkunan sanomiseksi X min ja käynnistää sitten koontiversio. Tämä välttää useita uudelleenrakennuksia.

Johtopäätös

Yllä oleva Gatsbyn ja mukautetun verkkokoukun käyttötapa auttoi meitä välittömästi rakentamaan ja asentamaan päivittää / muuttaa WordPressiä ajon aikana. Tämä auttoi asiakasta palvelemaan verkkosivustoa nopeammin, mutta myös tekemään usein muutoksia ja näkemään nopeasti muutokset reaaliaikaisella verkkosivustolla.

Seuraava vaiheemme on tehdä koontiversiosta joustava tuottamaan resursseja päivitetylle sisällölle. vain.

Voit vapaasti haarautua, käyttää tai osallistua seuraaviin arkistoihin:

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

I haluaisin kiittää joukkuetoverini Ankita Saxenaa yhteistyö ja panos tähän projektiin sekä tähän artikkeliin.