Ich serviere meine JavaScript-App (SPA) durch Hochladen auf S3 (Standard-Root-Objekt index.html mit Cache-Control: max-age = 0, no-cache, zeigt auf fingerprinted js/css-Assets) und konfiguriert es als Ursprung für eine CloudFront-Distribution. Mein Domain-Name, sagen wir SomeMusicPlatform.com hat einen CNAME-Eintrag in Route53, der die Verteilungs-URL enthält. Das funktioniert gut und alles ist gut im Cache.Cloudfront und Lambda @ Edge - Abrufen von benutzerdefinierten Ursprungs je nach Benutzer-Agent
Jetzt möchte ich eine vorgerenderte HTML-Version für Zwecke von Bots und Social-Network-Crawler dienen. Ich habe einen Server eingerichtet, der mit einer vorgerenderten Version der JavaScript-App (SPA) in der Domäne prerendered.SomeMusicPlatform.com antwortet.
Was ich in der Lambda-Funktion versuche ist, den User Agent zu erkennen, Bots zu identifizieren und ihnen die vorgerenderte Version von meinem benutzerdefinierten Server zu liefern (und nicht die JavaScript-Inhalte von S3, wie ich normalerweise normalen Browsern dienen würde)).
Ich dachte, ich dies durch die Verwendung einer [email protected]: Using an Origin-Request Trigger to Change From an Amazon S3 Origin to a Custom Origin Funktion erreichen könnte, die den Ursprung zu meinem benutzerdefinierten Prerender Server in Fall schaltet er einen Crawler bietet in Response-Header identifiziert (oder in der Testphase, mit einem prerendered=true
Abfrageparameter).
Das Problem besteht darin, dass der Origin-Request-Trigger mit der Lambda @ Edge-Funktion nicht ausgelöst wird, da CloudFront weiterhin das Standardstammobjekt index.html
zwischengespeichert hat und den Inhalt von der zwischengespeicherten Kante zurückgibt. Ich bekomme X-Cache:RefreshHit from cloudfront
mit beiden SomeMusicPlatform.com/?prerendered=true
und SomeMusicPlatform.com
, obwohl es eine Cache-Control:max-age=0, no-cache
auf das Standard-Root-Objekt - index.html.
Wie kann ich die gut gepufferte Portionierung und geringe Latenz meines JavaScript SPA mit CloudFront beibehalten und Serving-Inhalte von meinem benutzerdefinierten Prerender-Server nur für Crawler-Bots hinzufügen?
Dies ist ein wenig kompliziert, da Sie den User-Agent-Header für die Weiterleitung an den Ursprung auflisten müssen, was Ihre Cache-Trefferquote beeinträchtigt. Sie könnten einen zweiten Auslöser auf der Viewer-Anforderungsseite in Erwägung ziehen, der die UA-Erkennungslogik implementieren und den Benutzer-Agenten von seinem realen Wert in einen von zwei möglichen Werten umschreiben würde, z. 'User-Agent: Browser' oder' User-Agent: Bot'. Ändern Sie dann das Ursprungsverhalten, indem Sie einen der beiden Werte im Auslöser für Ursprungsanforderung ermitteln. Zwei Trigger, aber optimales Caching. Gedanken? –
In der Testphase (bevor ich in UA-Erkennung gehe) versuche ich es zu vereinfachen, indem ich einen 'prendered = true'-Parameter verwende, der angibt, welcher Ursprung verwendet werden soll, entweder S3 oder benutzerdefiniert (mein Prerender-Server). Das Problem ist, dass ich immer eine zwischengespeicherte Website bekomme, egal ob ich den "vorgerenderten" Parameter verwende oder nicht. Also gehe ich auf meine Website.com und holen Sie sich den Inhalt von S3. Dann besuche ich 'mywebsite.com/? Prerendered = true' und erhalte einen gecachten Treffer von S3, wenn er von der benutzerdefinierten Herkunft kommt. An dieser Stelle, wenn ich eine Ungültigmachung mache, wird 'mywebsite.com/? Prerendered = true' den Inhalt von meinem benutzerdefinierten Ursprung erhalten. –
... aber dann, wenn ich 'mywebsite.com' (ohne den Parameter) besuche, wird zwischengespeicherter Inhalt vom benutzerdefinierten Ursprung zurückgegeben, wenn er den zwischengespeicherten Inhalt von Herkunft S3 verwenden sollte. Wie funktioniert das so, dass es je nach Parameter (und später auf dem UA) zum richtigen Ursprung wechselt? –