上一篇博文（http://www.cnblogs.com/ideal-lx/p/5625428.html）介紹了單頁面搜索引擎優化的原理，以及介紹了兩個開源框架的優劣。prerender框架的工作原理在上篇也有介紹，本片博文主要介紹prerender.io的部署實踐過程。其實部署的過程還是比較簡單的，閱讀原網站可以直接移步：https://github.com/prerender/prerender。
一、支持google優化方案
上篇文也有提到，谷歌提出了自己的一套針對ajax頁面的抓取方案，prerender在這里同樣對其做了支持。使用起來很簡單：
1、添加<meta name="fragment" content="!">標簽在每個主頁面的header內。
2、如果url中含有#，將它們變成#!（hash-bang）的形式.
關於上面第二點，angular的api $locationProvider.hashPrefix('!');即可使url變成hash-bang形式。
二、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服務。我們先來看一看源碼的目錄：
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服務基本上就搭建成功了。
三、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服務所在的地址。
四、緩存的設置
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}; 這個問題便沒有再出現。