使用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 正常得到的应该是渲染之后的代码，也就是谷歌浏览器加载后的。
再验证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服务
