使用Prerender.io進行網站預加載

我在本身的項目中是採用的先後端分離的技術，前端用的VUE開發，後端是JAVA開發，tomcat部署，nginx轉發，可是VUE開發的項目缺點就是不利於SEO，因此針對SEO作了預加載的操做。

決定採用Prerender.io進行預加載，好處就是不用區分前端是VUE開發的仍是Angular等其它前端技術開發的都能統一作預加載，由於他的原理就是針對Spider爬蟲程序（經過user-agent進行區分，而後用nginx進行轉發），會先用google-chrome加載網站資源，再把加載完成的代碼返回給爬蟲程序；同時nginx轉發時察覺是非Spdier爬蟲來源時就不用google-chrome進行加載後再返回，而是直接訪問原網站，由於這樣勢必會加大處理時長，影響用戶訪問體驗。

使用Prerender.io主體上我是參考了下面這篇文章進行的，可是在過程當中以及一些配置上有改動，且會作一些補充以及我額外遇到的坑的解決方案：
https://blog.csdn.net/zai_xia/article/details/86697300

一、首先註冊登陸 Prerender.io，而且得到我的token（需*學上網註冊）
二、配置Nginx中間件，下面是個人配置。重點說下這裏遇到的坑，就是下面標紅的那塊代碼，必定要去掉

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80;#默認端口是80，若是端口沒被佔用能夠不用修改
        server_name  www.*****.com ****.com;
        root        /opt/coinUnitWebH5/dist;#vue項目的打包後的dist
        index index.html;
        location / {
            #try_files $uri $uri/ @prerender;#須要指向下面的@不然會出現vue的路由在nginx中刷新出現404
            try_files $uri @prerender;
	    index  index.html index.htm;
        }
        #對應上面的@，主要緣由是路由的路徑資源並非一個真實的路徑，因此沒法找到具體的文件
        #所以須要rewrite到index.html中，而後交給路由在處理請求資源
	location @prerender {
        	proxy_set_header X-Prerender-Token 官網上註冊獲得的token;
        	set $prerender 0;
        	if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp") {
           		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) {
            		#setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing
            		#set $prerender "service.prerender.io";
            		set $prerender "127.0.0.1:3000";
			rewrite .* /$scheme://$host$request_uri? break;
            		proxy_pass http://$prerender;
        	}
        	if ($prerender = 0) {
            		#rewrite .* /index.html break;
			rewrite ^.*$ /index.html last;
        	}
    	}
    }
}

三、檢查nginx並重啓

nginx -t
service nginx restart

四、下載prerender服務安裝在本地

git clone https://github.com/prerender/prerender.git

若沒有安裝git服務，可手動從Github下載再上傳到/usr文件夾下，再解壓到當前目錄下

五、安裝npm依賴

cd /usr/prerender

# Phantomjs 官方的下載地址會超時，此處從新指定其下載地址爲淘寶鏡像
export PHANTOMJS_CDNURL=https://npm.taobao.org/mirrors/phantomjs

npm install

文檔結構以下：

六、運行server.js

# 啓動Server.js， 默認監聽3000端口
node server.js

備註：

可用netstat -lntp命令查看是否有3000端口，想重啓服務須要先用ps -ef | grep node查看pid後kill掉再啓動

啓動時，若是預先沒有安裝過Chrome，則會啓動失敗，提示啓動Chrome失敗，未檢測到Chrome，此時安裝Chrome就行了，爲何要安裝Chrome呢，由於Prerender並不負責真正的網頁解析，Prerender只負責解析先後的處理，實際是由Chrome負責網頁的解析。

七、安裝Chrome：

　　7.一、配置yum源

　　由於國內沒法訪問Google，因此須要本身配置yum源，在目錄 /etc/yum.repos.d/ 下新建google-chrome.repo文件

cd /ect/yum.repos.d/

touch google-chrome.repo

　　7.二、寫入內容

vi google-chrome.repo

[google-chrome]
name=google-chrome
baseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearch
enabled=1
gpgcheck=1
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub

　　7.三、安裝運行

# 國內推薦
yum -y install google-chrome-stable --nogpgcheck

　　7.四、安裝路徑

　　安裝成功後，Chrome的安裝路徑應該是
　　/opt/google/chrome

　　默認狀況下，root用戶不能直接運行chrome，因此能夠新建另外一個用戶如other來運行

cd /opt/google/chrome

su other

./chrome

　　備註：

　　這裏我執行./chrome的時候會提示「Gtk-WARNING **: cannot open display」，網上說須要新建的用戶來執行，但是我新建了用戶執行仍是不行，因而又寫換到root用戶，執行「xhost +」命令，用處是讓圖形化界面能在全部用戶上都能展現。但是執行「xhost +」是又遇到新問題，提示「  unable to open display ""  」，簡直了！，而後各類嘗試，用root執行「  執行export DISPLAY=:127.0.0.1.0 」，不行！因而安裝 vncserver ，如何安裝就不累述了，網上一大堆，須要注意的是，執行vncserver命令的時候，若是遇到執行了，沒有異常問題，可是查看進程就是沒有這個進程的時候，必定要看執行命令是打印的log日誌，個人狀況是在log日誌裏面最後面一行有一個Kill，每次啓動後自動kill掉了，因而根據日誌找到啓動腳本文件編輯把最後一行的Kill命令去掉了就好了。

　　通過上面的操做後，再執行xhost +成功，而後用新用戶執行./chrome不成功，仍是要用root用戶執行才行，就沒有繼續深究

　　7.五、以守護進程運行chrome

vim /opt/google/chrome/google-chrome

 

　　將最後一行修改成：

exec -a "$0" "$HERE/chrome" "$@" --user-data-dir --no-sandbox

 

八、啓動Prerender.oi服務

　　運行

su other

cd /usr/prerender

node ./server.js

　　看到如下則啓動成功

　　以守護進程啓動：nohup node ./server.js &

九、檢查各類進程是否啓動成功

　　用命令「netstat -lntp」查看獲得以下：

　　都已啓動！

十、用curl測試預加載是否生效

　　先用curl http://www.******.com 查看是獲得未渲染的源碼

　　用本地prerender.io服務代理驗證curl http://localhost:3000/http://www.*******.com 正常獲得的應該是渲染以後的代碼，也就是谷歌瀏覽器加載後的。

　　再驗證nginx攔截轉發是否正常，模擬爬蟲curl --user-agent "baiduspider" http://www.******.com 獲得的也是代理後的結果，一切OK！

 

------------------2019-08-14補充內容：開啓緩存-------------------

十一、開啓緩存

　　由於Prerender.io進行預加載是先用chrome進行加載後再返回給用戶，因此時間會很長，爬蟲時間太長也會影響SEO，因此作了緩存

　　11.一、進入prerender安裝目錄，個人是/usr/prerender，執行如下代碼：

npm install prerender-memory-cache --save

　　11.二、修改server.js，在server.start()以前添加一行：

server.use(require('prerender-memory-cache'));

　　11.三、重啓node服務

　　kill後重啓

　　11.四、檢查緩存是否生效

　　第一次請求curl --user-agent "baiduspider" http://www.******.com 大概耗時5s纔有返回

　　第一次請求curl --user-agent "baiduspider" http://www.******.com 耗時不到0.1s

　　已生效！

　　11.五、設置還款市場與緩存項數量

　　設置環境變量來控制：

　　export CACHE_TTL=600（秒爲單位，默認60）

　　export CACHE_MAXSIZE=1000（默認100）

　　改完以後推出xshell記得先exit，不要直接關閉，由於export是在當前xshell生效的。改完後還要記得重啓node服務