angularjs應用prerender.io 搜索引擎優化實踐

　　上一篇博文（http://www.cnblogs.com/ideal-lx/p/5625428.html）介紹了單頁面搜索引擎優化的原理，以及介紹了兩個開源框架的優劣。prerender框架的工做原理在上篇也有介紹，本片博文主要介紹prerender.io的部署實踐過程。其實部署的過程仍是比較簡單的，閱讀原網站能夠直接移步：https://github.com/prerender/prerender。

1、支持google優化方案

    上篇文也有提到，谷歌提出了本身的一套針對ajax頁面的抓取方案，prerender在這裏一樣對其作了支持。使用起來很簡單：

　一、添加<meta name="fragment" content="!">標籤在每一個主頁面的header內。

　二、若是url中含有#，將它們變成#!（hash-bang）的形式.

     關於上面第二點，angular的api $locationProvider.hashPrefix('!');便可使url變成hash-bang形式。

2、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服務基本上就搭建成功了。　

　　

3、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服務所在的地址。

4、緩存的設置

　　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}; 這個問題便沒有再出現。