用Prerender做SPA的Server Side Render

建立時間: 2018-04-19 12:27:16
更新時間: 2019-04-17 23:00:47

Prerender?

Prerender是一個Server Side Render的服務

它的底層原本是使用PhantomJS

最近則改成使用Chrome Headless

 

你可以付錢給他幫你做SSR

他會依照cache天數跟做SSR頁數計費

 

另外Prerender也是open source

可以直接fork Prerender的repo

可以完全自訂code然後自己開機器跑SSR

此外fork Prerender還可以使用一些plugin

像是自訂頁面的status code、移除script tag、白名單、黑名單、cache等功能

 

PhantomJS or Chrome Headless?

PhantomJS是一個很老舊的瀏覽器

不支援ES6跟Promise

需要另外裝babel-polyfill

如果JS不小心哪邊掛掉或不支援

SSR就直接GG

 

另外PhantomJS也不支援HTTP2

無法讓request平行處理

 

先說一下Server Sider Render的流程

  1. 進入網站, 先進入.htaccess
  2. .htaccess發現不是一般瀏覽器, 開始啟用SSR, 導向middleware
  3. middleware拿目前的url丟給SSR server(Prerender)
  4. SSR server開始爬目標url, 並將爬出來的結果回傳給middleware
  5. middleware依照結果決定render出結果, 或是回傳404給crawler

 

Middleware

負責將client的丟給SSR server

再將SSR結果回給crawler的中介層

例如我blog的seo.php

 

佈署

先clone安裝prerender

git clone repo-of-preprender
yarn
npm run start

 

安裝chrome

https://askubuntu.com/questions/79280/how-to-install-chrome-browser-properly-via-command-line?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

 

設定apache

由於我這台SSR Server是裝apache

外部是由80 port連進來

但prerender server run起來是跑在3000 port

因此需要將指定的domain apache設定做proxy

 

啟用apache proxy/proxy_http模組

sudo a2enmod proxy
sudo a2enmod proxy_http
sudo service apache2 restart

 

apache的domain設定

sudo vim example.com.conf

<VirtualHost *:80>
    ServerName example.com
    ServerAlias www.example.com
    ProxyRequests Off
    ProxyPreserveHost On
    ProxyVia Full
    <Proxy *>
        Require all granted
    </Proxy>
    <Location />
        ProxyPass http://localhost:3000/
        ProxyPassReverse http://127.0.0.1:3000
    </Location>
</VirtualHost>

 

啟用該domain並重啟apache

sudo a2ensite example.com.conf

sudo service apache2 restart

 

使用PM2管理SSR服務

PM2是一個強大的Node.js App管理工具

像Prerender這種Node.js App可以用PM2來管理讓他在背景執行

並且能夠輕鬆的監控狀態、使用資源

 

安裝PM2

sudo yarn global add pm2

 

將SSR服務加入PM2

將Prerender repo內的server.js加入PM2中

pm2 start /path-to-prerender/server.js --name "ssr"

 

查看狀態

pm2 status

 

查看SSR Log

pm2 log ssr

 

監視PM2資源

pm2 monit

 

Startup Script

如果希望設定Startup Script可參考官方文件

 

SSR Debug工具

SSR最麻煩的這一塊最麻煩的就是debug

以下幾個工具方便協助debug SSR

 

User-Agent Switcher for Google Chrome

這時候就需要一個可以切換user agent的

裝了這個工具後將user agent切換成GoogleBot

這樣就可以從Chrome的檢視原始碼直接看到SSR的結果

 

Facebook open graph debug tool

可以直接確認open graph的render結果

https://developers.facebook.com/tools/debug/

 

Google Search Console

Google Search Console的Google Bot模擬器

可以模擬模擬Bot檢索網站

並且可以提交索引

 

資源的使用情況

我是直接在Google Cloud Platform開一台機器專門跑SSR

機器等級就1個vCPU, 1G RAM

跑了一陣子後大概看了一下CPU應該算還負荷的了