WidgetBot 是一個能讓你在網站中嵌入 Discord 聊天室的一個機器人,只不過開發者提供的 DisWeb 機器人貌似因為使用者數量眾多而時常當機。所以我打算來利用開發者提供的原始碼來架設一個 WidgetBot 服務。
官方的 ReadMe.md 檔案中是寫可以在 Windows 系統中編譯並執行,只不過我編譯了兩次都會出現指令錯誤,因為腳本裡面含有許多 Linux 用的指令。所以基本上已經確定這個機器人只能安裝在 Linux 作業系統中,認命吧!
進階閱讀:WidgetBot 直接將 Discord 文字頻道嵌入網站,即時與網友溝通交談
架設流程
我選用的作業系統是全新安裝的 Ubuntu 18.04 LTS,如果不打算租用 VPS 或者弄台新的電腦,可以使用虛擬機器代替。
第一步 進入系統,切換到 Root 帳戶。
sudo su -
第二步 更新 apt,並安裝我們所需的 npm、git、vim 套件。
apt update
apt install -y npm git vim
第三步 用 git clone 指令下載 WidgetBot 原始碼,並進入專案資料夾。
git clone https://github.com/fluidsonic/widgetbot.git
cd widgetbot
第四步 用 npm 指令安裝 WidgetBot 需要的模組。
npm install -g yarn
第五步 開始編譯 WidgetBot。
yarn build
編譯需要一小段時間,等到『All packages have been built!』出現表示編譯完成。

第六步 前往 這個連結 申請一個 Discord Bot 帳戶,這邊就以圖表示流程。
- 按下『New Application』新增一個應用程序。
- 切換到『Bot』頁面,按下『Add Bot』新增機器人帳戶。
- 出現提示的話請選擇『Yes, do it!』
- 最後按下畫面中的『Copy』按鈕將待會要使用的 Token 記錄下來。
第七步 使用 cp 指令將 config.example.yml 檔案複製為 config.yml,並使用 vim 編輯 config.yml 檔案。
cp packages/server/data/config.example.yml packages/server/data/config.yml
vim packages/server/data/config.yml
需要編輯的欄位有:
參數名稱 | 內容說明 |
jwt_secret | 隨意填入一連串的英數字串作為加密 |
token | 貼上前面複製的機器人 Token |
logs | 前項填入 Discord 伺服器 ID,後項填入作為記錄事件用的文字頻道 ID |
status | 前項填入 Discord 伺服器 ID,後項填入作為顯示狀態用的文字頻道 ID |

編輯完成後按下 ESC 後輸入『:wq』儲存離開。
第八步 最後輸入指令啟動伺服器。
yarn workspace server start
可以搭配 screen 套件來將這個 shell 移至後端,就不用一直開著視窗。

第九步 開啟瀏覽器,輸入邀請網址將機器人加到你的 Discord 伺服器中。
網址格式:http://[伺服器IP]:7000/api/invite

第十步 最後只要修改嵌入在網站中的 WidgetBot 程式碼的『shard』參數就完成囉!

完成

後續處理
因為我們現在是直接使用 IP + Port 的方式連線到伺服器,只不過因為現在大部分網站都會使用 HTTPS 協議,所以我們後續通常會使用 Nginx Server 做反向代理,並且加入 SSL 證書。d
我在這邊就分享我的 Nginx 設定檔,直接在 /etc/nginx/sites-available/default 後面加入即可。(SSL 證書的部分使用 Let’s Encrypt 服務建立)
server {
listen 443;
server_name bot.tedliou.com;
root /var/www/html;
location / {
proxy_pass http://127.0.0.1:7000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
}
ssl_certificate /etc/letsencrypt/live/bot.tedliou.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/bot.tedliou.com/privkey.pem;
}
server {
listen 80;
server_name bot.tedliou.com;
root /var/www/html;
}