AIoT & Cloud & Edge & Machine Learning

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

Archer

Dec 24, 2021 • 5 min read

Photo by gemmmm 🖤 / Unsplash

學習目標

如何在本地端電腦透過 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

---2021-12-24---1.10.36

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

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

下載網址 https://ngrok.com/

Step 2. 啟動 ngrok 並取得 https URL

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

./ngrok http 8000

取得 https URL

---2021-12-24---1.16.49

建立與設定 Azure Blob

Step 1. 開啟 Azure Blob

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

---2021-12-24---1.20.06

Step 2. 建立 Azure Storage accounts

點選左上角的 + Create

---2021-12-24---1.21.57

Step 3. 輸入相關資訊

---2021-12-24---1.23.28

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

---2021-12-24---1.26.27

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

---2021-12-24---1.27.25

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

---2021-12-24---1.28.53

Step 6. 建立事件的 Web Hook

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

---2021-12-24---1.30.39

輸入相關資訊
- 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

---2021-12-24---1.36.22

---2021-12-24---1.50.52

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

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

---2021-12-24---1.52.29

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

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

---2021-12-24---1.53.20

測試與驗證

Step 1. 建立 Container

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