phantomJS+nodeJS+nginx完美解决前后端分离SEO问题
此文至项目已经采用前后端分离，但遇到SEO问题的工程师们。
写在前面：
公司网站属于信息类网站，在项目立项的时候想降低前后端开发的耦合性，于是就采用了前后端分离的做法，这种方式在开发期间确实便捷了不少，前端负责界面和数据渲染，后台负责API接口开发和文档编写，一切都来得那么的有序。但是当运营部开始投百度广告的时候问题来了，百度的spider只会爬取页面数据，不会爬取执行JS后的页面数据，问题已经出现，不可能叫程序猿们重新撸一次代码吧，不管是从人力物力财力角度出发，公司都不会同意这样的事情发生，无限头大中。。。。
正文：
为了解决问题，就必须先要知道问题出在哪里？我们先来看看前后端分离spider工作流程，JS并不会执行。
于是我想到是否能在spider和web服务器之间加一个自己的spider帮助其他spider抓取执行JS后的页面数据。
朝着这个思路，的确找到存在这样一种spider程序可以抓取执行JS后的页面数据，phantomJS下载地址：http://npm.taobao.org/dist/phantomjs/，入门教程：http://javascript.ruanyifeng.com/tool/phantomjs.html，phantomJS是一个类似于nodeJS的程序，执行JS代码，下面是抓取指定数据的JS文件代码spider.js
/*global phantom*/
"use strict";
// 单个资源等待时间，避免资源加载后还需要加载其他资源
var resourceWait = 500;
var resourceWaitTimer;
// 最大等待时间
var maxWait = 5000;
var maxWaitTimer;
// 资源计数
var resourceCount = 0;
// PhantomJS WebPage模块
var page = require('webpage').create();
page.settings.loadImages = false; //为了提升加载速度，不加载图片
// NodeJS 系统模块
var system = require('system');
// 从CLI中获取第二个参数为目标URL
var url = system.args[1];
// 设置PhantomJS视窗大小
page.viewportSize = {
width: 1280,
height: 1014
};
// 获取镜像
var capture = function(errCode){
// 外部通过stdout获取页面内容
console.log(page.content);
// 清除计时器
clearTimeout(maxWaitTimer);
// 任务完成，正常退出
phantom.exit(errCode);
};
page.onResourceRequested = function(requestData, request) {
resourceCount++;
clearTimeout(resourceWaitTimer);
//过滤页面不想加载的链接，我这里是过滤了我页面的百度统计代码和cnzz统计代码，你可以自定义自己的过滤规则（正则表达式）
var _url = requestData['url'];
if ((/.+?(baidu|cnzz).+?/gi).test(_url)){
//console.log('Skipping:'+requestData['url']+'------------------------------------------------------------------------------');
request.abort();
}else{
//console.log('NoSkipping:'+requestData['url']+'-----------------------------------------------------------------------------------------');
}
};
// 资源加载完毕
page.onResourceReceived = function (res) {
// chunk模式的HTTP回包，会多次触发resourceReceived事件，需要判断资源是否已经end
if (res.stage !== 'end'){
return;
}
resourceCount--;
if (resourceCount === 0){
// 当页面中全部资源都加载完毕后，截取当前渲染出来的html
// 由于onResourceReceived在资源加载完毕就立即被调用了，我们需要给一些时间让JS跑解析任务
// 这里默认预留500毫秒
resourceWaitTimer = setTimeout(capture, resourceWait);
}
};
// 资源加载超时
page.onResourceTimeout = function(req){
resouceCount--;
};
// 资源加载失败
page.onResourceError = function(err){
resourceCount--;
};
// 打开页面
page.open('https://www.yuejia.me', function (status) {
if (status !== 'success') {
phantom.exit(1);
} else {
// 当改页面的初始html返回成功后，开启定时器
// 当到达最大时间（默认5秒）的时候，截取那一时刻渲染出来的html
maxWaitTimer = setTimeout(function(){
capture(2);
}, maxWait);
}
});然后执行js，怎么执行我就不想详细说了，作为程序猿的基础知识还是要了解，实在不知道的在后面留言，我详细回复你。
执行后就会得到执行了JS的页面数据了，然后我们需要把phantomjs的数据返回给代理服务，在了解后发现，nodejs可以直接调用phantomJS，当然你也可以用Java执行命令的方式来调用phantomJS，这里就用nodejs来做为phantomJS的中转件了，nodeJS下载地址：http://nodejs.cn/download/
下面是nodeJS作为服务器，监听8081,端口传递请求url到phantomJS抓取数据的JS，其中.replace(‘baiduPC[E]-QUYU’,”)是我在测试的时候发现不知道为什么如果后面链接加了这个玩意儿，phantomJS就会爬取失败，所以我加把它替换了，如果知道的朋友麻烦留言说下，谢谢啦。
// 引入NodeJS的子进程模块
var child_process = require('child_process');
var http = require("http");
http.createServer(onRequest).listen(8081);
function onRequest(req, res) {
// 完整URL
var url = req.originalUrl.replace('baiduPC[E]-QUYU','');
console.log("url:"+url)
// 预渲染后的页面字符串容器
var content = '';
// 开启一个phantomjs子进程
var phantom = child_process.spawn('phantomjs.exe', ['spider.js', url]);
// 设置stdout字符编码
phantom.stdout.setEncoding('utf8');
// 监听phantomjs的stdout，并拼接起来
phantom.stdout.on('data', function(data){
content += data.toString();
});
// 监听子进程退出事件
phantom.on('exit', function(code){
switch (code){
case 1:
console.log('load error');
res.write('加载失败');
break;
case 2:
console.log('timeout: '+ url);
res.write(content);
break;
default:
res.write(content);
break;
}
res.end();
});
}
到这里我们的nodeJS+phantomJS的配置就已经完成了，不过记得把phantomJS page.open(‘https://www.yuejia.me‘, function (status){…中的’https://www.yuejia.me‘替换成参数url，及page.open(url, function (status){…让需要抓取的页面从nodeJS传入，接下来就是需要把爬虫的请求转发到我们的nodeJS了，我这里采用了主流的Nginx来做
以下是nginx监听请求是否爬虫请求，是就转发到nodeJS去，不是就去取我们正常的页面数据。
location / {
proxy_set_header Host $host:$proxy_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#爬虫特殊处理
if ($http_user_agent ~* "qihoobot|Baiduspider|Googlebot|Googlebot-Mobile|Googlebot-Image|Mediapartners-Google|Adsbot-Google|Feedfetcher-Google|Yahoo! Slurp|Yahoo! Slurp China|YoudaoBot|Sosospider|Sogou spider|Sogou web spider|MSNBot|ia_archiver|Tomato Bot"){
proxy_pass http://spider_server;
}
root c:/webapps/website;
index index.html index.htm;
}
结束语：
前后端分离确实是在开发的时候给我们带来便捷，不过在API安全方面 SEO方面还有些欠缺或者说存在问题。这个对SEO检索出的方案个人觉得效果不是最好的，有时候会加载超时或者加载错误等等，不过这也是目前来说觉得最好的解决方案之一了，如果有更好的方案，希望大家留言，谢谢啦，关于前后端分离API通信安全问题我个人采用的是JWT验证的方式，感兴趣的朋友可以去看看我另外一篇文章，前后端问题API安全校验之JWT