前端 SPA 模式下的 SEO 静态化方法

当使用 Vue,React 等开发前端页面时，如果采用前端渲染模式，则对搜索引擎不太友好。可以利用 chrome 将渲染好的页面内容输出给搜索引擎，以此达到静态化页面的目的。将其完整封装到 Docker，更便于部署。

以下为 Dockerfile 及服务程序。

Dockerfile

FROM node:10

EXPOSE  3000

VOLUME  /var/www
WORKDIR /var/www

ADD package.js   /var/www
ADD package.json /var/www

ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1

RUN apt-get update && apt-get install -y wget gnupg ca-certificates
RUN wget -q -O - "https://dl-ssl.google.com/linux/linux_signing_key.pub" | apt-key add -
RUN echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list
RUN apt-get update && apt-get install -y google-chrome-stable
RUN cd /var/www && npm install

CMD ["npm", "start"]

package.js

const puppeteer = require('puppeteer');
const path = require('path');
const koa = require('koa');
const app = new koa();
const ref = "http://www.xxx.com"; // 实际网站网址

let browser;

app.use(async ctx=>{
  if(!browser){
    browser = await puppeteer.launch({
      args: ['--no-sandbox', '--disable-setuid-sandbox'],
      ignoreHTTPSErrors: true, // 忽略 https 错误
      headless: true, // 不显示浏览器
      devtools: false // 不打开控制台
    });
  }

  const page = await browser.newPage();
  await page.goto(ref + ctx.request.url, {
    waitUntil: ['load', 'networkidle0'] // 加载完成, 无新请求, 则页面渲染完毕
  });
  const html = await page.content();
  page.close();

  ctx.response.body = html;
})

app.listen(3000);

package.json

{
  "name": "spa-seo",
  "author": "Hongs",
  "license": "MIT",
  "version": "1.0.0",
  "keywords": ["SPA","SEO"],
  "description": "SPA SEO",
  "main": "package.js",
  "scripts": {
    "start": "node package.js"
  },
  "dependencies": {
    "koa": "^2.7.0",
    "mime": "^2.4.5",
    "mkdirp": "^1.0.4",
    "rimraf": "^3.0.2",
    "hotnode": "0.0.8",
    "puppeteer": "^1.18.1",
    "extract-zip": "^2.0.0"
  }
}

构建及执行：

docker build -t xxx/seo .
docker run -m 256m -p 3000:3000 --read-only --name xxx/seo xxx/seo

nginx server 内配置：

location /path/to/spa {
    if ($http_user_agent ~* "Baiduspider|Googlebot|Googlebot-Mobile|Googlebot-Image|Mediapartners-Google|Adsbot-Google|Feedfetcher-Google|Yahoo! Slurp|Yahoo! Slurp China|YoudaoBot|Sosospider|Sogou spider|Sogou web spider|MSNBot|ia_archiver|Tomato Bot|FeedDemon|JikeSpider|Indy Library|Alexa Toolbar|AskTbFXTV|AhrefsBot|CrawlDaddy|CoolpadWebkit|Java|Feedly|UniversalFeedParser|ApacheBench|Microsoft URL Control|Swiftbot|ZmEu|oBot|jaunty|Python-urllib|lightDeckReports Bot|YYSpider|DigExt|YisouSpider|HttpClient|MJ12bot|EasouSpider|Ezooms|heritrix|qihoobot|^$")
    {
        proxy_pass http://127.0.0.1:3000;
        break;
    }
    # ...
}

如果 docker build 时卡在连 dl-ssl.google.com，原因您懂的，自己解决吧。或者试试改一下 RUN：

RUN apt-get update && apt-get install -y wget gnupg ca-certificates
RUN echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list
RUN apt-get update && apt-get install -y google-chrome-stable --allow-unauthenticated
RUN cd /var/www npm install