Open zhongxia245 opened 5 years ago
Prerender 实现 SEO 的原理,可以理解为针对搜索引擎爬虫返回静态 HTML内容。
具体可以看这篇文章 《前后端分离的项目如何进行 SEO 优化》
# node-chrome-10.16
FROM node:10.16-alpine
ENV APP_PATH /app
WORKDIR ${APP_PATH}
# Change mirrors to tsinghua
RUN echo http://mirrors.tuna.tsinghua.edu.cn/alpine/edge/main > /etc/apk/repositories && \
echo http://mirrors.tuna.tsinghua.edu.cn/alpine/edge/community >> /etc/apk/repositories && \
echo http://mirrors.tuna.tsinghua.edu.cn/alpine/edge/testing >> /etc/apk/repositories && apk update
# Setting timezone
RUN apk add tzdata openssh-client git
RUN cp -r -f /usr/share/zoneinfo/Hongkong /etc/localtime
# Installs cnpm
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
# Installs latest Chromium (73) package.
RUN apk add --no-cache \
curl \
make \
gcc \
g++ \
python \
linux-headers \
binutils-gold \
gnupg \
libstdc++ \
udev \
chromium=~73.0.3683.103 \
nss \
freetype \
freetype-dev \
harfbuzz \
ttf-freefont \
wqy-zenhei
# Tell Puppeteer to skip installing Chrome. We'll be using the installed package.
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
# Puppeteer v1.12.2 works with Chromium 73.
RUN yarn add puppeteer@1.12.2
RUN apk del --no-cache make gcc g++ python binutils-gold gnupg libstdc++
# Add user so we don't need --no-sandbox.
#RUN addgroup -S pptruser && adduser -S -g pptruser pptruser \
# && mkdir -p /home/pptruser/Downloads /app \
# && chown -R pptruser:pptruser /home/pptruser \
# && chown -R pptruser:pptruser /app
#
## Run everything after as non-privileged user.
#USER pptruser
CMD ['/bin/sh']
#!/usr/bin/env node
var prerender = require('./lib');
// 需要指定chromeLocation,否则会报 unable to find Chrome install. Please specify with chromeLocation
// 需要加上 chromeFlags ,否则会报 Chrome connection closed... restarting Chrome
// https://github.com/prerender/prerender/issues/450
var server = prerender({
chromeLocation:'/usr/bin/chromium-browser',
chromeFlags: ['--no-sandbox', '--headless', '--disable-gpu', '--remote-debugging-port=9222', '--hide-scrollbars']
});
server.use(prerender.sendPrerenderHeader());
// server.use(prerender.blockResources());
server.use(prerender.removeScriptTags());
server.use(prerender.httpHeaders());
server.start();
使用 Prerender 实现纯前端页面的 SEO
这里主要讲实现一个简单案例的 实现步骤
需要的环境:
一、启动 Prerender 的 Node 服务
如何在 centos 下 安装 Chrome 浏览器 ,具体可以看这个文章 《INSTALLING GOOGLE CHROME ON CENTOS, AMAZON LINUX, OR RHEL》
配置 Nginx 转发
大概意思就是 nginx 判断ua是否携带爬虫的标识,是则转发的 prerender 服务。
测试结果