Topics

Hallo, ik ben Otsuka, CTO bij Liberogic.

Zelfs als je me vraagt ​​iets met het artikel te doen...

Daarom leek het me een goed idee om een ​​korte technische toelichting te geven over "het gedeeltelijk implementeren van een CMS op een bestaande website".

In het verleden was de standaardaanpak het gebruik van PHP om "logica in HTML te injecteren", maar nu kun je met Cloudflare Pages Functions een veel slimmere, SEO-vriendelijke structuur creëren die correct door Google kan worden geïndexeerd.

Deze keer laat ik zien hoe ik een microCMS heb geïntegreerd in een statische website die is gebouwd met Eleventy, door middel van "post-processing SSR" met behulp van Cloudflare Pages Functions.

Belangrijkste punten van deze configuratie

In dit project bouwen we de frontend met Eleventy + Nunjucks. In tegenstelling tot Astro, dat functies binnen het project inkapselt,dist/We hebben gekozen voor een methode waarbij dynamische content later in de statische HTML-output wordt ingevoegd.

Het is verrassend eenvoudig in gebruik en handig.

1. Ik wil basisverificatie alleen toepassen op de preview-omgeving.

De eis was: "We willen authenticatie in de preview-omgeving implementeren, maar we willen de uitvoeringskosten van onnodige processen in de productieomgeving minimaliseren." Daarom hebben we een kleine aanpassing gedaan aan de pre-build-verwerking.Alleen tijdens de productie._middleware.jsHet proces houdt in dat het verwijderd moet worden.

In de productieomgeving is authenticatie niet vereist, waardoor een balans wordt gevonden tussen beveiliging en gebruiksgemak, terwijl onnodige uitvoeringskosten tot een minimum worden beperkt.

2. Cache microCMS-reacties met behulp van de Cache API.

Bij het gebruik van SSR (Server-Side Rendering) is een van de grootste aandachtspunten de belasting en latentie die ontstaan ​​door het uitvoeren van API-aanroepen bij elk verzoek.

Dat is van Cloudflare.Cache APIWe besloten deze methode te gebruiken om het antwoord aan de rand van het netwerk te cachen. De TTL (Time To Live) van de cache werd ingesteld op een relatief korte duur van ongeveer 5 tot 10 minuten.

Wij behouden de versheid en garanderen tegelijkertijd uitstekende prestaties.

3. Cache leegmaken (opnieuw valideren) met behulp van KV

Hoewel de TTL kort is, is het feit dat updates niet direct worden doorgevoerd toch enigszins stressvol voor het operationele team.Cloudflare KVWe gebruikten het als opslagplaats voor het beheren van het hervalidatieproces.

Het mechanisme is eenvoudig.

• Een webhook wordt geactiveerd wanneer een artikel wordt bijgewerkt via microCMS.
• De KV-waarde wordt op dat moment bijgewerkt.
• Pages Functions gebruikt de KV-waarde als trigger om te bepalen of de cache ongeldig moet worden gemaakt.

Dit ontwerp biedt het beste van twee werelden: "razendsnelle updates dankzij caching en directe updates."

samenvatting

Ik vind deze aanpak, waarbij "de sterke punten van bestaande statische sites worden benut en alleen de noodzakelijke onderdelen met Edge worden aangepast", prettig omdat het een hoge mate van operationele flexibiliteit biedt.

Het gebruiksgemak van het oude PHP opnieuw creëren met de kracht van Cloudflare! Hoewel flitsende frameworkmigraties leuk zijn, zijn dit soort "praktische verbeteringen" in de praktijk het meest bruikbaar.

Nou dan.