angularjs应用prerender.io 搜索引擎优化实践

上一篇博文（
http://www.cnblogs.com/ideal-lx/p/5625428.html）介绍了单页面搜索引擎优化的原理，以及介绍了两个开源框架的优劣。prerender框架的工作原理在上篇也有介绍，本片博文主要介绍prerender.io的部署实践过程。其实部署的过程还是比较简单的，阅读原网站可以直接移步：
https://github.com/prerender/prerender。

一、支持google优化方案

上篇文也有提到，谷歌提出了自己的一套针对ajax页面的抓取方案，prerender在这里同样对其做了支持。使用起来很简单：

1、添加<meta name="fragment" content="!">标签在每个主页面的header内。

2、如果url中含有#，将它们变成#!（hash-bang）的形式.

关于上面第二点，angular的api $
locationProvider.hashPrefix('!');即可使url变成hash-bang形式。

二、prerender.io服务端部署

prerender官方提供了云服务，获取tocken后便可以配置使用。不过我们这里不想使用官方的服务，选择自己搭建自己的可控prerender服务，当然，最好使用linux机器作为服务器。过程也非常简单，上篇介绍，prerender服务是一个持续在跑的node服务，负责接收client转发过来的请求，然后再请求web服务，获得html、js等静态文件后执行并继续请求后续ajax请求。首先要在服务器上安装node运行环境，执行以下步骤即可安装部署prerender服务：

$ git clone https://github.com/prerender/prerender.git

$ cd prerender

$ npm install

$ node server.js

过程中会安装phantomjs，最后一步“node server.js”便启动了prerender服务。我们先来看一看源码的目录：

最外层的server.js 是启动的主逻辑脚本，内容很短，作用是加载插件，然后启动服务。lib文件夹下有一个plugins文件夹，存放了一系列插件，如黑白名单、缓存、日志等等功能，可以在外层目录的server.js 内选择性加载使用。lib下的index.js定义了监听的端口和启用服务，server.js里是具体的请求和返回处理逻辑，phantomjs的启停也是在其中，prerender会启动多个phantomjs进程并行处理请求。

服务跑起来之后，如无特殊指定和修改，此时的默认端口是3000，可以尝试访问：
http://localhost:3000/http://www.yourwebsite.com看到这里就清楚了，其实就是把咱们页面的url当做参数传给prernder服务，就可以了。如果是在另外的主机，同样可以访问 http://prerender服务的地址:监听端口号/需要渲染的页面url，即可看到通过prerender.io渲染后的页面。如果有条件的话可以通过本地爬虫访问此url，你会发现所有的动态数据也可以同样得到。

如果你担心你的prerender服务会异常崩溃，可以安装forever指令，使用forever指令用守护进程的方式启动prerender服务，类似于这样：forever start -l prerender.log --spinSleepTime 5000 --minUptime 5000
/usr/local/prerender-linux/server.js 进一步的，你可以将启动指令写入linux启动文件中，做重启的自启动。到这里prerender服务基本上就搭建成功了。

三、prerender.io客户端部署

prerender提供了非常丰富的客户端实现方案，包括node、Ruby、Apache、Nginx、Java、Go、Grails等等官方非官方方案，上面git的连接即可以查到各个方案的部署方式。笔者的应用是前后端分离使用nginx做静态资源容器的环境，这里介绍一下nginx的部署方案，以下是官方提供的nginx.conf 的配置文件：

下面对相关参数做简单介绍：

listen：监听端口号，根据项目实际情况而定。

server_name：监听的域名。

root ：默认首页的路径。

index：默认的首页页面。

location @prerender 下依次是对：userAgent的配置、可根据需要自行添加；_escaped_fragment_符号的过滤；prerender自己爬虫请求的排除；不需要抓取的文件类型配置，可自行添加。

然后下面 如果$prerender 变量为1，就把请求定向到prerender服务所在的地址。

四、缓存的设置

prerender提供了丰富的缓存机制，用来存储已抓取的页面，当下次同样的页面抓取请求再来的时候prerender便可以命中缓存返回给爬虫。笔者使用的是levelDB的缓存，安装可查看
https://github.com/maxlath/prerender-level-cache，需要安装一个node外壳的levelDB数据库，供prerender服务插件调用。插件的启用方法，就是在server.js里server.use(require('prerender-level-cache'));即可。

另外在生产环境测试的时候，笔者遇到一个问题，就是pererender服务跑了一段时间之后，爬虫过来的请求有些会返回304状态码回去，这样的话爬虫是收不到页面数据的。304是http协议做缓存控制的状态码，返回304意味着服务端认为请求方拥有最新的缓存。我解决这个问题的方式是又开启了一次phantomjs的本地缓存，在prerender服务的lib\server.js里server.createPhantom方法内将phantomjs的启动参数改为：var args = {'--load-images': false, '--ignore-ssl-errors': true, '--ssl-protocol': 'tlsv1.2'}; 这个问题便没有再出现。