前段時(shí)間在對(duì)博客進(jìn)行了Vue前后端分離改造，導(dǎo)致了一個(gè)問(wèn)題，網(wǎng)站內(nèi)容無(wú)法得到搜索引擎的收錄。。。這困擾了我一段時(shí)間，由于工作比較繁忙，也沒(méi)有對(duì)此問(wèn)題進(jìn)行探究，巧在最近幫老婆寫(xiě)個(gè)爬蟲(chóng)腳本的時(shí)候，接觸到了PhantomJS，頓時(shí)開(kāi)竅，我可以用PhantomJS來(lái)解決呀~

PhantomJS is a headless WebKit scriptable with a JavaScript API. It has **fast **and **native **support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

于是Google一番，發(fā)現(xiàn)這種方案原來(lái)很多人在用了，天哪~真是凹凸曼了，科普一下，這種解決方案其實(shí)是一種旁路機(jī)制，原理就是通過(guò)Nginx配置，將搜索引擎的爬蟲(chóng)請(qǐng)求轉(zhuǎn)發(fā)到一個(gè)node server，再通過(guò)PhantomJS來(lái)解析完整的HTML。廢話(huà)不說(shuō)，直接上代碼吧！

準(zhǔn)備一個(gè)PhantomJS任務(wù)腳本

首先，我們需要一個(gè)叫spider.js的文件，用于phantomjs 解析網(wǎng)站。

// spider.js
"use strict";

// 單個(gè)資源等待時(shí)間，避免資源加載后還需要加載其他資源
var resourceWait = 500;
var resourceWaitTimer;

// 最大等待時(shí)間
var maxWait = 5000;
var maxWaitTimer;

// 資源計(jì)數(shù)
var resourceCount = 0;

// PhantomJS WebPage模塊
var page = require('webpage').create();

// NodeJS 系統(tǒng)模塊
var system = require('system');

// 從CLI中獲取第二個(gè)參數(shù)為目標(biāo)URL
var url = system.args[1];

// 設(shè)置PhantomJS視窗大小
page.viewportSize = {
    width: 1280,
    height: 1014
};

// 獲取鏡像
var capture = function(errCode){

    // 外部通過(guò)stdout獲取頁(yè)面內(nèi)容
    console.log(page.content);

    // 清除計(jì)時(shí)器
    clearTimeout(maxWaitTimer);

    // 任務(wù)完成，正常退出
    phantom.exit(errCode);

};

// 資源請(qǐng)求并計(jì)數(shù)
page.onResourceRequested = function(req){
    resourceCount++;
    clearTimeout(resourceWaitTimer);
};

// 資源加載完畢
page.onResourceReceived = function (res) {

    // chunk模式的HTTP回包，會(huì)多次觸發(fā)resourceReceived事件，需要判斷資源是否已經(jīng)end
    if (res.stage !== 'end'){
        return;
    }

    resourceCount--;

    if (resourceCount === 0){

        // 當(dāng)頁(yè)面中全部資源都加載完畢后，截取當(dāng)前渲染出來(lái)的html
        // 由于onResourceReceived在資源加載完畢就立即被調(diào)用了，我們需要給一些時(shí)間讓JS跑解析任務(wù)
        // 這里默認(rèn)預(yù)留500毫秒
        resourceWaitTimer = setTimeout(capture, resourceWait);

    }
};

// 資源加載超時(shí)
page.onResourceTimeout = function(req){
    resouceCount--;
};

// 資源加載失敗
page.onResourceError = function(err){
    resourceCount--;
};

// 打開(kāi)頁(yè)面
page.open(url, function (status) {

    if (status !== 'success') {

        phantom.exit(1);

    } else {

        // 當(dāng)改頁(yè)面的初始html返回成功后，開(kāi)啟定時(shí)器
        // 當(dāng)?shù)竭_(dá)最大時(shí)間（默認(rèn)5秒）的時(shí)候，截取那一時(shí)刻渲染出來(lái)的html
        maxWaitTimer = setTimeout(function(){

            capture(2);

        }, maxWait);

    }

});

讓我們來(lái)運(yùn)行一下吧~
$ phantomjs spider.js 'https://wj.qq.com/'

可在終端看到渲染后的HTML結(jié)構(gòu)啦！棒棒噠！

命令服務(wù)化

要做到響應(yīng)搜索引擎爬蟲(chóng)的請(qǐng)求，我們需要將此命令服務(wù)化，通過(guò)node起個(gè)簡(jiǎn)單的web服務(wù)。

// server.js
// ExpressJS調(diào)用方式
var express = require('express');
var app = express();

// 引入NodeJS的子進(jìn)程模塊
var child_process = require('child_process');

app.get('*', function(req, res){

    // 完整URL
    var url = req.protocol + '://'+ req.hostname + req.originalUrl;

    // 預(yù)渲染后的頁(yè)面字符串容器
    var content = '';

    // 開(kāi)啟一個(gè)phantomjs子進(jìn)程
    var phantom = child_process.spawn('phantomjs', ['spider.js', url]);

    // 設(shè)置stdout字符編碼
    phantom.stdout.setEncoding('utf8');

    // 監(jiān)聽(tīng)phantomjs的stdout，并拼接起來(lái)
    phantom.stdout.on('data', function(data){
        content += data.toString();
    });

    // 監(jiān)聽(tīng)子進(jìn)程退出事件
    phantom.on('exit', function(code){
        switch (code){
            case 1:
                console.log('加載失敗');
                res.send('加載失敗');
                break;
            case 2:
                console.log('加載超時(shí): '+ url);
                res.send(content);
                break;
            default:
                res.send(content);
                break;
        }
    });

});

app.listen(3000, function () {
  console.log('Spider app listening on port 3000!');
});

運(yùn)行node server.js，此時(shí)我們已經(jīng)有了一個(gè)預(yù)渲染的web服務(wù)啦，接下來(lái)的工作便是將搜索引擎爬蟲(chóng)的請(qǐng)求轉(zhuǎn)發(fā)到這個(gè)web服務(wù)，最終將渲染結(jié)果返回給爬蟲(chóng)。
為了防止node進(jìn)程掛掉，可以使用nohup來(lái)啟動(dòng)，nohup node server.js &。

通過(guò)Nginx配置，我們可以輕松的解決這個(gè)問(wèn)題。

upstream spider_server {
  server localhost:3000;
}

server {
    listen       80;
    server_name  example.com;
    
    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 ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {
        proxy_pass  http://spider_server;
      }
    }
}

大功告成！

注：本文代碼主要參考以下文章的分享，鄙人略作修改后的可用版本，感謝分享！

參考鏈接：
https://www.mxgw.info/t/phantomjs-prerender-for-seo.html
http://imweb.io/topic/560b402ac2317a8c3e08621c
https://icewing.cc/linux-install-phantomjs.html