[料理佳餚] 在 CentOS 上架設 rendertron 服務來處理 SSR(Server Side Rendering)

  • 1134
  • 0
  • SEO
  • 2022-12-26

公司的網站是採用 SPA(Single Page Application)的呈現方式,但是這種方式不利於 SEO、不利於 Preview,像是在 Facebook、Line、Twitter 分享連結的時候,沒有內容的預覽,在行銷推廣上就略遜一籌,今天就要來介紹一個 SSR(Server Side Rendering)的服務 - rendertron

rendertron 是 Google Chrome 的子專案,背後使用 Chromium 來渲染轉發過來的網址,再將渲染後的結果回傳,網站的程式都不用改,只需要加一個 Middleware 來判斷是否要轉發給 rendertron 去處理即可,rendertron 的開發團隊有架設一個對外的服務 https://render-tron.appspot.com/,大家可以上去玩玩看。

再來,我們試著把 rendertron 服務架設在 CentOS 7 上,這過程踩了不少雷,吃了不少苦頭,希望這篇文章能讓大家少走一點冤枉路。

切換到 root 身份

整個過程我建議切換到 root 身份來做,會比較順利一點。

sudo -i

Clone rendertron

因為我要去改 rendertron 的預設參數,所以我必須自行建置 rendertron,如果不需要改參數,rendertron 是可以用 npm 安裝成全域的套件,挺方便的。

# 安裝 git
yum install -y git

# Clone rendertron
cd /usr/lib
git clone https://github.com/GoogleChrome/rendertron
cd rendertron

記得要確認我們所在的目錄是在 rendertron 底下,不然一些依賴套件會裝錯位置。

安裝 Node.js 官方的 Repository

EPEL 上面的 Node.js 版本太舊了,我們安裝官方提供的 Repository,安裝的版本是 14.x。

# 在 root 身份底下
curl -sL https://rpm.nodesource.com/setup_14.x | bash -

# 非 root 身份
curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -

安裝 Node.js

接著,我們就將 Node.js 裝起來,版本是 14.5.0。

yum install -y nodejs

建立 config.json 修改預設參數

我想要改的參數是 timeoutport,在 rendertron 的根目錄底下建立 config.json 檔案,把想要改的參數放進去。

{
  "timeout": 20000,
  "port": 3001
}

安裝 grpc

rendertron 的依賴樹中有依賴到 grpc,但是在安裝依賴套件的過程中,找不到 grpc 預先編譯的版本,然後它就會走向自行編譯的流程,接著就出錯了。

我們是可以把 gcc 編譯工具裝起來,依舊能順利編譯,只不過這有點耗時,其實只要先獨立安裝 grpc 就好了。

npm install grpc --unsafe-perm=true

建置 rendertron

再來,我們就可以建置 rendertron,執行下面指令進行建置。

# 安裝依賴套件
npm install --unsafe-perm=true

# 建置 rendertron
npm run build

安裝缺少的 Library 或 Google Chrome 瀏覽器

如果這時候我們去執行 rendertron,會跑出一個錯誤畫面。

意思是說,在跑 Chromium 的時候少了一些檔案,如果想要知道究竟缺了哪些檔案,可以到切換目錄到 /usr/lib/rendertron/node_modules/puppeteer/.local-chromium/linux-xxxxxx/chrome-linux 底下,執行指令 ldd chrome | grep not 就會列出缺少的檔案。

然後呢,我們就要再透過 yum provides xxx 指令去找出這些檔案在哪些 Library 裡面。

各位朋友,不需要一個一個去找了,我已經幫各位找好了,執行下面指令就可以將這些缺少的 Library 裝起來。

yum -y install libXcomposite libXcursor libXdamage libXext libXfixes libXi libXrender libXtst cups-libs libXScrnSaver libXrandr atk at-spi2-atk pango cairo at-spi2-core gtk3 gdk-pixbuf2

或者,如果想省麻煩,也可以直接安裝 Google Chrome,在 /etc/yum.repos.d 資料夾底下新增 google-chrome.repo 檔案,將以下內容寫到這個檔案中。

[google-chrome]
name=google-chrome
baseurl=http://dl.google.com/linux/chrome/rpm/stable/x86_64
enabled=1
gpgcheck=1
gpgkey=https://dl.google.com/linux/linux_signing_key.pub

接著,執行下面指令,就可以將最新穩定版本的 Google Chrome 瀏覽器裝起來。

yum install -y google-chrome-stable

執行 rendertron

把該裝的裝一裝之後,我們就可以執行下面指令把 rendertron 跑起來,

npm run start

我們看到 Listening on port xxxx 的訊息,就表示執行成功了。

來測試一下,rendertron 服務有一個 render API,只要把要渲染的網址接到它的後面,就可以了。

而且,它還可以截圖,截圖的 API 是 screenshot,預設的圖片大小是 1000×1000,這個可以透過參數 widthheight 去改。

用 pm2 來管理 rendertron

pm2 是一個 Node.js 服務的管理器,我們可以透過它來管理 rendertron 的開機啟動背景執行壞掉重啟,相當方便,我們來安裝 pm2。

# -g 表示安裝成全域的套件
npm install -g pm2

接著,執行下面的指令就可以叫 pm2 來幫我們管理 rendertron。

# 透過 pm2 啟動 rendertron,名稱為 rendertron,且在每日 06:00:00 強制重啟。
pm2 start build/rendertron.js --name rendertron --cron "0 0 6 * *"

# 保存目前 pm2 管理的程序清單
pm2 save

# 依照剛剛保存的程序清單建立服務,並設為開機啟動。
pm2 startup systemd

以上就是 rendertron 3.0.0 安裝在 CentOS 7 上的步驟,提供給各位朋友參考。

參考資料

相關資源

C# 指南
ASP.NET 教學
ASP.NET MVC 指引
Azure SQL Database 教學
SQL Server 教學
Xamarin.Forms 教學