[Automation-tool]如何整合ngrok免費靜態網域和n8n工作流來建置AI LINE Bot?

延續<[Linux]申請一個Ngrok的免費網域作為webhook使用>文章，本文進一步整合ngrok，n8n和Line bot，主要是利用ngrok的免費靜態網域作為本地端n8n的webhook, 使其可監聽使用者的LINE輸入訊息，並使內建AI agent 模組的n8n工作流來回覆使用者的輸入訊息。換言之，Line 介面作為前端，n8n工作流作為後端，藉由webhook串接前後兩端，以達到AI Line bot問答機器人的功效，如上述影片所示。

事前工作:

• 已取得ngrok免費的靜態網域

• 已配置一個Line bot

• 作業系統為Ubuntu 22.04 desktop LTS，並已安裝docker

• 已取得Gemini API

1. 配置n8n和ngrok的docker

a. 將ngrok網域和port配置到n8n docker中

sudo docker run -d --name n8n \\
  -p 0.0.0.0:5678:5678 \\
  -e N8N_BASIC_AUTH_ACTIVE=true \\
  -e N8N_SECURE_COOKIE=false \\
  -e WEBHOOK_URL=https://your ngrok static-domain \\
  -v /your_path/data:/home/node/.n8n \\
  --restart unless-stopped \\
  n8nio/n8n

說明:

1. -p 0.0.0.0:5678:5678 : n8n運行在port 5678，同時不限定IP連結。
2. -e WEBHOOK_URL=https://your ngrok static-domain : 填入ngrok取得的網域。

b. 將authtoken和網域配置到ngrok docker中

sudo docker run -d --name ngrok \\
  --network=host \\
  -e NGROK_AUTHTOKEN=you ngrok authtoken \\
  --restart unless-stopped \\
  ngrok/ngrok:latest http 5678 --domain=your ngrok static-domain

說明:

1. http 5678 : 因n8n運行在port 5678，所以ngrok在docker配置中，需要將網域連接到本地端n8n的port。
2. --domain=your ngrok domain: 定義ngrok取得的網域。

2. 建立n8n工作流

a. 建立 Webhook 節點：

在n8n中新增一個Webhook節點，並設定方法為POST，若n8n和ngrok的docker沒問題，則webhook網址會自動定義成ngrok提供的網域，而我們只要定義webhook節點的path欄位，例如 linebot，所以完整webhook URL如下，如影片所示。 

https://your ngrok static-domain/webhook/linebot

b. 設定 LINE Webhook URL：

在LINE Developers Console中，將上述webhook URL一併設定為line webhook URL，換言之，line和n8n是靠著這個webhook URL來通訊。

c. 配置AI agent和Gemini chat model：

在n8n中新增一個AI agent模組節點，並將對應的Gemini chatmodel掛上，填入對應的API和選擇模型。

d. 配置HTTP Request 節點作為line reply節點：

設定方法為POST，URL為https://api.line.me/v2/bot/message/reply，並在Headers中配置line access token，兩個欄位格式如下。另外，在Body中，使用JSON 格式傳送回覆訊息，包含將reply token和回覆訊息內容填入JSON欄位中。

Authorization
Bearer {Your Channel Access Token}

最後，特別注意開啟n8n工作流介面的右上角的active開關，webhook才會切換到生產環境模式(production)，因為生產環境模式(production)和測試環境模式(test)的webhook URL有差異，分別為webhook和webhook-test。換言之，與LINE Developers Console對應不上的webhook URL，自然無法連接。

參考資料：

• n8n 使用 LINE Messaging API 的教學