一、什么是SSR，它能解决什么问题。

SSR即Server Side Rendering，服务端渲染，是指在服务器端将动态页面生成HTML文件，再将生成的HTML文件返回给客户端展示。与之相对的是

客户端渲染

（CSR，Client Side Rendering），客户端渲染是在浏览器端通过运行JavaScript等代码后生成HTML并渲染到页面上。

SSR的目的就是将页面的渲染放到服务器端完成，将渲染后的 HTML 代码返回给浏览器，加快页面的首屏加载速度。同时，由于服务器端渲染

的页面具有完整的 HTML 结构，可以被搜索引擎爬虫正常识别，提高了网站的 SEO。

SSR主要解决了CSR的以下几个问题：

SEO不友好：由于搜索引擎抓取不到由JavaScript生成的页面，因此CSR的页面对搜索引擎不友好，会影响网站的搜索引擎排名。

首屏加载慢：由于CSR需要等到JavaScript文件下载、解析、执行完毕后才能生成HTML并渲染到页面上，因此首屏加载速度慢，影响用户体验。

非常规浏览器不友好：有些非常规浏览器可能不支持JavaScript，这时就会导致页面无法正常显示。

因此，SSR能够提高页面加载速度、SEO友好，并且能够兼容非常规浏览器，具有重要意义。

本文就是用SSR环境，来解决搜索引擎抓取不到前面VUE渲染的HTML问题。

二、实现爬虫抓取渲染后的页面的工作原理

1、爬虫抓取网页

2、通过Node.js开启一个服务器，将爬虫抓取的网页返回给服务器

3、服务器使用Puppeteer在无头模式下模拟浏览器行为，渲染网页并生成HTML字符串

4、将生成的HTML字符串返回给nginx服务器

5、nginx服务器将HTML字符串发送给客户端

这种方式实现了对动态网页的渲染和静态化，使得爬虫可以抓取渲染后的网页，同时也提高了网站的性能和访问速度。

三、搭建linux系统

建SSR环境使用到的工具及扩展。

node

npm

puppeteer

express

html-minifier

google-chrome

nginx

supervisor

四、部署服务器端渲染环境(SSR)详细步骤。

## 安装Node.js和npm

    1、进入node安装目录

        cd /opt

    2、下载安装包

        wget https://nodejs.org/dist/v16.19.0/node-v16.19.0-linux-x64.tar.gz

    3、解压安装包

        tar -xzvf node-v16.19.0-linux-x64.tar.gz

    4、设置软连接，建立快捷命令

        ln -s /opt/node-v16.19.0-linux-x64/bin/node /usr/local/bin/

        ln -s /opt/node-v16.19.0-linux-x64/bin/npm /usr/local/bin/

## 安装 puppeteer

 及相关扩展工具

    1、创建并进入项目目录，会生成node_modules

        cd /home/wwwroot

        mkdir nodeSpider

        cd nodeSpider

    2、安装 puppeteer,express 与 html-minifier

        npm install puppeteer --save

        npm install express

        npm install html-minifier

    3、安装依赖库

        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

## 安装谷歌浏览器

    1、配置下载yum源

        vi /etc/yum.repos.d/google-chrome.repo

        粘贴以下内容

[google-chrome]

name=google-chrome

baseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearch

enabled=1

gpgcheck=1

gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub

    2、执行按装命令

        yum -y install google-chrome-stable --nogpgcheck

    3、验证是否安装成功。

        google-chrome --version

## 创建服务器端运行角本

    1、创建一个测试角本来验证服务配置是否成功。

test.js

const puppeteer = require('puppeteer');

(async () => {

  const browser = await puppeteer.launch({

      args: [

          '--no-sandbox

',

          '--disable-setuid-sandbox',

      ]

  });

  const page = await browser.newPage();

  await page.goto('https://www.baidu.com/');

  await page.screenshot({path: 'baidu.png'});

  await browser.close();

})();

    2、创建优化puppeteer性能角本，默认不加载一些多余的功能，提高访问效率。

puppeteer-pool.js

const puppeteer = require('puppeteer')

const MAX_WSE = 2; //启动几个浏览器

let WSE_LIST = []; //存储browserWSEndpoint列表

//负载均衡

(async () => {

  for (var i = 0; i < MAX_WSE; i++) {

    const browser = await puppeteer.launch({

            //无头模式

      headless: true,

            //参数

      args: [

        '--disable-gpu',

        '--disable-dev-shm-usage',

        '--disable-setuid-sandbox

',

        '--no-first-run',

        '--no-sandbox',

        '--no-zygote',

        '--blink-settings=imagesEnabled=false',

        '--single-process'

      ]

    });

    browserWSEndpoint = await browser.wsEndpoint();

    WSE_LIST.push(browserWSEndpoint);

  }

})();

