angularjs – 如何在使用Amazon S3时将爬虫请求重定向到预渲染页

Amazon S3(和Amazon CloudFront)不提供重写规则,只有有限的重定向选项.但是,您无需重定向或重写URL请求.只需预渲染所有HTML文件,然后按照您的网站路径上传它们.

由于浏览网页的用户启用了JavaScript,因此将触发Angular并控制页面,从而导致重新呈现模板.有了这个,所有Angular功能都将可供该用户使用.

关于爬虫,预渲染页面就足够了.

例

如果您有一个名为www.myblog.com的网站以及指向另一个网址的链接,其网址为www.myblog.com/posts/my-first-post.可能,您的Angular应用程序具有以下结构：index.html文件位于根目录中并负责所有内容.页面my-first-post是位于/partials/my-first-post.html中的部分HTML文件.

这种情况下的解决方案是在部署时使用预渲染工具.您可以使用PhantomJS,但不能使用像Prerender这样的中间件工具,因为您在Amazon S3中托管了一个静态站点.

您需要使用此预渲染工具来创建两个文件：index.html和my-first-post.请注意,my-first-post将是一个没有.html扩展名的HTML文件,但是当您上传到Amazon S3时,您需要将其Content-Type设置为text / html.

您将index.html文件放在根目录中,将my-first-post放在名为posts的文件夹中,以匹配您的URL路径/ posts / my-first-post.

使用这种方法,爬虫将能够检索您的HTML文件,用户将乐于使用所有Angular功能.

注意：此解决方案要求使用根路径引用所有文件.如果您访问链接www.myblog.com/posts/my-first-post,相对路径将不起作用.

根路径,我的意思是：

<script src="/js/myfile.js"></script>

使用相对路径的错误方法是：

<script src="js/myfile.js"></script>

编辑：

下面是一个小的JavaScript代码,我用它来使用PhantomJS预呈现页面.安装PhantomJS并使用单个页面测试脚本后,在部署站点之前向构建过程添加一个脚本以预先渲染所有页面.

var fs = require('fs');
var webPage = require('webpage');
var page = webPage.create();

// since this tool will run before your production deploy,// your target URL will be your dev/staging environment (localhost,in this example)
var path = 'pages/my-page';
var url = 'http://localhost/' + path;

page.open(url,function (status) {

  if (status != 'success')
    throw 'Error trying to prerender ' + url;

  var content = page.content;
  fs.write(path,content,'w');

  console.log("The file was saved.");
  phantom.exit();
});

注意：它看起来像Node.js,但事实并非如此.它必须使用Phantom可执行文件而不是Node执行.