Single Page App + Amazon S3 + Amazon CloudFront + Prerender.io - comment s'installer?

  1. j'ai une application simple page construite avec L'épine dorsale.js.
  2. i application hôte (app se compose de fichiers statiques seulement) sur Amazon S3.
  3. J'utilise CloudFront comme seau CDN.
  4. App est accessible par https://myapp.com -> https://abcdefgh34545.cloudfront.com -> https://myBucket.s3-eu-west-1.amazonaws.com/index.html

Comment puis-je utiliser le service Prerender.io avec cette pile? Je dois d'une façon ou d'une autre détecter que Webpider/WebRobot accède à la page et la rediriger vers prerender.io...

11
demandé sur MattC 2014-03-13 19:23:26

4 réponses

c'est dur d'utiliser Prerender.io with a static Amazon S3 site.

vous pouvez mettre en place un serveur Nginx / apache devant s3: https://myapp.com -> https://mynginx-server.com -> https://myBucket.s3-eu-west-1.amazonaws.com/index.html

Cette solution est moins idéale parce que vous perdez l'avantage de cloudfront le plus proche.

c'est un bon article sur une solution personnalisée: http://www.dave.cx/post/23/prerendering-angular-s3 /

David a pu générer le HTML statique et les enregistrer dans S3, puis utiliser CloudFlare pour détecter _escaped_fragment_ dans L'URL et le rediriger vers le HTML statique sur S3.

4
répondu Prerender.io 2014-03-22 22:57:21

j'ai réussi à le faire en n'utilisant pas Prerender du tout mais en créant la fonction Lambda AWS qui:

  • demande la page d'origine de CloudFront (il s'agit en fait toujours du même index.html)
  • Carte la fonction lambda via l'API Gateway fourre-tout " proxy
  • étudier le chemin et de comprendre ce que la page de ressource devrait être au sujet (dans mon cas c'est simplement /user/{name}, donc je n'ai qu'un cas d'utilisation à faire
  • Make REST API request pour obtenir les données dynamiques de l'utilisateur
  • Regex remplacer les méta-champs existants par les dynamiques
  • retourner le nouvel index-fichier avec les nouvelles metas

Configurer le nouveau point d'origine (nouvelle fonction lambda) et le comportement (carte /utilisateur/* demandes de ce nouveau point d'origine). Assurez-vous d'utiliser la politique du protocole D'origine "HTTPS seulement" pour l'origine, puisque la passerelle API n'est que HTTPS, rediriger ici provoquera la nom d'hôte pour le changement.

(si par accident vous avez utilisé la redirection, alors vous devrez invalider "/*" car à cause d'un bug CloudFront le changement de configuration n'aidera pas ; j'ai passé plusieurs heures à déboguer cette dernière nuit)

5
répondu Render 2016-10-18 21:58:17

vous pouvez utiliser Lambda@Edge pour configurer CloudFront pour envoyer des requêtes HTTP crawler directement à prerender.io.

l'idée de base est d'avoir un gestionnaire de requêtes de type viewer qui définit un en-tête HTTP personnalisé pour les requêtes qui doivent être envoyées à prerender.io. Par exemple ce code Lambda@Edge:

        'use strict';
        /* change the version number below whenever this code is modified */
        exports.handler = (event, context, callback) => {
            const request = event.Records[0].cf.request;
            const headers = request.headers;
            const user_agent = headers['user-agent'];
            const host = headers['host'];
            if (user_agent && host) {
              if (/baiduspider|Facebot|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator/.test(user_agent[0].value)) {
                headers['x-prerender-token'] = [{ key: 'X-Prerender-Token', value: '${PrerenderToken}'}];
                headers['x-prerender-host'] = [{ key: 'X-Prerender-Host', value: host[0].value}];
              }
            }
            callback(null, request);
        };

la distribution cloudfront doit être configurée pour passer par les en-têtes X-Prerender-Host et X-Prerender-Token.

Enfin, un gestionnaire origine-request change le serveur d'origine si X-Prerender-Token est présent:

      'use strict';
      /* change the version number below whenever this code is modified */
      exports.handler = (event, context, callback) => {
           const request = event.Records[0].cf.request;
           if (request.headers['x-prerender-token'] && request.headers['x-prerender-host']) {
             request.origin = {
                 custom: {
                     domainName: 'service.prerender.io',
                     port: 443,
                     protocol: 'https',
                     readTimeout: 20,
                     keepaliveTimeout: 5,
                     customHeaders: {},
                     sslProtocols: ['TLSv1', 'TLSv1.1'],
                     path: '/https%3A%2F%2F' + request.headers['x-prerender-host'][0].value
                 }
             };
          }
          callback(null, request);
      };

il y a un exemple entièrement travaillé à: https://github.com/jinty/prerender-cloudfront

1
répondu Brian Sutherland 2018-03-13 10:11:37

regardez la solution complète ici, créer des instantanés de votre site Web avec grunt et les servir aux moteurs de recherche avec rien de plus que amazon S3:

AngularJS SEO for static webpages (S3 CDN)

0
répondu Robycool 2017-06-12 13:28:38