使用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
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)
- 扩展类库:使用微软的 Visual Studio International Pack 1.0 进行网站简体与繁体的互转和得到汉字、拼音、笔画等相关信息
- 使用 Web Stress Tool 进行网站压力测试
- 使用git管理nodejs+socket.io+redis+juicer+waterfall+ubuntu+aws ec2开发网站
- 哪些中文网站是使用.net技术进行的开发
- 使用命令行工具stsadm.exe进行网站集的备份和恢复
- 使用do 框架进行javascript无阻塞加载脚本
- SharePoint Server 2013开发之旅(二):使用在线的开发人员网站进行SharePoint App开发
- [转]使用SQLite进行网站搜索
- <meta http-equiv="X-UA-Compatible" content="IE=7" />的意思:将IE8使用IE7进行渲染,使网站在IE8上显示正常
- ASP.NET网站权限设计实现(一)——使用PowerDesigner进行数据库设计
- 15 个使用 jQuery Masonry 进行布局的网站
- 网站如何进行延迟加载
- 使用PHP与XML进行网站编程(1)
- 使用MVC的进行网站开发好处
- 使用聚合数据平台对电商网站进行流量以及访问统计
- Web开发中的性能:谈Google和Facebook的网站使用到的技术,图片预加载CSS Sprites
- 关于asp.net网站发布后,使用登录控件和注册控件时出现“数据库只读,无法进行数据更新”的解决方法
- 使用rsync从linux到linux或到windows对网站进行镜像备份
- 使用微软的 Visual Studio International Pack 1.0 进行网站简体与繁体的互转和得到汉字、拼音、笔画等相关信息
- 使用System.IO.Packaging.Package进行文件压缩所产生的问题