linux|ubuntu安装prerender解决vue前后端分离后的seo问题

news/2024/5/10 14:31:37/文章来源:https://blog.csdn.net/lolgigeo/article/details/102897876

商城网站进行了前后端分离，使用vue框架对系统进行了整体重构。重构之后seo基本失效，搜索引擎的机器人无法抓取到网站的源代码，所以需要考虑解决seo的问题。结合前端人员的建议，使用prerender进行处理，具体流程如下：

一、安装node和prerender；

node --version

ubuntu16安装node的时候版本太低无法运行，需要使用命令进行校正，校正后需要重启才能生效。

二、安装nodejs
    sudo apt-get install nodejs
    sudo apt install nodejs-legacy
    sudo apt install npm

三、更新npm的包镜像源，方便快速下载
    sudo npm config set registry https://registry.npm.taobao.org
    sudo npm config list

四、全局安装n管理器(用于管理nodejs版本)
    sudo npm install n -g

五、安装最新的nodejs（stable版本）
    sudo n stable

核实是否已安装，未安装的话先安装node；安装完毕之后使用一下方式：

git clone https://github.com/prerender/prerender.git
cd prerender
npm install
#启动server.js， 默认监听3000端口
node server.js
#安装forever进行保证运行，注意安装过程和使用过程的用户
npm install forever -g   #安装
forever start server.js  #启动应用
forever list  #显示所有运行的服务 
forever stop server.js  #关闭应用
forever restartall  #重启所有应用

另外运行server.js需要进入到对应的git目录才可以执行成功。

启动过程如果系统为安装chrome，需要先安装chrome才能成功，如下图

#下载chrome
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
#安装
sudo dpkg -i google-chrome-stable_current_amd64.deb#如果遇到依赖问题, 再执行sudo apt-get install -f#或者sudo apt-get upgrade -f

安装成功后再次启动server.js，并保持后台运行。

二、配置nginx，注册prerender。

1、首先注册登录 Prerender.io，并且获得个人token
2、根据开发文档，配置对应的中间件，如Nginx，Apache等，参考配置如下

location / {try_files $uri @prerender;}location @prerender {# 将 YOUR_TOKEN替换为你的个人tokenproxy_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;}resolver 8.8.8.8;if ($prerender = 1) {# 后续将service.prerender.io替换为自己的prerender服务，如127.0.0.1:3000set $prerender "service.prerender.io";rewrite .* /$scheme://$host$request_uri? break;proxy_pass http://$prerender;}if ($prerender = 0) {rewrite .* /index.html break;}}

三、模拟蜘蛛抓取并在Prerender后台查看抓取的页面

curl -H 'User-agent:Googlebot' 网站地址