amazon-s3 - 单页应用程序 + Amazon S3 + Amazon CloudFront + Prerender.io - 如何设置？

Question

1. 我有使用 Backbone.js 构建的单页应用程序。
2. 我在 Amazon S3 上托管应用程序(应用程序仅包含静态文件)。
3. 我使用 CloudFront 作为 Bucket CDN。
4. 应用程序通过 https://myapp.com -> https://abcdefgh34545.cloudfront.com -> https://myBucket.s3-eu-west-1.amazonaws.com/index 访问。 html

如何将 Prerender.io 服务与此堆栈一起使用？我必须以某种方式检测到 WebSpider/WebRobot 正在访问该页面并将其重定向到 prerender.io...

Answer 1

您可以使用 Lambda@Edge 配置 CloudFront 以将爬虫 HTTP 请求直接发送到 prerender.io。

基本思想是有一个查看器请求处理程序，它为应该发送到 prerender.io 的请求设置自定义 HTTP header 。例如这个 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);
        };

云端分发必须配置为通过 X-Prerender-Host 和 X-Prerender-Token header 。

最后，如果存在 X-Prerender-Token，原始请求处理程序会更改原始服务器:

      '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);
      };

有一个完整的例子:https://github.com/jinty/prerender-cloudfront