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

朱雀 2022-03-21 02:13 349阅读 0赞

### 文章目录 ###

*   *   *   *  前言
             *  目标
             *  运行流程图
             *  安装中间件
             *  安装Prerender服务
             *  安装Chrome
             *  启动Prerender.io服务
             *  测试
             *   *  If you use html5 push state (recommended):
                 *  If you use the hashbang (\#!):
                 *  通过curl命令测试

#### 前言 ####

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

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

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

#### 目标 ####

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

#### 运行流程图 ####

![运行流程][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3phaV94aWE_size_16_color_FFFFFF_t_70]

#### 安装中间件 ####

1.  首先注册登录 [Prerender.io][Prerender.io 1]，并且获得个人token  
    ![token][]
2.  根据[开发文档][Link 1]，配置对应的中间件，如Nginx，Apache等。
3.  配置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;
            }
        }
    }

参考配置：[https://gist.github.com/thoop/8165802][https_gist.github.com_thoop_8165802]  
5. 检测nginx配置，并重启nginx

nginx -t
    service nginx restart

1.  中间件安装完成

#### 安装Prerender服务 ####

1.  在服务器上安装Node环境
2.  下载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

文件结构如下：  
![文件结构][20190129224118511.png]  
4. 运行server.js

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

此时，如果预先没有安装过Chrome，则会启动失败

提示启动Chrome失败，未检测到Chrome，此时安装Chrome就好了

为什么要安装Chrome呢，因为Prerender并不负责真正的网页解析，Prerender只负责解析前后的处理，实际是由Chrome负责网页的解析。

#### 安装Chrome ####

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

cd /ect/yum.repos.d/
    
    touch google-chrome.repo

1.  写入内容

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

1.  安装运行

# 国内推荐
    yum -y install google-chrome-stable --nogpgcheck

1.  安装路径  
    安装成功后，Chrome的安装路径应该是  
    `/opt/google/chrome`

默认情况下，root用户不能直接运行chrome，所以可以新建另一个用户如other来运行

cd /opt/google/chrome
    
    su other
    
    ./chrome

1.  Chrome安装完成

#### 启动Prerender.io服务 ####

1.  已other用户再次运行server.js

su other
    
    cd /usr/prerender
    
    node ./server.js

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

启动结果：  
![启动结果][20190129224720590.png]  
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;
            }

1.  保存重启Nginx
2.  再次启动Prerender服务

nohup node ./server.js &

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

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

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

1.  至此，Prerender服务已经安装并启动成功
2.  查看端口  
    ![端口结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3phaV94aWE_size_16_color_FFFFFF_t_70 1]  
    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的内容, 如果配置成功则会返回解析后的内容。

[Prerender.io]: https://prerender.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3phaV94aWE_size_16_color_FFFFFF_t_70]: /images/20220321/fbdbe3826fe14a44a0fba4561e0a7e80.png
[Prerender.io 1]: http://Prerender.io
[token]: /images/20220321/1854732414f346a7b03c9ae562f48d14.png
[Link 1]: https://prerender.io/documentation/install-middleware
[https_gist.github.com_thoop_8165802]: https://gist.github.com/thoop/8165802
[20190129224118511.png]: /images/20220321/e2b751d5e29046a9a6b229234d42b8f1.png
[20190129224720590.png]: /images/20220321/fe5a296f665d4ebe9e9a1486f1646ed8.png
[Linux_Jar]: https://www.ntshare.cn/article/17
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3phaV94aWE_size_16_color_FFFFFF_t_70 1]: /images/20220321/d0b97d946b68480083559b32ed7b29c6.png