摘要：使用生成靜態(tài)頁，再配置在爬蟲訪問時(shí)提供靜態(tài)頁中的內(nèi)容。如何在爬蟲訪問時(shí)讓爬蟲獲取到靜態(tài)頁中的內(nèi)容要演練此部分內(nèi)容，首先你要把網(wǎng)站用部署。

Angular 的優(yōu)點(diǎn)有很多，但如果用它來開發(fā)網(wǎng)站的話，就不得不面對(duì)它的兩大缺點(diǎn)：

首頁加載慢

搜索引擎的爬蟲獲取不到頁面內(nèi)容

由于 Angular 是通過 js 動(dòng)態(tài)生成 dom 并插入到頁面中，搜索引擎默認(rèn)只能獲得頁面的標(biāo)題。我們可以使用 curl[1] 命令測(cè)試一下。

curl http://localhost:17082

可以看到類似這樣的內(nèi)容：

整個(gè)頁面內(nèi)容只剩下 title 了。

目前有三種解決方案：

服務(wù)器端渲染?？梢砸淮谓鉀Q首屏加載慢和SEO問題。解決方案比較復(fù)雜，跨度較大。

頁面緩存服務(wù)。目前比較流行的是 prerender.io?？梢哉f是目前最簡(jiǎn)單且可用的 SEO 方案。本文將重點(diǎn)介紹此方案。

使用 phantomjs 生成靜態(tài)頁，再配置 nginx 在爬蟲訪問時(shí)提供靜態(tài)頁中的內(nèi)容。實(shí)測(cè)稍微復(fù)雜一點(diǎn)的頁面用 phantomjs 生成靜態(tài)頁時(shí)會(huì)報(bào)錯(cuò)。本文將只簡(jiǎn)單介紹生成首頁靜態(tài)頁的方法。

要演練此部分內(nèi)容，首先你要把網(wǎng)站用 nginx 部署[2]。
prerender 的原理是，配置 nginx，判斷出是爬蟲來訪時(shí)，先將請(qǐng)求頁面地址發(fā)送給 prerender 服務(wù)，由 prerender 服務(wù)渲染出頁面內(nèi)容，再將頁面內(nèi)容返回給爬蟲。prerender 官網(wǎng)提供的服務(wù)地址是http://service.prerender.io/ 我們可以測(cè)試一下該服務(wù)的效果，在瀏覽器中訪問：

https://service.prerender.io/https://www.google.com

即可在瀏覽器中看到由 prerender 服務(wù)返回的靜態(tài)頁面內(nèi)容了。
雖然我們可以直接使用 http://service.prerender.io/ 服務(wù)，但如果你不希望依賴一個(gè)隨時(shí)可能無法訪問的服務(wù)的話，可以架設(shè)一個(gè)自己的 prerender 服務(wù)。或者你希望在本地演練，還沒有公網(wǎng)的IP或域名時(shí)，也需要架設(shè)自己的 prerender 服務(wù)。

首先在 github 上下載 prerender 源代碼。下載后執(zhí)行“npm install”安裝依賴項(xiàng)，再執(zhí)行“node server.js”即可開啟服務(wù)，默認(rèn)端口號(hào)是 3000.我們可以使用

http://localhost:3000/https://www.baidu.com

測(cè)試一下。

注意： 如果是在 linux 下部署的話，還必須先安裝 chrome 瀏覽器，并且不要以 root 身份執(zhí)行 “node server.js”。想要一直后臺(tái)運(yùn)行服務(wù)的話，可以安裝 forever：“npm install forever -g”，然后使用 “forever start server.js” 后臺(tái)運(yùn)行服務(wù)。

