【 Cloud 】將 Node.js Express 部署到 Azure App Service 以取得 Azure Digital Twins Token

內容

  • 學習目標
  • 前置準備作業
  • 建立 Azure App Service
  • 設定身分識別
  • 撰寫取得 Token 的程式
  • 部署程式到 Azure App Service
  • 透過 Postman 取得 Token
  • 透過 Postman 操作 Azure Digital Twins

學習目標

  • 如何將 Node.js Express 部署到 Azure App Service 以取得 Azure Digital Twins Token

前置準備作業

建立 Azure App Service

Step 1. 登入到 Microsoft Azure


Step 2. 開啟 Azure App Service

  • 在上方搜尋框輸入 app services 並點選下方 App Services 的搜尋結果


Step 3. 建立 App Service

  • 點選左上角的 Create


Step 4. 輸入 App 相關資訊

  • 填寫資訊
    • Subscription 欄位請選擇所要使用哪個訂閱帳號
    • Resource Group 欄位請選擇使用舊有的或新建立一個新的
    • Name 欄位請輸入一個可識別的名稱
      • 本範例使用 adtTest
    • Runtime stack 欄位請選擇 Node 14 LTS
    • Operating System 欄位請選擇 Linux
    • Region 欄位請選擇此服務所要建立於哪個資料中心
    • 以上資訊輸入完成後請點選左下角的 Review + create


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


  • 建立完成畫面並點選 Go to resource


Step 5. 取得 URL

設定身分識別

Step 1. 點選 Azure App Service 左側的 identity

Step 2. 將 Status 設成 On > 再點選 Save

Step 3. 再點選 Yes

Step 4. 點選 Azure role assignments

Step 5. 點選 + Add role assignment (Preview)

Step 6. 填寫相關資訊

  • Scope 欄位請點選 Subscription
  • Subscription 欄位請點選所要使用的訂閱
  • Role 欄位請選擇 Azure Digital Twins Data Owner
  • 資料選取完成後再點選 Save

Step 7. 設定完成

撰寫取得 Token 的程式

Step 1. 初始化專案

  • 執行下方指令
npm init -y

Step 2. 安裝套件

  • 請在端終機輸入下方指令
npm i express cors dotenv @azure/identity

Step 3. 撰寫程式

  • 在本地端電腦建立 index.js 的檔案再輸入下方程式

部署程式到 Azure App Service

Step 1. 安裝 Azure App Service ExtensionVisual Studio Code

Step 2. 登入到 Azure

  • 點選 Visual Studio Code 左側的 ... > 再點選 Azure

  • 點選 Sign in to Azure...

  • 選擇登入 Azure 的帳號

  • 登入成功

Step 3. 部署程式

  • 點選 > Azure in Open 來展開已建立的 App Service 項目

  • 點選所建立的 App Service 右鍵 > Deploy to Web App...

  • 選擇專案目錄

  • 點選 Yes

  • 點選 Deploy

  • 部署過程

  • 部署完成

  • 點選 Browse Website

  • 顯示結果

透過 Postman 取得 Token

Step 1. 下載 Postman 並開啟 Postman

Step 2. 取得 Token

  • 點選 +

  • 在 Enter Request URL 的輸入框輸入 建立 Azure App Service 段落的 Step 5 中所取得的 URL,並於後方再加上 /getToken

  • 點選 Send

  • 執行完成
    • 複製 token 冒號後的值

透過 Postman 操作 Azure Digital Twins

Models - DigitalTwinModels List

Step 1. 設定 Request URL

  • 點選 +

  • Enter Request URL 的輸入框輸入 https://Host-Name/models?api-version=2020-10-31
    • ㊟ 將 Host-Name 修改成所建立的 Azure Digital Twins 中的 Host name

Step 2. 設定 Authorization Header

  • 點選 Headers 頁籤

  • 輸入相關資訊
    • KEY 欄位輸入 Authorization
    • VALUE 欄位輸入Bearer 再加上 透過 Postman 取得 Token 段落所取得的 Token
      • Bearer 須加上一個空白

Step 3. 執行

  • 點選 Send

  • 執行結果

Reference

GitHub

List of blogs