使用Prerender.io進行網站預載入
- 2019 年 10 月 3 日
- 筆記
我在自己的項目中是採用的前後端分離的技術，前端用的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
1、首先註冊登錄 Prerender.io，並且獲得個人token（需*學上網註冊）
2、配置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; } } } }
3、檢查nginx並重啟
nginx -t service nginx restart
4、下載prerender服務安裝在本地
git clone https://github.com/prerender/prerender.git
若沒有安裝git服務，可手動從Github下載再上傳到/usr文件夾下，再解壓到當前目錄下
5、安裝npm依賴
cd /usr/prerender # Phantomjs 官方的下載地址會超時，此處重新指定其下載地址為淘寶鏡像 export PHANTOMJS_CDNURL=https://npm.taobao.org/mirrors/phantomjs npm install
文檔結構如下：
6、運行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負責網頁的解析。
7、安裝Chrome：
7.1、配置yum源
因為中國無法訪問Google，所以需要自己配置yum源，在目錄 /etc/yum.repos.d/ 下新建google-chrome.repo文件
cd /ect/yum.repos.d/ touch google-chrome.repo
7.2、寫入內容
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.3、安裝運行
# 中國推薦 yum -y install google-chrome-stable --nogpgcheck
7.4、安裝路徑
安裝成功後，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.5、以守護進程運行chrome
vim /opt/google/chrome/google-chrome
將最後一行修改為：
exec -a "$0" "$HERE/chrome" "$@" --user-data-dir --no-sandbox
8、啟動Prerender.oi服務
運行
su other
cd /usr/prerender
node ./server.js
看到以下則啟動成功
以守護進程啟動：nohup node ./server.js &
9、檢查各種進程是否啟動成功
用命令“netstat -lntp”查看得到如下：
都已啟動！
10、用curl測試預載入是否生效
先用curl http://www.******.com 查看是得到未渲染的源碼
用本地prerender.io服務代理驗證curl http://localhost:3000/http://www.*******.com 正常得到的應該是渲染之後的程式碼，也就是Google瀏覽器載入後的。
再驗證nginx攔截轉發是否正常，模擬爬蟲curl –user-agent “baiduspider” http://www.******.com 得到的也是代理後的結果，一切OK！
——————2019-08-14補充內容：開啟快取——————-
11、開啟快取
因為Prerender.io進行預載入是先用chrome進行載入後再返回給用戶，所以時間會很長，爬蟲時間太長也會影響SEO，所以做了快取
11.1、進入prerender安裝目錄，我的是/usr/prerender，執行以下程式碼：
npm install prerender-memory-cache --save
11.2、修改server.js，在server.start()之前添加一行：
server.use(require('prerender-memory-cache'));
11.3、重啟node服務
kill後重啟
11.4、檢查快取是否生效
第一次請求curl –user-agent “baiduspider” http://www.******.com 大概耗時5s才有返回
第一次請求curl –user-agent “baiduspider” http://www.******.com 耗時不到0.1s
已生效！
11.5、設置還款市場與快取項數量
設置環境變數來控制：
export CACHE_TTL=600（秒為單位，默認60）
export CACHE_MAXSIZE=1000（默認100）
改完之後推出xshell記得先exit，不要直接關閉，因為export是在當前xshell生效的。改完後還要記得重啟node服務
