使用Prerender.io進行網站預渲染

時間 2019-11-25

標籤使用 prerender.io prerender 進行網站渲染欄目網站開發简体版

原文原文鏈接

前言

使用Angular，Vue，React進行單頁網站開發，用戶瀏覽時瀏覽器動態解析JS，呈現出最終的頁面，用戶體驗比較好，網站性能也提升很多。css

但網絡爬蟲並不會動態解析Js，訪問全部URL獲得的只會是項目入口文件中的代碼，不能獲得具體的內容，也就沒法作網站SEO。html

使用Prerender.io作網站預渲染，能夠將網站頁面渲染以後再返回給網絡爬蟲，間接完成網頁的解析。 Prerender相較於其餘的解決方案，配置相對要簡單一些，不用修改項目源碼，代碼零侵入，是一個不錯的解決方案。html5

目標

搭建基於Centos 7 和 Nginx 環境的Prerender渲染服務，完成Angular項目中網頁的預渲染node

預渲染流程圖

安裝中間件

首先註冊登陸 Prerender.io，而且得到我的token

token
根據開發文檔，配置對應的中間件，如Nginx，Apache等。
配置Nginx中間件，參考配置以下：

server {
    listen 80;
    server_name example.com;
 
    root   /path/to/your/root;
    index  index.html;

    location / {
        try_files $uri @prerender;
    }
 
    location @prerender {
        # 將 YOUR_TOKEN替換爲你的我的token
        proxy_set_header X-Prerender-Token YOUR_TOKEN;
        
        set $prerender 0;
        if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
            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) {
            
            # 後續將service.prerender.io替換爲本身的prerender服務，如127.0.0.1:3000
            set $prerender "service.prerender.io";
            rewrite .* /$scheme://$host$request_uri? break;
            proxy_pass http://$prerender;
        }
        if ($prerender = 0) {
            rewrite .* /index.html break;
        }
    }
}
複製代碼

參考配置：gist.github.com/thoop/81658…linux

檢測nginx配置，並重啓nginx

nginx -t
service nginx restart
複製代碼

中間件安裝完成

安裝Prerender服務

在服務器上安裝Node環境nginx
下載Prerender服務git

git clone https://github.com/prerender/prerender.git
複製代碼

若沒有安裝git服務，可手動從Github下載再上傳到/usr文件夾下，再解壓到當前目錄下 3. 安裝npm依賴github

cd /usr/prerender
# Phantomjs 官方的下載地址會超時，此處從新指定其下載地址爲淘寶鏡像
export PHANTOMJS_CDNURL=https://npm.taobao.org/mirrors/phantomjs
npm install
複製代碼

文件結構以下： chrome

運行server.js

# 啓動Server.js， 默認監聽3000端口
node server.js
複製代碼

此時，若是預先沒有安裝過Chrome，則會啓動失敗提示啓動Chrome失敗，未檢測到Chrome，此時安裝Chrome就行了爲何要安裝Chrome呢，由於Prerender並不負責真正的網頁解析，Prerender只負責解析先後的處理，實際是由Chrome負責網頁的解析。npm

安裝Chrome

配置yum源由於國內沒法訪問Google，因此須要本身配置yum源，在目錄 /etc/yum.repos.d/ 下新建google-chrome.repo文件

cd /ect/yum.repos.d/
touch google-chrome.repo
複製代碼

寫入內容 vi 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
複製代碼

安裝運行

# 國內推薦
yum -y install google-chrome-stable --nogpgcheck
複製代碼

安裝路徑安裝成功後，Chrome的安裝路徑應該是 /opt/google/chrome 默認狀況下，root用戶不能直接運行chrome，因此能夠新建另外一個用戶如other來運行

cd /opt/google/chrome
su other
./chrome
複製代碼

Chrome安裝完成

啓動Prerender.io服務

已other用戶再次運行server.js

su other
cd /usr/prerender
node ./server.js
複製代碼

此時應該是能夠成功啓動的，而且能夠看到該服務監聽3000端口啓動結果：

2. 修改nginx配置

if ($prerender = 1) {
            
           # 修改以下：
            # set $prerender "service.prerender.io";
            set $prerender "127.0.0.1:3000";
            rewrite .* /$scheme://$host$request_uri? break;
            proxy_pass http://$prerender;
        }
複製代碼

保存重啓Nginx
再次啓動Prerender服務

nohup node ./server.js &
複製代碼

其中nohup命令是將該服務加入守護進程，避免ssh對話窗口關閉致使服務關閉，參考Linux設置Jar後臺運行

若是開啓了防火牆，須要將3000端口加入防火牆

firewall-cmd —zone=public —add-port=3000/tcp —permanent
# 重啓防火牆
firewall-cmd —reload
複製代碼

至此，Prerender服務已經安裝並啓動成功
查看端口

查看端口

Node，Google-Chrome，Nginx服務都應在後臺運行

測試

If you use html5 push state (recommended):

Just add this meta tag to the <head> of your pages

<meta name="fragment" content="!"> 
複製代碼

If your URLs look like this:
http://www.example.com/user/1 

Then access your URLs like this:
http://www.example.com/user/1?_escaped_fragment_=
複製代碼

If you use the hashbang (#!):

If your URLs look like this:
http://www.example.com/#!/user/1 

Then access your URLs like this:
http://www.example.com/?_escaped_fragment_=/user/1
複製代碼

經過curl命令測試

curl http://www.example.com/user/1?_escaped_fragment_=
複製代碼

在配置prerender服務前，以上返回的只是index.html的內容, 若是配置成功則會返回解析後的內容。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。