使用Prerender.io进行网站预渲染

栏目: 服务器 · Nginx · 发布时间: 5年前

内容简介：使用Angular，Vue，React进行单页网站开发，用户浏览时浏览器动态解析JS，呈现出最终的页面，用户体验比较好，网站性能也提高不少。但网络爬虫并不会动态解析Js，访问所有URL得到的只会是项目入口文件中的代码，不能得到具体的内容，也就无法做网站SEO。使用Prerender.io做网站预渲染，可以将网站页面渲染之后再返回给网络爬虫，间接完成网页的解析。 Prerender相较于其他的解决方案，配置相对要简单一些，不用修改项目源码，代码零侵入，是一个不错的解决方案。

使用Angular，Vue，React进行单页网站开发，用户浏览时浏览器动态解析JS，呈现出最终的页面，用户体验比较好，网站性能也提高不少。

但网络爬虫并不会动态解析Js，访问所有URL得到的只会是项目入口文件中的代码，不能得到具体的内容，也就无法做网站SEO。

使用Prerender.io做网站预渲染，可以将网站页面渲染之后再返回给网络爬虫，间接完成网页的解析。 Prerender相较于其他的解决方案，配置相对要简单一些，不用修改项目源码，代码零侵入，是一个不错的解决方案。

目标

搭建基于Centos 7 和 Nginx 环境的Prerender渲染服务，完成Angular项目中网页的预渲染

预渲染流程图

安装中间件

首先注册登录 Prerender.io，并且获得个人token

token
根据开发文档，配置对应的中间件，如Nginx，Apache等。
配置Nginx中间件，参考配置如下：

server {
    listen 80;
    server_name example.com;
 
    root   /path/to/your/root;
    index  index.html;

    location / {
        try_files $uri @prerender;
    }
 
    location @prerender {
        # 将 YOUR_TOKEN替换为你的个人token
        proxy_set_header X-Prerender-Token YOUR_TOKEN;
        
        set $prerender 0;
        if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
            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) {
            
            # 后续将service.prerender.io替换为自己的prerender服务，如127.0.0.1:3000
            set $prerender "service.prerender.io";
            rewrite .* /$scheme://$host$request_uri? break;
            proxy_pass http://$prerender;
        }
        if ($prerender = 0) {
            rewrite .* /index.html break;
        }
    }
}
复制代码

参考配置： gist.github.com/thoop/81658…

检测nginx配置，并重启nginx

nginx -t
service nginx restart
复制代码

中间件安装完成

安装Prerender服务

在服务器上安装Node环境
下载Prerender服务

git clone https://github.com/prerender/prerender.git
复制代码

若没有安装git服务，可手动从Github下载再上传到/usr文件夹下，再解压到当前目录下 3. 安装npm依赖

cd /usr/prerender
# Phantomjs 官方的下载地址会超时，此处重新指定其下载地址为淘宝镜像
export PHANTOMJS_CDNURL=https://npm.taobao.org/mirrors/phantomjs
npm install
复制代码

文件结构如下：

运行server.js

# 启动Server.js， 默认监听3000端口
node server.js
复制代码

此时，如果预先没有安装过Chrome，则会启动失败提示启动Chrome失败，未检测到Chrome，此时安装Chrome就好了为什么要安装Chrome呢，因为Prerender并不负责真正的网页解析，Prerender只负责解析前后的处理，实际是由Chrome负责网页的解析。

安装Chrome

配置yum源因为国内无法访问Google，所以需要自己配置yum源，在目录 /etc/yum.repos.d/ 下新建google-chrome.repo文件

cd /ect/yum.repos.d/
touch google-chrome.repo
复制代码

写入内容 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
复制代码

安装运行

# 国内推荐
yum -y install google-chrome-stable --nogpgcheck
复制代码

安装路径安装成功后，Chrome的安装路径应该是 /opt/google/chrome 默认情况下，root用户不能直接运行chrome，所以可以新建另一个用户如other来运行

cd /opt/google/chrome
su other
./chrome
复制代码

Chrome安装完成

启动Prerender.io服务

已other用户再次运行server.js

su other
cd /usr/prerender
node ./server.js
复制代码

此时应该是可以成功启动的，并且可以看到该服务监听3000端口启动结果：

2. 修改nginx配置

if ($prerender = 1) {
            
           # 修改如下：
            # set $prerender "service.prerender.io";
            set $prerender "127.0.0.1:3000";
            rewrite .* /$scheme://$host$request_uri? break;
            proxy_pass http://$prerender;
        }
复制代码

保存重启Nginx
再次启动Prerender服务

nohup node ./server.js &
复制代码

其中nohup命令是将该服务加入守护进程，避免ssh对话窗口关闭导致服务关闭，参考 Linux 设置Jar后台运行

如果开启了防火墙，需要将3000端口加入防火墙

firewall-cmd —zone=public —add-port=3000/tcp —permanent
# 重启防火墙
firewall-cmd —reload
复制代码

至此，Prerender服务已经安装并启动成功
查看端口

查看端口

Node，Google-Chrome，Nginx服务都应在后台运行

测试

If you use html5 push state (recommended):

Just add this meta tag to the <head> of your pages

<meta name="fragment" content="!"> 
复制代码

If your URLs look like this:
http://www.example.com/user/1 

Then access your URLs like this:
http://www.example.com/user/1?_escaped_fragment_=
复制代码

If you use the hashbang (#!):

If your URLs look like this:
http://www.example.com/#!/user/1 

Then access your URLs like this:
http://www.example.com/?_escaped_fragment_=/user/1
复制代码

通过curl命令测试

curl http://www.example.com/user/1?_escaped_fragment_=
复制代码

在配置prerender服务前，以上返回的只是index.html的内容, 如果配置成功则会返回解析后的内容。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

微信民族志、自媒体时代的知识生产与文化实践

赵旭东 / 中国社会科学出版社 / 2017-9 / 98.00元

进入二十一世纪以来，随着网络技术的发展，自媒体的悄然登场深度影响着我们的日常生活。中国社会中自媒体通讯方式的普及以及随之而有的一种文化书写的新形式——微信民族志的出现使原有文化秩序中时空意义发生转变的同时，也在重新塑造着以研究异文化为己任的人类学学科自身的成长、转型与发展。在此种情境之下，由中国人民大学人类学研究所、中国人民大学国家发展与战略研究院、中国人民大学社会学理论与方法研究中心、《探索与争......一起来看看《微信民族志、自媒体时代的知识生产与文化实践》这本书的介绍吧!

码农工具

JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB HSV 转换

RGB HSV 互转工具