2017-11-27 2 views
2

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?

+1

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? –

+0

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. –

+0

... 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? –

Antwort

1

Das Problem mit Caching (den gleichen Treffer bekommen, wenn entweder mywebsite.com/?prerendered=true oder mywebsite.com verwendet wird) durch Zugabe von prerendered auf die Abfrage Weiße Liste in der Cloudfront Verteilung gelöst wurde. Das bedeutet, dass CloudFront nun sowohl die normale als auch die vorgerenderte Version des Website-Inhalts korrekt verwaltet, abhängig vom Vorhandensein des Parameters (ohne den Parameter im Cache gespeicherter Inhalte von S3 Ursprung) und mit dem zwischengespeicherten Inhalt von meinem benutzerdefinierten Ursprung in der Lambda-Funktion wird serviert).

Dies war genug für die Testphase - um sicherzustellen, dass der Mechanismus richtig funktioniert. Dann folgte ich Michaels Ratschlag und fügte eine weitere Lambda-Funktion in den Auslöser "Viewer-Anfrage" hinzu, die einen benutzerdefinierten Header Is-Bot hinzufügt, falls ein Bot in User-Agent gefunden wird. Erneut war eine Whitelist erforderlich, diesmal für den benutzerdefinierten Header (um Caches für beide Ursprünge abhängig vom benutzerdefinierten Header zu verwalten). Die andere Lambda-Funktion später im Auslöser der Ursprungsanforderung entscheidet dann, welcher Ursprung verwendet werden soll, abhängig vom Header Is-Bot.

+0

Hey Kumpel, wir haben es mit dem gleichen Problem zu tun. Ich benutze auch die Lambda-Funktion, um nach dem User-Agent zu suchen. Das Problem ist folgendes: Ich kann CloudFront nicht dazu bringen, den User-Agent weiterzuleiten. Dies ist nur möglich, wenn ich meine benutzerdefinierte Herkunft (mit Rendertron) auswähle, aber nicht meine S3-Herkunft (die die SPA-Site enthält). Ich habe einen "/ *" URL-Pfad für das Verhalten mit dem Haupt-S3-Bucket als meinen Ursprung. und dachte daran, die Lambda-Funktion einzuchecken, ob es ein Bot ist. Aber CloudFront ersetzt den User-Agent immer durch "CloudFront". – IroNEDR

+0

@IroNEDR Haben Sie den User-Agent-Header in Ihren CloudFront-Verteilungseinstellungen auf die weiße Liste gesetzt? –

+0

Es ist nicht möglich, den Benutzer-Agent auf die weiße Liste zu setzen. Ich kann benutzerdefinierte Header nur dann auf die weiße Liste setzen, wenn ich den benutzerdefinierten Ursprung unseres Rendertrons anstelle des S3 Origins auswähle, wo unser SPA im CloudFront-Verhalten gehostet wird. – IroNEDR

Verwandte Themen