我有一个使用 Angular 构建并托管在 Amazon S3 上的静态 SPA 站点。我正在尝试让爬虫访问我的预呈现页面,但我无法重定向爬虫请求,因为 Amazon S3 不提供 URL 重写选项并且重定向规则有限。
我已将以下元标记添加到 <head>我的 index.html 页面:
<meta name="fragment" content="!">
此外,我的 SPA 使用漂亮的 URL(没有散列 # 符号)和 HTML5 推送状态。
使用此设置,当爬虫找到我的 http://mywebsite.com/about 时链接,它将生成一个 GET请求 http://mywebsite.com/about?_escaped_fragment_= .这是 pattern defined by Google然后是其他爬虫。
我需要用 about.html 文件的预渲染版本来回答这个请求。我已经用 Phantom.js 完成了这个预渲染,但我无法将正确的文件提供给爬虫,因为 Amazon S3 没有重写规则。
在 nginx 服务器中,解决方案是添加重写规则,例如:
location / {
if ($args ~ "_escaped_fragment_=") {
rewrite ^/(.*)$ /snapshots/$1.html break;
}
}
但在 Amazon S3 中,我受限于他们的 redirect rules基于 KeyPrefixes 和 HttpErrorCodes。 ?_escaped_fragment_=不是 KeyPrefix,因为它出现在 URL 的末尾,并且它不会给出 HTTP 错误,因为 Angular 会忽略它。
我已经开始尝试在 ngRoute 中使用动态模板,但后来我意识到我无法使用任何 Angular 解决方案来解决这个问题,因为我的目标是无法执行 JavaScript 的爬虫。
对于 Amazon S3,我必须遵守他们的重定向规则。
我已经设法通过丑陋的解决方法让它工作。如果我为每个页面创建一个新规则,我就完成了:
<RoutingRules>
<!-- each page needs it own rule -->
<RoutingRule>
<Condition>
<KeyPrefixEquals>about?_escaped_fragment_=</KeyPrefixEquals>
</Condition>
<Redirect>
<HostName>mywebsite.com</HostName>
<ReplaceKeyPrefixWith>snapshots/about.html</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
如您在此解决方案中所见,每个页面都需要自己的规则。由于亚马逊仅限制 50 个重定向规则,因此这不是一个可行的解决方案。
另一个解决方案是忘记漂亮的 URL 并使用 hashbangs。有了这个,我的链接将是 http://mywebsite.com/#!about爬虫会用 http://mywebsite.com/?_escaped_fragment_=about 请求这个.由于 URL 将以 ?_escaped_fragment_= 开头, 它可以用 KeyPrefix 捕获,只需要一个重定向规则就足够了。但是,我不想使用难看的 URL。
那么,我怎样才能在 Amazon S3 中拥有静态 SPA 并且对 SEO 友好?
最佳答案
Amazon S3(和 Amazon CloudFront)不提供重写规则并且只有有限的重定向选项。但是,您不需要需要重定向或重写您的 URL 请求。只需预呈现所有 HTML 文件并按照您的网站路径上传它们。
由于浏览网页的用户启用了 JavaScript,Angular 将被触发并控制页面,从而导致重新呈现模板。这样,该用户就可以使用所有 Angular 功能。
关于爬虫,预渲染页面就够了。
如果您有一个名为 www.myblog.com 的网站和一个指向另一个页面的 URL 链接 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 文件,但您需要将其 Content-Type 设置为 text/html 当您上传到 Amazon S3 时。
您将把 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>
下面是我用来使用 PhantomJS 预呈现页面的一小段 JavaScript 代码。安装 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 执行。
关于angularjs - 使用 Amazon S3 时如何将爬虫请求重定向到预渲染页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32429488/
我正在学习如何使用Nokogiri,根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
总的来说,我对ruby还比较陌生,我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础,我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
我有一个Ruby程序,它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重,我想提高压缩级别,因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗?是否有另一个允许指定压缩级别的Ruby库? 最佳答案 这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
很好奇,就使用rubyonrails自动化单元测试而言,你们正在做什么?您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您?git中的预提交Hook?只是手动调用?我完全理解测试,但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的,并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您? 最佳答案 不确定您到底想听什么,但是有几个级别的自动代码库控制:在处理某项功能时,您可以使用类似autotest的内容获得关于哪些有效,哪些无效的即时反馈。要确保您的提
假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外,还有什么方法可以访问C和m中的其他内容?我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)?如何在使用完匿名模块后将其删除,使其定义的常量不再存在? 最佳答案 三个答案:是的,使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于
我正在尝试使用ruby和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封,在我看来soap请求没有正确的命名空间。任何人都可以建议我
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。
给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息? 最佳答案 在Rails3中,update_all不返回任何有意义的信息,除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t