在上一篇文章(VUE(SPA)项目中使用SEO-流程及原理分析)提到过,想要搜索引擎的爬虫过来可以爬取到你网站的内容需要用到
由于PhantomJS已不再维护，本篇文章将最新方法放到下方！！！
node.js、Nginx、
PhantomJS（已经不维护，放弃）、puppeteer（代替PhantomJS）
那么这篇文章将会详细的说一下它们的使用方法。(此处放一张图，帮大家回顾一下整个流程)
利用Nginx就是用来区分这次请求是来自爬虫、还是用户，如果是用户就直接返回给页面就好了。
这里 node.js 是做了个启动PhantomJS的作用，具体代码如下：
// server.js
// ExpressJS调用方式
var express = require('express');
var app = express();
var path = process.cwd();
// 引入NodeJS的子进程模块
var child_process = require('child_process');
app.get('*', function(req, res){
// 完整URL
var url = req.protocol + '://'+ req.hostname + req.originalUrl;
// 预渲染后的页面字符串容器
var content = '';
// 开启一个phantomjs子进程
var phantom = child_process.spawn('phantomjs', [path + '/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('加载失败');
res.send('加载失败');
break;
case 2:
console.log('加载超时: '+ url);
res.send(content);
break;
default:
console.log('加载页面: '+ url);
res.send(content);
break;
}
});
});
app.listen(3000, function () {
console.log('Spider app listening on port 3000!');
console.log(path + '/spider.js')
});
利用这个node服务就可以调用到PhantomJS啦，PhantomJS的代码如下：
/*global phantom*/
"use strict";
// 单个资源等待时间，避免资源加载后还需要加载其他资源
var resourceWait = 500;
var resourceWaitTimer;
// 最大等待时间
var maxWait = 5000;
var maxWaitTimer;
// 资源计数
var resourceCount = 0;
// PhantomJS WebPage模块
var page = require('webpage').create();
// 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(req){
resourceCount++;
clearTimeout(resourceWaitTimer);
};
// 资源加载完毕
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(url, function (status) {
if (status !== 'success') {
phantom.exit(1);
} else {
// 当改页面的初始html返回成功后，开启定时器
// 当到达最大时间（默认5秒）的时候，截取那一时刻渲染出来的html
maxWaitTimer = setTimeout(function(){
capture(2);
}, maxWait);
}
});
这里面注释写的比较详细，可以看到这个文件实际上就是模拟一个浏览器窗口，从而获取到页面内容，这样爬虫来了，我们就把这个文件获取到的页面内容甩给它就行了。
接下来进入测试阶段，先测试下PhantomJS是否OK
$ phantomjs spider.js 'http://www.baidu.com'
如果见到在命令行里出现了一推html，那恭喜你，你已经征服PhantomJS啦。
一切都准备就绪之后，需要整体测试一次，可以用Postman这个工具发起测试
如果看到了你的内容，那么恭喜你，你已经征服它们啦。
2021.1.13日更新：
由于PhantomJS已不再维护，如果用PhantomJS抓一些普通的页面还可以用，但是抓SPA项目已经不好用了，下面推荐一个node爬虫工具（puppeteer）来替代PhantomJS
首先我们用npm来安装：
npm install puppeteer
然后将上面的PhantomJS服务改为node服务，代码如下：
var url = process.argv.splice(2)[0];
const puppeteer = require('puppeteer');
async function run(params) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url, {
waitUntil: 'load', // Remove the timeout
timeout: 0
});
const html = await page.content();
console.log(html);
process.exit();
}
process.on('exit', function(code) {
process.exit();
});
run()；
然后再命令行工具中运行(如我的node.js文件名为spider.js)：
node spider.js http://xxxx.com
测试后会在命令行里输出爬取到的HTML文本。
还有一点要注意一下，别忘了把上面的启动命令改掉：
原：
child_process.spawn('phantomjs', [path + '/spider.js', url]);
改为：
child_process.spawn('node', [path + '/spider.js', url]);
如果有小伙伴遇到这篇文章相关的SEO的问题，可以随时私信我！！！
