zoukankan      html  css  js  c++  java
  • angularjs应用prerender.io 搜索引擎优化实践

      上一篇博文(http://www.cnblogs.com/ideal-lx/p/5625428.html)介绍了单页面搜索引擎优化的原理,以及介绍了两个开源框架的优劣。prerender框架的工作原理在上篇也有介绍,本片博文主要介绍prerender.io的部署实践过程。其实部署的过程还是比较简单的,阅读原网站可以直接移步:https://github.com/prerender/prerender

    一、支持google优化方案

        上篇文也有提到,谷歌提出了自己的一套针对ajax页面的抓取方案,prerender在这里同样对其做了支持。使用起来很简单:

     1、添加<meta name="fragment" content="!">标签在每个主页面的header内。

     2、如果url中含有#,将它们变成#!(hash-bang)的形式.

         关于上面第二点,angular的api $locationProvider.hashPrefix('!');即可使url变成hash-bang形式。

    二、prerender.io服务端部署

        prerender官方提供了云服务,获取tocken后便可以配置使用。不过我们这里不想使用官方的服务,选择自己搭建自己的可控prerender服务,当然,最好使用linux机器作为服务器。过程也非常简单,上篇介绍,prerender服务是一个持续在跑的node服务,负责接收client转发过来的请求,然后再请求web服务,获得html、js等静态文件后执行并继续请求后续ajax请求。首先要在服务器上安装node运行环境,执行以下步骤即可安装部署prerender服务:

      $ git clone https://github.com/prerender/prerender.git                     

      $ cd prerender                                     

      $ npm install

      $ node server.js

    过程中会安装phantomjs,最后一步“node server.js”便启动了prerender服务。我们先来看一看源码的目录:

      最外层的server.js 是启动的主逻辑脚本,内容很短,作用是加载插件,然后启动服务。lib文件夹下有一个plugins文件夹,存放了一系列插件,如黑白名单、缓存、日志等等功能,可以在外层目录的server.js 内选择性加载使用。lib下的index.js定义了监听的端口和启用服务,server.js里是具体的请求和返回处理逻辑,phantomjs的启停也是在其中,prerender会启动多个phantomjs进程并行处理请求。
      服务跑起来之后,如无特殊指定和修改,此时的默认端口是3000,可以尝试访问:http://localhost:3000/http://www.yourwebsite.com   看到这里就清楚了,其实就是把咱们页面的url当做参数传给prernder服务,就可以了。如果是在另外的主机,同样可以访问  http://prerender服务的地址:监听端口号/需要渲染的页面url,即可看到通过prerender.io渲染后的页面。如果有条件的话可以通过本地爬虫访问此url,你会发现所有的动态数据也可以同样得到。
      如果你担心你的prerender服务会异常崩溃,可以安装forever指令,使用forever指令用守护进程的方式启动prerender服务,类似于这样:forever start -l prerender.log --spinSleepTime 5000 --minUptime 5000  /usr/local/prerender-linux/server.js    进一步的,你可以将启动指令写入linux启动文件中,做重启的自启动。到这里prerender服务基本上就搭建成功了。 
      

    三、prerender.io客户端部署

      prerender提供了非常丰富的客户端实现方案,包括node、Ruby、Apache、Nginx、Java、Go、Grails等等官方非官方方案,上面git的连接即可以查到各个方案的部署方式。笔者的应用是前后端分离使用nginx做静态资源容器的环境,这里介绍一下nginx的部署方案,以下是官方提供的nginx.conf 的配置文件:

    server {
      listen 80;
      server_name example.com;
       
      root /path/to/your/root;
      index index.html;
       
      location / {
      try_files $uri @prerender;
      }
       
      location @prerender {
      set $prerender 0;
      if ($http_user_agent ~* "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)") {
      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 "192.168.1.168:3000*";
      rewrite .* /$scheme://$host$request_uri? break;
      proxy_pass http://$prerender;
      }
      if ($prerender = 0) {
      rewrite .* /index.html break;
      }
      }
      }

      下面对相关参数做简单介绍:

        listen:监听端口号,根据项目实际情况而定。

        server_name:监听的域名。

        root :默认首页的路径。

        index:默认的首页页面。

        location @prerender  下依次是对:userAgent的配置、可根据需要自行添加;_escaped_fragment_符号的过滤;prerender自己爬虫请求的排除;不需要抓取的文件类型配置,可自行添加。

        然后下面 如果$prerender 变量为1,就把请求定向到prerender服务所在的地址。

    四、缓存的设置

      prerender提供了丰富的缓存机制,用来存储已抓取的页面,当下次同样的页面抓取请求再来的时候prerender便可以命中缓存返回给爬虫。笔者使用的是levelDB的缓存,安装可查看https://github.com/maxlath/prerender-level-cache,需要安装一个node外壳的levelDB数据库,供prerender服务插件调用。插件的启用方法,就是在server.js里server.use(require('prerender-level-cache'));即可。

      另外在生产环境测试的时候,笔者遇到一个问题,就是pererender服务跑了一段时间之后,爬虫过来的请求有些会返回304状态码回去,这样的话爬虫是收不到页面数据的。304是http协议做缓存控制的状态码,返回304意味着服务端认为请求方拥有最新的缓存。我解决这个问题的方式是又开启了一次phantomjs的本地缓存,在prerender服务的libserver.js里server.createPhantom方法内将phantomjs的启动参数改为:var args = {'--load-images': false, '--ignore-ssl-errors': true, '--ssl-protocol': 'tlsv1.2','--disk-cache':true}; 这个问题便没有再出现。

  • 相关阅读:
    73. Set Matrix Zeroes
    289. Game of Live
    212. Word Search II
    79. Word Search
    142. Linked List Cycle II
    141. Linked List Cycle
    287. Find the Duplicate Number
    260. Single Number III
    137. Single Number II
    Oracle EBS中有关Form的触发器的执行顺序
  • 原文地址:https://www.cnblogs.com/ideal-lx/p/5642583.html
Copyright © 2011-2022 走看看