使用rendertron+nginx做spa应用的seo

1.克隆源代码，进入源代码根目录，下载相关依赖包

git clone https://github.com/GoogleChrome/rendertron.git

cd rendertron

npm install

2.编译源代码

npm run build

在install的过程中，会自动安装一个Chromium浏览器，但是不能正常启动，原因是缺少相关依赖

3.安装Chromium的依赖：

yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext
.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64
atk.x86_64 gtk3.x86_64 -y

4.安装pm2

npm install pm2 -g

5.使用pm2持久化运行rendertron

pm2 start build/rendertron.js

测试一下

curl localhost:3000/render/http://www.xxx.com

如果输出有内容的html代码说明运行成功

6.在nginx配置文件内增加：

#seo代理 
location / {
  try_files $uri @prerender; 
} 
location @prerender {
  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; 
  } 
  #resolver kube-dns.kube-system.svc.cluster.local valid=5s; 
  if ($prerender = 1) {
    set $prerender "rendertron"; 
    # rewrite .* /$scheme://$host$request_uri? break; 
    proxy_pass http://127.0.0.1:3000/render/$scheme://$host$request_uri?wc-inject-shadydom=true;
  }
  if ($prerender = 0) {
    rewrite .* /index.html break;
  }
}
#seo代理-END

配置完重启nginx,检验配置是否成功：

curl -A “Baiduspider” http://website.app.dev.supermanapp.cn

如果输出有内容的html，就是成功了

本文来自投稿，不代表微擎百科立场，如若转载，请注明出处：https://www.w7.wiki/develop/4205.html