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

最新推荐文章于 2023-12-29 16:48:55 发布

lolgigeo

最新推荐文章于 2023-12-29 16:48:55 发布

阅读量656

点赞数

CC 4.0 BY-SA版权

分类专栏： linux 文章标签： linux Prerender

本文链接：https://blog.csdn.net/lolgigeo/article/details/102897876

linux 专栏收录该内容

7 篇文章

订阅专栏

商城网站采用Vue框架重构后，SEO效果受到影响。通过安装并配置prerender服务，结合nginx中间件，实现搜索引擎友好抓取，恢复SEO效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

商城网站进行了前后端分离，使用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替换为你的个人token
        proxy_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:3000
            set $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' 网站地址