使用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）

　　改完之后推出xshell记得先exit，不要直接关闭，因为export是在当前xshell生效的。改完后还要记得重启node服务