LearningSky.io

【 Cloud 】透過 ngrok 接收 Azure Blob Web Hook 觸發事件

Archer -

學習目標

  • 如何在本地端電腦透過 ngrok 接收 Azure Blob Web Hook 觸發事件

前置準備作業

  • 已建立 Azure 帳號並能正常登入與使用
  • 已於電腦端安裝 Node.js
  • 已於電腦端安裝 IDE，本範例使用 Visual Studio Code

撰寫接收 Azure Blob 觸發事件程式

Step 1. 初始化專案

  • 請在終端機輸入下方指令
npm init -y

Step 2. 安裝套件

  • 請在終端機輸入下方指令
npm i express body-parser

Step 3. 撰寫程式

  • 請建立名為 index.js 的檔案並輸入下方程式

Step 4. 執行程式

  • 請在終端機切換目錄到 index.js 的檔案所在位置並再輸入下方指令
node index.js

透過 ngrok 取得對外可存取得 https URL

Step 1. 下載 ngrok 並進行 zip 解壓縮

Step 2. 啟動 ngrok 並取得 https URL

  • 請在終端機切換目錄到 ngrok 的檔案所在位置並再輸入下方指令
./ngrok http 8000
  • 取得 https URL

建立與設定 Azure Blob

Step 1. 開啟 Azure Blob

  • 在上方搜尋框輸入 blob 並點選下方 Storage accounts 的搜尋結果

Step 2. 建立 Azure Storage accounts

  • 點選左上角的 + Create

Step 3. 輸入相關資訊

  • Subscription 欄位請選擇所要使用哪個訂閱帳號
  • Resource Group 欄位請選擇使用舊有的或新建立一個新的
  • Storage account name 欄位請輸入一個唯一且可識別的名稱
    • 本範例使用 blobtriggerevnet
  • Location 欄位請選擇此服務所要建立在哪個資料中心
  • 以上資訊輸入完成後請點選左下角的 Review + create

Step 4. 再次確認相關資訊後請按左下角的 Create

Step 5. 建立完成畫面並點選 Go to resource

Step 6. 建立事件的 Web Hook

  • 點選左側的 Events > 再點選 More Options > 點選 Web Hook

  • 輸入相關資訊
    • Name 欄位欄位請輸入一個唯一且可識別的名稱
      • 本範例使用 blob-event-subscription
    • System Topic Name 欄位欄位請輸入一個唯一且可識別的名稱
      • 本範例使用 blob-event-topic
    • Filter to Event Types 欄位請選擇 Blob Created 與 Blob Deleted
    • Endpoint Type 欄位請選擇 Web Hook
    • Endpoint 欄位請輸入 透過 ngrok 取得對外可存取得 https URL 段落 Step 2 中取得的 https URL 後再點選 Confirm Selection
    • 以上資訊輸入完成後請點選左下角的 Create

Step 7. 查看執行 ngrok 的終端機

  • ngrok 端收到所傳送來的驗證事件

Step 8. 查看執行 index.js 的終端機

  • index.js 端收到所傳送來的驗證事件

測試與驗證

Step 1. 建立 Container

  • 點選左側的 Containers > 再點選上方的 + Containers
    • Name 欄位輸入一個可識別的名稱
      • 本範例使用 datas
    • Public access level 欄位選擇 Container (anonymous read access for containers and blobs)
    • 以上資訊輸入完成後請點選左下角的 Create

Step 2. 上傳檔案到 Container

  • 點選所建立的 Container

  • 點選 Upload

  • 點選 資料夾 icon

  • 點選 Upload 按鈕

  • 上傳成功

Step 3. 查看執行 ngrok 的終端機

  • ngrok 端收到由 Azure Blob 所傳送來的觸發事件

Step 4. 查看執行 index.js 的終端機

  • index.js 端收到由 Azure Blob 所傳送來的觸發事件

GitHub

List of blogs