Topics

Hallo, ich bin Otsuka, CTO bei Liberogic.

Selbst wenn Sie mir sagen, ich solle etwas gegen den Artikel unternehmen...

Deshalb dachte ich, ich hinterlasse eine kleine technische Anmerkung zum Thema „Teilweise Implementierung eines CMS auf einer bestehenden Website“.

Früher war es üblich, mit PHP "Logik in HTML einzufügen", aber jetzt können Sie mit Cloudflare Pages Functions eine viel intelligentere, SEO-freundliche Struktur erstellen, die von Google ordnungsgemäß indexiert werden kann.

Dieses Mal zeige ich euch, wie ich ein Micro-CMS in eine mit Eleventy erstellte statische Website integriert habe, indem ich „Post-Processing SSR“ mithilfe von Cloudflare Pages Functions angewendet habe.

Wichtigste Punkte dieser Konfiguration

In diesem Projekt entwickeln wir das Frontend mit Eleventy + Nunjucks. Im Gegensatz zu Astro, das Funktionen innerhalb des Projekts kapselt,dist/Wir haben eine Methode gewählt, bei der dynamische Inhalte nachträglich in die statische HTML-Ausgabe eingefügt werden.

Es ist überraschend einfach zu handhaben und praktisch.

1. Ich möchte die Basisauthentifizierung nur auf die Vorschauumgebung anwenden.

Die Anforderung lautete: „Wir möchten die Authentifizierung in der Vorschauumgebung einbeziehen, aber die Ausführung (Kosten) unnötiger Worker in der Produktionsumgebung minimieren.“ Daher haben wir eine kleine Anpassung an der Vorverarbeitung vorgenommen.Nur während der Produktionsphase_middleware.jsDer Vorgang beinhaltet das Löschen.

In der Produktionsumgebung ist keine Authentifizierung erforderlich, wodurch ein Gleichgewicht zwischen Sicherheit und Komfort geschaffen und gleichzeitig unnötige Ausführungskosten minimiert werden.

2. microCMS-Antworten mithilfe der Cache-API zwischenspeichern.

Bei der Verwendung von SSR (Server-Side Rendering) besteht eine der größten Bedenken in der Last und Latenz, die durch API-Aufrufe bei jeder Anfrage entstehen.

Das ist CloudflaresCache APIWir haben uns für diese Methode entschieden, um die Antwort am Netzwerkrand zwischenzuspeichern. Die Gültigkeitsdauer des Caches (TTL) wurde auf einen relativ kurzen Zeitraum von etwa 5 bis 10 Minuten festgelegt.

Wir erhalten die Frische und gewährleisten gleichzeitig eine hervorragende Leistung.

3. Cache-Bereinigung (erneute Validierung) mittels KV

Auch wenn die TTL kurz ist, ist es für das Betriebsteam etwas stressig, dass Aktualisierungen nicht sofort sichtbar sind.Cloudflare KVWir nutzten es als Speicher zur Steuerung des Revalidierungsprozesses.

Der Mechanismus ist einfach.

• Ein Webhook wird ausgelöst, wenn ein Artikel mit microCMS aktualisiert wird.
• Der KV-Wert wird zu diesem Zeitpunkt aktualisiert.
• Pages Functions verwendet den KV-Wert als Auslöser, um zu bestimmen, ob der Cache ungültig gemacht werden soll.

Dieses Design bietet das Beste aus beiden Welten: „blitzschnelle Aktualisierungen dank Caching und sofortige Aktualisierungen“.

Zusammenfassung

Mir gefällt dieser Ansatz, „die Stärken bestehender statischer Websites zu nutzen und mit Edge nur die notwendigen Teile zu modifizieren“, weil er ein hohes Maß an operativer Flexibilität bietet.

Die Benutzerfreundlichkeit des alten PHP wird mit der Leistungsfähigkeit von Cloudflare wiederhergestellt! Aufsehenerregende Framework-Migrationen sind zwar schön, aber diese Art von „praktischen Verbesserungen“ sind in realen Anwendungsszenarien tatsächlich am nützlichsten.

Na dann.