Prerender多页应用动静分离SEO实战

前几天有一位新浪四川的朋友通过我的一篇 Prerender + vuejs SEO最佳实践博文找到我
按照 Prerender 官方和我的实战经验在 window 平台上搭建了一个 Prerender 渲染服务不过区别在于

不是基于 Vuejs 的应用而是 Angular (不过这不重要 Prerender 官方宣传是为前后端分离的应用做 SEO 的不限定平台和语言)
应用不是单页的即入口是多个的

问题分析

通过检查已经安装好的 Prerender 服务发现是部署成功的
通过使用已经部署成功的 Prerender 服务测试应用中的摸个页面结果如预测的一样成功渲染(即应用处理部分是正常的)
Java(Spring) 中间件并没有正确的配置或者配置了并未生效(问题所在)

解决方案

由于我并不熟悉Java 所以采用了Nginx中间件的方案(我所熟悉的)
并且由于刚好该团队采用了前后端分离的形式但是还是用Tomcat处理静态文件的我刚好换成用性能更佳的Nginx

但是用了 Prerender 官方的 Nginx 中间件发现只有首页是正常的于是经过了几轮改造升级变成如下配置

  server {
   listen       80;
   server_name  xx.com;
   access_log  logs/default.access.log;
   root   html/xx.com;
   index index.html index.htm index.php index.jsp;
location / {
	#proxy_set_header X-Prerender-Token YOUR_TOKEN;
	set $prerender 0;
	if ($http_user_agent ~* "Sosospider|360Spider|baiduspider|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) {
	    #setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing
	    # 替换成你自己部署的Prerender服务
	    set $prerenderServer "127.0.0.1:3000";
	    rewrite .* /$scheme://$host$request_uri? break;
	    #rewrite ^(.*)$ /$scheme://$host$request_uri? break;
	    proxy_pass http://$prerenderServer;
	}
	# not match file or api
	if (!-f $request_filename){
	 	break;
   		proxy_pass http://127.0.0.1:8081; 
	}
}
  }

具体改动

去掉了官方默认只有一个入口(index.html)的限制改成不限制入口(任意HTML文件匹配均生效)
新增了几个国内的爬虫标志(360 搜狗)
增加了未匹配文件自动转发至 Tomcat 处理(该系统上传文件是在另一个 Tomcat 应用目录中的所以有部分静态文件是需要转发的于是就写了一个未匹配文件/API都转发至应用后端所绑定的端口)

至此改造完成多页动静分离SEO处理方案完美诞生