上一篇博文（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服务。我们先来看一看源码的目录：
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 的配置文件：
| server { | |
| listen 80; | |
| server_name example.com; | |
| root /path/to/your/root; | |
| index index.html; | |
| location / { | |
| try_files $uri @prerender; | |
| } | |
| location @prerender { | |
| set $prerender 0; | |
| if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") { | |
| set $prerender 1; | |
| } | |
| if ($args ~ "_escaped_fragment_") { | |
| set $prerender 1; | |
| } | |
| if ($http_user_agent ~ "Prerender") { | |
| set $prerender 0; | |
| } | |
| if ($uri ~ ".(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff)") { | |
| set $prerender 0; | |
| } | |
| #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs | |
| resolver 8.8.8.8; | |
| if ($prerender = 1) { | |
| #setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing | |
| set $prerender "192.168.1.168:3000*"; | |
| rewrite .* /$scheme://$host$request_uri? break; | |
| proxy_pass http://$prerender; | |
| } | |
| if ($prerender = 0) { | |
| rewrite .* /index.html break; | |
| } | |
| } | |
| } |
下面对相关参数做简单介绍：
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服务的libserver.js里server.createPhantom方法内将phantomjs的启动参数改为：var args = {'--load-images': false, '--ignore-ssl-errors': true, '--ssl-protocol': 'tlsv1.2','--disk-cache':true}; 这个问题便没有再出现。