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

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)

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

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)