module.exports = WSE_LIST

    3、创建渲染请求的页面角本

。

spider.js

const puppeteer = require('puppeteer')

const WSE_LIST = require('./puppeteer-pool.js

')

const spider = async (url, isMobile) => {

    let tmp = Math.floor(Math.random() * WSE_LIST.length);

    //随机获取浏览器

    let browserWSEndpoint = WSE_LIST[tmp];

    //连接

    const browser = await puppeteer.connect({

        browserWSEndpoint

    });

    //打开一个标签页

    var page = await browser.newPage();

    //判断是不是移动设备

    if( isMobile ){

        // 设置视口大小

        await page.setViewport({ width: 428, height: 926 });

        // 设置 User-Agent 为移动设备

        await

 page.setUserAgent('Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.5481.100 Mobile Safari/537.36');

    }

    //打开网页

    await page.goto(url, {

        timeout: 0, //连接超时时间，单位ms

        waitUntil: 'networkidle0

' //网络空闲说明已加载完毕

    })

    //延迟获取

    //await page.waitForTimeout(1000);

    var html = await page.content();

    await page.close();

    return html;

}

module.exports = spider;

    3、创建服务端启动角本

。

sercer.js

var express = require('express');

var app = express();

var spider = require("./spider.js")

var minify = require('html-minifier').minify;

app.get('*', async (req, res, next) => {

    // 请求完整URL

    var url = req.protocol

 + '://'+ req.hostname + req.originalUrl;

    // 定义移动设备 User-Agent 正则表达式

    var mobileRegex = /Mobile|Android|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i;

    // 获取 User-Agent 字段

    var userAgent = req.get('User-Agent');

    // 判断是否为移动设备

    var isMobile = mobileRegex.test(userAgent);

    var device =  isMobile ? 'Mobile' : 'PC';

    console.log(new Date().toLocaleString() + ' ： ' + url+' Device: '+device);

    var content = await spider

(url, isMobile).catch((error) => {

        console.log(error);

        res.send('获取html内容失败');

        return;

    });

    // 通过minify库压缩代码

    content=minify

(content,{removeComments: true,collapseWhitespace: true,minifyJS:true, minifyCSS:true});

    res.send(content);

});

//监听8087端口

app.listen(8087, () => {

    console.log('SSR服务已启动！');

});

## 测试服务是否正常工作

    node /home/wwwroot/nodeSpider/test.js   

    如果生成baidu.png 文件说明服务配置成功。

## 配置nginx反向代理

转发请求

        proxy_set_header  Host            $host:$proxy_port;

        proxy_set_header  X-Real-IP       $remote_addr;

        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;

        if ($http_user_agent ~* "googlebot|bingbot

|facebot|exabot|yandex|Yahoo! Slurp|DuckDuckBot|bytespider|twitterbot|facebookexternalhit|rogerbot|linkedinbot

|embedly|quora link preview|showyoubot|outbrain|pinterest|pinterestbot

|slackbot|vkShare|W3C_Validator|whatsapp") {

            proxy_pass  http://127.0.0.1:8087;

            break;

        }

## 配置supervisor来做SSR服务进程守护

    1、安装supervisor

        sudo yum install supervisor

    2、增加SSR的守护配置

    vi /etc/supervisord.d/nodessr.conf

配置内容

[program:nodessr]

directory

 = /home/wwwroot/nodeSpider

command =  node server.js

autostart = true

startsecs = 10

autorestart = true

startretries

 = 3

user = root

priority = 999

stopsignal = INT

redirect_stderr

 = true

stdout_logfile_maxbytes = 200MB

stdout_logfile_backups

 = 2

stdout_logfile = /home/wwwlogs/nodessr.log

stopasgroup = false

killasgroup

 = false   

    3、启动Supervisor

        sudo service supervisor start

    4、使用Supervisor管理进程

        sudo supervisorctl start process_name      # 启动进程

        sudo supervisorctl stop process_name       # 停止进程

        sudo supervisorctl restart process_name    # 重启进程

        sudo supervisorctl status                  # 查看所有进程状态

        sudo supervisorctl status process_name     # 查看指定进程状态

        sudo supervisorctl reread                  # 重新读取配置文件

        sudo supervisorctl update                  # 重新加载配置文件中添加的新的进程配置

转：惆怅客