我在自己的项目中是采用的前后端分离的技术,前端用的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. 【转】IIS初始化(预加载),解决第一次访问慢,程序池被回收问题

    原地址:http://www.debugrun.com/a/mpyWXwg.html 读在最前面: 1.本文以IIS8,Windows Server 2012R2做为案例 2.IIS8 运行在 Win ...

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

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

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

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

  6. HTML5 prefetch即预加载

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

  7. Javascript图片预加载详解

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

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

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

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

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

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

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

随机推荐

  1. Awstats显示国家地区插件GeoIP安装

    Awstats默认安装之后是不具有识别访问者的国家和地区信息的,所以需要安装插件支持Awstats列出访问者的国家和地区,便于分析GeoIP免费的是国家/IP的数据表,GeoIPCityLite是地区 ...

  2. 在Ubuntu下使用 csapp.h 和 csapp.c

    它山之石可以攻玉. 对于<深入理解计算机系统>这本神人写就的神书, 我等凡人就不评论什么啦. 这本书的 第二,三 部分, 真的真的对我理解操作系统有很大的帮助. (当然, 如果你不看第一部 ...

  3. Centos 6 安装 epel yum库

    1.获得epel库安装rpm包 wget https://dl.fedoraproject.org/pub/epel/epel-release-latest-6.noarch.rpm 2.安装获得的r ...

  4. PE文件格式

    以下内容摘录自<加密与解密>: 为了在PE文件中避免有确定的内存地址,出现了相对虚拟地址(RVA)的概念.RVA只是内存中的一个简单的相对于PE文件装入地址的偏移位置.它是一个“相对”地址 ...

  5. Weblogic 10.3.6 在RHEL5.4 下安装

    一WebLogic简介 webserver是用来构建网站的必要软件.可用来解析.发布网页等功能,它是用纯java开发的.weblogic本来不是由bea发明的,是它从别人手中买过来,然后再加工扩展.B ...

  6. Burp Suite Walkthrough(英文版)

    Burp Suite is one of the best tools available for web application testing. Its wide variety of featu ...

  7. Ubuntu Builder —— 一个制作自己的发行版的工具

    Ubuntu Builder 是一个使用起来很简单的用来构建基于 Ubunut 的自己的发行版的工具. 你可以下载最新的 Ubuntu Builder 的 DEB 安装包.下载和安装请前往:http: ...

  8. HTML解析利器 - HtmlAgilityPack

    HtmlAgilityPack 是CodePlex 上的一个开源项目.它提供了标准的DOM API 和XPath 导航--即使 HTML 不是适当的格式! 使用HtmlAgilityPack操作HTM ...

  9. poj 2769 Reduced ID Numbers 同余定理

    链接:http://poj.org/problem?id=2769 题意:寻找数m,是的对于n个数的余数不同 思路:暴力,优化:同余部分不用测试 代码: #include <iostream&g ...

  10. Codeforces.1129E.Legendary Tree(交互 二分)

    题目链接 \(Description\) 有一棵\(n\)个点的树.你需要在\(11111\)次询问内确定出这棵树的形态.每次询问你给定两个非空且不相交的点集\(S,T\)和一个点\(u\),交互库会 ...