這一步是比較復(fù)雜和關(guān)鍵的。好在 prerender 已經(jīng)給我們寫好了 nodejs、ruby on rails、asp.net、nginx、Apache 等 10 多種 Web 服務(wù)器的配置方案，例如官方提供的 nginx 配置方式，但實(shí)測(cè)此配置文件有一點(diǎn)問題，直接拿過來用是不好用的。我對(duì)它進(jìn)行了一些小修改：

    server {
        listen       17082;
        server_name  localhost:17082;

        location / {
            root   C:projectszbclub-dist;
            index  index.html;

            location / {
                try_files $uri @prerender;
            }
        }

        location @prerender {
            #proxy_set_header X-Prerender-Token YOUR_TOKEN;
            
            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|svg|eot)") {
                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) {
                rewrite .* /$scheme://$host:$server_port$request_uri? break;
                proxy_pass http://localhost:3000;
            }
            if ($prerender = 0) {
                rewrite .* /index.html; # 注意這里去掉了結(jié)尾的 “break”，否則會(huì)報(bào) 404 錯(cuò)誤
            }
        }
    }

修改完配置文件記得要使用命令 “nginx -s reload” 重新加載。
之后我們首先用瀏覽器訪問我們的網(wǎng)站，測(cè)試一下正常訪問沒有異常。然后就可以使用 curl[1] 命令模擬百度蜘蛛訪問頁面了。

curl -A "Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html）" http://localhost:17082 > z:	empzb-baidu.html

之后打開 z: empzb-baidu.html 應(yīng)該可以看到由 prerender 服務(wù)渲染出的頁面內(nèi)容。

無論使用 prerender 官網(wǎng)上的服務(wù)還是自己架設(shè) prerender 本地服務(wù)，它的速度都不快。雖然 prerender 服務(wù)返回的頁面內(nèi)容只給爬蟲看，并不影響用戶體驗(yàn)，但爬蟲獲得網(wǎng)頁內(nèi)容的響應(yīng)時(shí)間也是影響搜索結(jié)果排名的！聰明的 prerender 在此看到了商機(jī)。我們來試用一下。首先，你要把 nginx.conf 中的本地服務(wù)改成官方服務(wù) https://service.prerender.io 。然后在prerender 官網(wǎng)注冊(cè)賬戶，驗(yàn)證郵件后登錄，默認(rèn)就會(huì)進(jìn)入“Cached Pages”標(biāo)簽頁，里面“your token：”后面跟著的就是分配給你的 token。將此 token 放置到 nginx.conf 中被注釋掉的那行 “X-Prerender-Token” 后面并取消注釋即可：

        location @prerender {
            proxy_set_header X-Prerender-Token rM9WgVZmgir9bSiE4sGp;
            
            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|svg|eot)") {
                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) {
                rewrite .* /$scheme://$host:$server_port$request_uri? break;
                proxy_pass https://service.prerender.io;
            }
            if ($prerender = 0) {
                rewrite .* /index.html; # 注意這里去掉了結(jié)尾的 “break”，否則會(huì)報(bào) 404 錯(cuò)誤
            }
        }

修改配置之后使用命令“nginx -s reload”重新加載，然后再次模擬百度蜘蛛訪問：

curl -A "Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html）" http://47.94.88.230 > z:	empzb-online.html

刷新 prerend.io 頁面，在“Cached Pages”標(biāo)簽頁下方的列表中即可看到已被自動(dòng)緩存了的頁面地址。實(shí)測(cè)不用緩存的時(shí)候要 3、4 秒鐘的頁面，緩存后只要 0.2 秒，效果很理想。不過免費(fèi)賬戶最多只給緩存 250 個(gè)頁面，一般也夠用了。如果想要緩存更多頁面的話就付費(fèi)吧，價(jià)格表在https://prerender.io/pricing，起步價(jià)每月 15 美元可以緩存 20000 個(gè)頁面。但需要注意的是，緩存默認(rèn)的刷新周期都是 7 天，免費(fèi)版也可以自由修改刷新周期，最短到 1 天。但付費(fèi)版則是周期越短費(fèi)用越高，例如起步價(jià) 15 美元那個(gè)，7 天要 15 美元，6 天要 17 美元，5 天要 20 美元，1 天則要 84 美元。

prerender已經(jīng)足夠好了，但如果你想多了解一下 phantomjs 的話，請(qǐng)接著往下看。使用此種方案，需要解決 3 個(gè)問題：

如何得知網(wǎng)站有多少需要生成靜態(tài)頁的頁面，生成的靜態(tài)頁文件以何種層級(jí)關(guān)系存放，以及如何把訪問地址與靜態(tài)頁文件匹配。

