Single Page App + Amazon S3 + Amazon CloudFront + Prerender.io - wie einrichten?
- Ich habe single-page-app erstellt mit Backbone.js.
- Ich host-app (app besteht aus nur statische Dateien) auf Amazon S3.
- Ich benutze CloudFront als ein Eimer CDN.
- App zugegriffen wird
https://myapp.com -> https://abcdefgh34545.cloudfront.com -> https://myBucket.s3-eu-west-1.amazonaws.com/index.html
Wie kann ich verwenden Prerender.io
service mit diesem stack? Ich muss irgendwie erkennen, dass WebSpider/WebRobot ist der Zugriff auf die Seite und leiten es an prerender.io...
- Könnte man nicht konfigurieren cloudfront cache der html-Code angefordert-header-Wert(en). Im Grunde, Sie würde bestimmen, über Header, wenn die Anfrage kommt von einem bot und cache das vorab gerenderte version für die Anforderung und eine nicht vorab gerenderte version für die browser-Anfragen.
- Hier ist eine vollständige Antwort nur mit einem grunt-Befehl: stackoverflow.com/questions/23043336/...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Es ist schwer zu verwenden Prerender.io mit einer statischen Amazon S3-Website.
Sie aufstehen konnte eine nginx/apache-server vor s3:
https://myapp.com
->https://mynginx-server.com
->https://myBucket.s3-eu-west-1.amazonaws.com/index.html
Diese Lösung ist weniger ideal, denn Sie verlieren die nächsten-Lage profitieren Sie von cloudfront.
Dies ist ein guter Artikel über eine benutzerdefinierte Lösung: http://www.dave.cx/post/23/prerendering-angular-s3/
David war in der Lage zu generieren, die statische HTML-und speichern Sie Sie in S3, dann CloudFlare nutzen, um zu erkennen, "_escaped_fragment_" in der URL und leiten Sie zu den statischen HTML-S3.
Habe ich es geschafft, dies zu tun, nicht mit Prerender auf alle, sondern die Schaffung der AWS Lambda-Funktion:
Konfigurieren, new origin (neuen lambda-Funktion) und Verhalten (Karte /Benutzer/* Anforderungen an das neue origin). Werden Sie sicher, dass "nur HTTPS" Origin-Protokoll Richtlinien für die Herkunft, wie API-Gateway ist nur HTTPS umleiten, hier wird die Ursache der hostname zu ändern.
(Wenn Sie durch einen Unfall benutzt, der redirect, dann müssen Sie Entkräften "/*" durch einige CloudFront bug, die änderung der Konfiguration nicht helfen ; ich verbrachte mehrere Stunden Debuggen diese Letzte Nacht)
Können Sie Lambda@Edge zu konfigurieren CloudFront zu senden crawler HTTP-Anfragen direkt prerender.io.
Die grundlegende Idee ist, eine viewer-request-handler setzt einen benutzerdefinierten HTTP-header bei Anfragen, die gesendet werden sollen, zu prerender.io. Zum Beispiel das Lambda@Edge-code:
Dem cloudfront-Verteilung muss so konfiguriert werden, Durchlaufen die X-Prerender-Host-und X-Prerender-Token Header.
Schließlich ein origin-request-handler änderungen der origin server, wenn X-Prerender-Token vorhanden ist:
Gibt es eine voll arbeitete beispielsweise an: https://github.com/jinty/prerender-cloudfront
Haben Sie einen Blick auf die volle Lösung hier, das erstellen von snapshots von Ihrer website mit Grunzen und servieren Sie Sie zu den search engines mit nichts mehr als amazon S3:
AngularJS SEO für statische Webseiten (S3 CDN)
Wie bereits erwähnt, scheint es der einfachste Weg, dies zu tun ist, konfigurieren CloudFront/Lambda@Kante-zu-proxy-Anfragen zu einem prerender-service. Ich habe ein repo, das scheint zu kümmern, der schon ein bisschen die oben genannten arbeiten für Sie: https://github.com/sanfrancesco/prerendercloud-lambda-edge
Diese verwendet Lambda@Kante zu prerender Ihre app über eine
make deploy
Befehl. Leider, nutzt diese prerender.cloud, NICHT prerender.io. Hoffentlich ist dies nicht ein blocker.