彻底解决Vue项目SEO，Rendertron在服务器部署时候的坑

https://book.usejs.cn 这个是已经使用 rendertron 库部署上线的项目 大家可以访问预览一下，效果很不错

上次给大家说了一个能解决vue项目seo问题的库–rendertron;
因为上次的环境是在windows上，而项目代码一般都需要运行在linux服务器上，运行环境的不同会导致出现很多新的问题，本期就给大家说一下我在部署rendertron项目时遇到的坑
由于官方的rendertron项目只有在全局安装的时候才支持配置，而作为项目依赖的时候是没有办法配置的，所以我创建了一个可以在项目里面直接配置的版本，后续可以考虑发布为npm库，以下是项目的地址；

https://gitee.com/ikux/rendertron-local

项目获取安装

如果要使用这个模板请先克隆代码到服务器上，然后是安装依赖，这里推荐大家使用pnpm这个包管理器安装

// 安装pnpm的方式
npm i -g pnpm
git clone https://gitee.com/ikux/rendertron-local
// 进到项目目录安装依赖
pnpm i

错误处理

依赖安装完毕的话需要测试一下puppeteer能否正常使用；可以试着运行一下下面的代码

// 创建test.js
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({
    defaultViewport: {
      width: 1920, height: 1080
    }
  });
  const page = await browser.newPage();
  let url = "https://baidu.com"
  await page.goto(url, {'waitUntil':'networkidle0'});
  await page.screenshot({path: 'example.png'});
  })

能正常运行就可以跳过这一步了；

运行测试代码的时候如果出现上面的报错那很可能是puppeteer的依赖没有齐全，在服务器上执行以下代码就可以了

sudo apt-get install ca-certificates fonts-liberation libappindicator3-1 libasound2 libatk-bridge2.0-0 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgbm1 libgcc1 libglib2.0-0 libgtk-3-0 libnspr4 libnss3 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 lsb-release wget xdg-utils -y

上面的代码执行完成，在运行测试代码，如果没有问题，puppeteer就算安装完成了

运行项目

由于上面已经安装国依赖了，且puppeteer测试也正常，所以接下来在刚才的项目目录下运行以下代码就可以启动项目了

node app.js

最后这里说一下app.js的代码解释，方便大家自行修改

const express = require('express');
const { makeMiddleware } = require('./rendertron_middleware.js')
const { Rendertron } = require('./rendertron/index');
const history = require("connect-history-api-fallback")

const rendertron = new Rendertron()
const rendertron_config = {
  "port": 7003, //项目启动端口
  "width": 960, // 爬虫浏览器窗口的宽度
  "height": 540, // 爬虫浏览器窗口的高度
  "timeout": 3000, 
  "cache": "filesystem" // 渲染后的html信息是否保存，filesystem 为保存为文件模式 memory 为内存模式 datastore 这个没用过应该是存储到google云盘
  // 更多配置请参考rendertron官方文档
}
const botUserAgents = [ // 当 user-agent包含 下面这些字符串的时候就会返回加载后html了 新的爬虫头添加到这个数组重启项目就行了
    'baiduspider',
    'bingbot',
    'embedly',
    'facebookexternalhit',
    'linkedinbot',
    'outbrain',
    'pinterest',
    'quora link preview',
    'rogerbot',
    'showyoubot',
    'slackbot',
    'TelegramBot',
    'twitterbot',
    'vkShare',
    'W3C_Validator',
    'whatsapp',
];
rendertron.initialize(rendertron_config)
const app = express()
app.use(history())

app.use(makeMiddleware({ // 官方推荐的插件可以在 ./rendertron_middleware.js 修改
   botUserAgents,
   proxyUrl: 'http://127.0.0.1:7003/render/', // 上面的端口改了这里的端口也一定要改
}))
app.use(express.static('dist')) // 一定要放在插件后面
let port = 7004 // express 监听的端口
app.listen(port, function () {
  console.log(`Express App Starting on port ${port}`)
})

项目启动后，将vue本地打包好的文件上传到服务器项目目录下的dist文件夹里面就可以了；
说明一下connect-history-api-fallback这个库，用了这个库以后vue项目可以使用history模式，刷新后就不会出现404的问题了
的dist文件夹里面就可以了；
说明一下connect-history-api-fallback这个库，用了这个库以后vue项目可以使用history模式，刷新后就不会出现404的问题了
本项目nginx不需要额外配置