One post tagged with "rendertron"

需求场景​

现在越来越多的前端项目是基于vue,react,angular做的单页应用，可是单页应用的一大痛点就是seo不友好，虽然百度统计支持单页应用，但是seo不行呀。

可行解决方案​

目前有三种解决方案。方案一预渲染，方案二服务端渲染，方案三针对seo的渲染。方案一和方案二都会原有项目进行改动，其中方案二改动方案最大。所以目前来说，改动成本最小的就是方案三了。本文采用的方式就是针对seo渲染的方案三。

rendora和rendertron​

目前有rendora和rendertron两种主流开源方案，rendora是基于go语言的，支持docker部署。rendertron是由google团队基于node开发的，背靠大树。从目前的star数以及更新状况来看，rendertron要更好些。rendora已经一年多没有更新，并且安装过程中有些bug还无法解决。

rendertron原理​

rendertron会启动一个node项目，对请求进行拦截，如果是搜索引擎发来的请求，就会被拦截，通过puppeteer渲染想要请求的地址，并将渲染好的html返回给搜索引擎，而普通用户的请求还是转发到对应的后端服务器上

环境技术栈​

操作系统ubuntu18.04
前端vue
后端接口nestjs
服务器nginx
seo预渲染rendertron

步骤一：rendertron安装启动​

git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron
npm install
npm run build
npm run start

rendertron在启动过程中可能会报错，原因是puppeteer的环境没有安装完，需要参考puppeteer官方文档安装对应的包chrome-headless-doesnt-launch-on-unix
如果启动没有问题了，之后可以通过pm2加入后台进程

步骤二：配置nginx拦截搜索引擎​

  location / {
        if ($http_user_agent ~* "bot|bing|yandex|duckduckgo|baiduspider|googlebot|360spider|sogou spider") {
            rewrite ^/(.*) /render/https://sz.urcloud.co/$1 break;
            proxy_pass http://127.0.0.1:3001;  #rendertron端口
        }
        try_files $uri $uri/ /index.html; 
    }
    location /api {
        proxy_pass http://127.0.0.1:3000; #后端api接口
    }

步骤三：测试搜索引擎访问和普通用户访问​

通过postman在请求header中添加User-Agent:baiduspider来测试蜘蛛访问和普通用户访问，如果正常的话，可以看到搜索引擎访问返回的是渲染好的html页面。

后续说明​

可以看到这样改只是修改了nginx配置以及新增了一个rendertron项目，对原有项目没有任何改动，rendertron官方是有node，python等后端语言的插件的，通过nginx转发到后端，在后端项目里面判断是否搜索引擎来决定是否转发url到rendertron项目下。这样会更好，不过对原有项目做了一些小的调整，感兴趣的同学可以去研究一下。