我在自己的项目中是采用的前后端分离的技术,前端用的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 4h2irJrQyJnfeXiflvWg;
        	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!

使用Prerender.io进行网站预加载的更多相关文章

  1. IIS初始化(预加载),解决第一次访问慢,程序池被回收问题

    你以为你可以慢,那是不可能的!你以为你可以不动,那也是不可能的! 河南是守株待兔故事情节的发源地,讲的是懒惰的农夫坐在树桩旁等待可爱的小毛兔撞树的故事,那么这种事情怎么可能天天出现呢!你以为的事并一定 ...

  2. 使用FluentScheduler和IIS预加载在asp.net中实现定时任务管理

    FluentScheduler介绍 github地址:https://github.com/fluentscheduler/FluentScheduler FluentScheduler是一个简单的任 ...

  3. 详解HTML5中rel属性的prefetch预加载功能使用

    在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率 ...

  4. 页面资源预加载(Link prefetch)功能加速你的页面加载速度

    有了浏览器缓存,为何还需要预加载? 用户可能是第一次访问网站,此时还无缓存 用户可能清空了缓存 缓存可能已经过期,资源将重新加载 用户访问的缓存文件可能不是最新的,需要重新加载 页面资源预加载/预读取 ...

  5. HTML5 prefetch即预加载

    原文地址 声明:此文带着自己的理解,不完全按原文翻译 prefetch 即预加载,在用户需要前我们就将所需的资源加载完毕. 有了浏览器缓存,为何还需要预加载? 用户可能是第一次访问网站,此时还无缓存 ...

  6. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  7. ASP.NET MVC3 Razor 调试与预加载

    目录(?)[-] 获取服务器信息 FormsAuthenticationSlidingExpiration 属性 MVC3预加载   在ASP.NET MVC3开发中,调试中怎么也是不可缺少的,那对于 ...

  8. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  9. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  10. 使用 SVG 实现一个漂亮的页面预加载效果

    今天我们要为您展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果.对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊 ...

随机推荐

  1. Asp.Net Core 项目实战之权限管理系统(6) 功能管理

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

  2. WebAPP与原生APP的交互设计区别

    WebAPP和原生APP同为移动端,很少有研究这两项的交互区别,最近公司做了一次从原生APP到WebAPP(HTML5 )的移植,故总结一下期间遇到的问题及不同点总结. 从使用场景上,WebAPP用户 ...

  3. WPF之无法触发KeyDown或者KeyUp键盘事件

    有时候我们可能在Panel(StackPanel.Canvas.Grid)上或者是在一些默认不支持Focus的控件上添加了KeyDown或者KeyUp,可是残酷的现实告诉我们,这是无法触发的,怎么办呢 ...

  4. 长期演进技术(LTE,Long Term Evolution)

    /********************************************************************************* * 长期演进技术(LTE,Long ...

  5. 实验教学管理系统 c语言程序代写源码下载

    问题描述:实验室基本业务活动包括:实验室.班级信息录入.查询与删除:实验室预定等.试设计一个实验教学管理系统,将上述业务活动借助计算机系统完成. 基本要求: 1.必须存储的信息 (1)实验室信息:编号 ...

  6. 【JSP动态网站】JDBC连接SqlServer 2008数据库

    JSP程序需要通过JDBC接口才能访问数据库. 启动MyEclipse,选择“Window”→“Open Perspective”→“MyEclipse Database Explorer”菜单项,打 ...

  7. [UWP]了解模板化控件(7):支持Command

    以我的经验来说,要让TemplatedControl支持Command的需求不会很多,大部分情况用附加属性解决这个需求会更便利些,譬如UWPCommunityToolkit的HyperlinkExte ...

  8. 关于ruby gem无法连接到rubygems.org的解决方案

    RubyGems 镜像 - 淘宝网 为什么有这个? 由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败.所以你会与遇到 gem ins ...

  9. react VS vue 我们究竟该如何选择(从项目的角度帮你分析)

    一.序言 现在web开发最火的两个框架,react和vue.听起来就感觉很牛逼的样子.确实,不得不服,创造出这2种框架的人真的是牛逼.不过更牛逼的是为这2中框架不断完善的人.一个优秀的idea,会在很 ...

  10. python mysql索引 优化神器explain 慢查询

    ##############总结########## 数据库中专门帮助用户快速找到数据的一种数据结构 类似于字典的目录的索引 索引的作用:约束和加速查找 工作原理: b+树形结构 最上层是树根,中间是 ...