ChelesteWang / FE-Review

前端知识复盘与整理
Apache License 2.0
33 stars 8 forks source link

SEO优化-prerender服务搭建 #4

Open ChelesteWang opened 3 years ago

ChelesteWang commented 3 years ago

运行prerender前遇到的坑

1、谷歌启动程序找不到

2018-09-27T08:49:36.420Z Starting Prerender
2018-09-27T08:49:36.442Z Starting Chrome
2018-09-27T08:49:36.443Z unable to find Chrome install. Please specify with chro
meLocation
2018-09-27T08:49:36.444Z Prerender server accepting requests on port 3000
2018-09-27T08:49:36.444Z undefined
2018-09-27T08:49:36.444Z Failed to start and/or connect to Chrome. Please make s
ure Chrome is running
2018-09-27T08:49:36.445Z Stopping Chrome

解决方法 安装谷歌:https://www.cnblogs.com/ianduin/p/8727333.html 安装后还是有问题:Failed to start and/or connect to Chrome. Please make sure Chrome is running prerender/prerender#521 2、报错

2018-09-27T08:41:19.182Z Starting Prerender
2018-09-27T08:41:19.184Z Starting Chrome
2018-09-27T08:41:19.190Z Prerender server accepting requests on port 3000
2018-09-27T08:41:19.228Z Chrome connection closed... restarting Chrome
2018-09-27T08:41:19.228Z Chrome died immediately after restart... stopping Prerender

编辑server.js

var server = prerender({
  chromeFlags: ['--no-sandbox', '--headless', '--disable-gpu', '--remote-debugging-port=9222', '--hide-scrollbars']
});

开启测试 1、node server.js 出现以下代码说明,开启prerender服务成功

2018-10-09T06:29:21.687Z Starting Prerender
2018-10-09T06:29:21.689Z Starting Chrome
2018-10-09T06:29:21.695Z Prerender server accepting requests on port 3000
2018-10-09T06:29:22.210Z Started Chrome: HeadlessChrome/69.0.3497.100

返回的是js执行后的页面代码,说明预渲染成功

ChelesteWang commented 3 years ago

使用 Docker 部署

https://github.com/ChelesteWang/prerender-alpine

Pull and run the image:

docker pull tvanro/prerender-alpine:6.3.0
docker run -p 3000:3000 tvanro/prerender-alpine:6.3.0

Prerender will now be running on http://localhost:3000. Try the container out with curl:

curl http://localhost:3000/render?url=https://www.example.com/
ChelesteWang commented 3 years ago

使用 源代码 本地部署

$ git clone https://github.com/prerender/prerender.git
$ cd prerender
$ npm install
$ node server.js
ChelesteWang commented 3 years ago

Prerender 原理

使用 Puppeteer 启动 Headless Chromium 浏览器对页面预渲染

1 由于 prerender 默认配置对 CPU 消耗都很巨大,需要进行优化

ChelesteWang commented 3 years ago

Nginx 配置

location / {
        try_files $uri @prerender;
    }

    location @prerender {
        set $prerender 0;
        if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp") {
            set $prerender 1;
        }
        if ($args ~ "_escaped_fragment_") {
            set $prerender 1;
        }
        if ($http_user_agent ~ "Prerender") {
            set $prerender 0;
        }
        if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
            set $prerender 0;
        }

        #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
        resolver 8.8.8.8;

        if ($prerender = 1) {
            #setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing
            set $prerender "39.105.16.177:3000";
            rewrite .* /https://$host$request_uri? break;
            proxy_pass http://$prerender;
        }
        if ($prerender = 0) {
            rewrite .* /index.html break;
        }
    }