自建 prerender 服务来对 SPA 项目做 SEO 优化

Step 1: 更新系统

sudo yum update -y

Step 2: 安装node和npm

安装node

curl -sL https://rpm.nodesource.com/setup_16.x | sudo bash -
sudo yum install -y nodejs

验证node和npm是否安装成功

node -v
npm -v

Step 3: 安装prerender

创建prerender服务的目录，并进入目录

mkdir prerender
cd prerender

初始化node项目并安装prerender

npm init -y
npm install prerender

Step 4: 配置prerender

在prerender目录下 创建 server.js 文件，并写入一下文本

const prerender = require('prerender');

const server = prerender({
    chromeLocation: '/usr/bin/chromium-browser',
    chromeFlags: [
        '--headless',
        '--disable-gpu',
        '--remote-debugging-port=9222',
        '--no-sandbox',
        '--disable-dev-shm-usage'
    ]
});

server.use(prerender.sendPrerenderHeader());
server.use(prerender.blockResources());
server.use(prerender.removeScriptTags());
server.use(prerender.httpHeaders());

server.start();

Step 5: 安装 Chromium

安装Chromium

sudo yum install -y epel-release
sudo yum install -y chromium

Step 6: 运行 Prerender

node server.js

Step 7: 配置 Nginx

server {
    listen 80;
    server_name your-domain.com;

    location / {
        set $prerender 0;

        if ($http_user_agent ~* "Googlebot|Bingbot|Slurp|DuckDuckBot|Baiduspider|YandexBot|Facebot|facebookexternalhit|Twitterbot|LinkedInBot|embedly|quora link preview|showyoubot|outbrain|pinterest|developers.google.com/+/web/snippet|Google Page Speed Insights|Pingdom|Chrome-Lighthouse|Qwantify") {
            set $prerender 1;
        }

        if ($args ~ "_escaped_fragment_") {
            set $prerender 1;
        }

        if ($http_user_agent ~ "Prerender") {
            set $prerender 0;
        }

        if ($prerender = 1) {
            rewrite .* /prerender break;
            proxy_pass http://127.0.0.1:3000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-NginX-Proxy true;
            proxy_redirect off;
        } else {
            proxy_pass http://127.0.0.1:8080; # Your backend server
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-NginX-Proxy true;
            proxy_redirect off;
        }
    }
}

Step 8: 使用 pm2 管理 Prerender 服务

安装 pm2 管理 Prerender 进程:

npm install -g pm2

在pm2中 启动 Prerender

pm2 start server.js --name prerender

设置pm2 为系统自动启动

pm2 startup systemd
pm2 save

Step 9: 验证prerender是否启动

pm2 logs prerender