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 的配置文件：

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服务的lib\server.js里server.createPhantom方法内将phantomjs的启动参数改为：var args = {'--load-images': false, '--ignore-ssl-errors': true, '--ssl-protocol': 'tlsv1.2','--disk-cache':true}; 这个问题便没有再出现。