如何使用 phantomjs 生成靜態(tài)頁。

如何在爬蟲訪問時(shí)讓爬蟲獲取到靜態(tài)頁中的內(nèi)容。

我們先忽略前兩個(gè)問題，假設(shè)現(xiàn)在已經(jīng)生成了首頁的靜態(tài)頁（可以先通過瀏覽器保存網(wǎng)頁的功能得到首頁的靜態(tài)頁），先解決問題3。

要演練此部分內(nèi)容，首先你要把網(wǎng)站用 nginx 部署[2]。

爬蟲訪問時(shí)，會(huì)使用特殊的 user agent，以百度蜘蛛的UA為例，它會(huì)使用“Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/s...）”這樣的UA，所以我們可以判斷 UA 中含有“Baiduspider”字樣則意味著是百度蜘蛛來訪問了。

先把靜態(tài)頁放置到網(wǎng)站的 /assets/static/ 下，配置 nginx 的配置文件 nginx.conf:

        location / {
            root   C:projectszbclub-dist;
            index  index.html index.htm;
           
            if ( $http_user_agent ~*  "Baiduspider"){
                rewrite ^/index.html$ /assets/static/index.html last;
            }
        }

保存配置文件后要使用 nginx -s reload 重新加載網(wǎng)站，然后使用 curl 命令的“-A”參數(shù)模擬百度蜘蛛訪問首頁：

curl -A "Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html）" http://localhost:17082 > z:	empzbclub.html

打開 z: empzbclub.html 確認(rèn)是否已經(jīng)返回了靜態(tài)頁的內(nèi)容。

生成靜態(tài)頁的腳本很簡(jiǎn)單：

var fs = require("fs");
var page = require("webpage").create();
phantom.outputEncoding = "utf-8";//指定編碼方式
page.open("http://localhost:17082", function (status) {
    if (status === "success") {
        fs.write("z:	empindex.html", page.content, "w");
    } else {
        console.log("網(wǎng)頁加載失敗");
    }
    phantom.exit(0);//退出系統(tǒng)
});

將此腳本保存為“phantom-static-page.js”，在命令行執(zhí)行此腳本：

phantomjs phantom-static-page.js

[1] curl

在Windows下也可以使用 curl。
如果遇到 “ Failed writing body” 錯(cuò)誤，可以使用

curl http://localhost:17082 > z:	emp	est.txt

之后即可看到生成的“z: empindex.html”靜態(tài)頁文件。

這樣的命令將輸出寫入文本文件中，再打開文本文件查看內(nèi)容即可。

[2] nginx 部署

如果你是首次使用 nginx，有幾個(gè)地方需要注意。

默認(rèn) nginx 不開啟 gzip，需要修改配置文件開啟 gzip，方法是修改 nginx.conf 配置文件的 http 節(jié)：

http {
    gzip    on;
    gzip_comp_level  6;    # 壓縮比例，比例越大，壓縮時(shí)間越長(zhǎng)。默認(rèn)是1
    gzip_types    text/xml text/plain text/css application/javascript application/x-javascript application/rss+xml;     # 哪些文件可以被壓縮
    gzip_disable    "MSIE [1-6].";     # IE6無效
}

解決刷新二級(jí)頁面時(shí)報(bào) 404 錯(cuò)誤的問題

如果你不是使用hash路由（即路徑中不含“#”），當(dāng)你使用“在新標(biāo)簽頁打開鏈接”的方式打開指向新路由的鏈接，或者在二級(jí)頁面上刷新頁面時(shí)，都會(huì)報(bào)404錯(cuò)誤。這是因?yàn)槁酚芍赶虻捻撁鎸?shí)際是不存在的，是 Angular 虛擬的，必須經(jīng)由 index.html 中放置的根路由（）來渲染，所以需要在配置文件 nginx.conf 增加“tryfile”，把虛擬路徑重定向到 index.html:

    server {
        listen       17082;
       
        location / {
            root   C:projectszbclub-dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
           
            if ( $http_user_agent ~*  "Baiduspider"){
                rewrite ^/index.html$ /assets/static/index.html last;
            }
        }
    }