【 Cloud 】設定 Azure App Service 的 Configuration 與 Azure Key Vault 透過 Vault access policy 連結 ( Node.js )

【 Cloud 】設定 Azure App Service 的 Configuration 與 Azure Key Vault 透過 Vault access policy 連結 ( Node.js )
Photo by Osama Elsayed / Unsplash

內容

  • 學習目標
  • 前置準備作業
  • 建立服務所使用的名稱
  • 建立 Azure App Service
  • 建立與設定 Azure Key Vault
  • 設定 Azure App Service 的 Configuration
  • 部署 Node.js 程式到 Azure App Service
  • 測試與驗證

學習目標

  • 如何在 Azure App Service 中的 Configuration 透過 Azure role-based access control ( Vault access policy ) 讀取 Azure Key Vault 資訊

前置準備作業

建立服務所使用的名稱

屬性 名稱
Resource group app-secret-rg
Azure App Service app-sample168
Azure Key Vault secret-sample168

建立 Azure App Service

Step 1. 於 Azure Portal 中的上方搜尋框輸入 App Service > 點選 App Services 的搜尋結果

---2023-08-03---8.14.31


Step 2. 點選左上角 + Create 按鈕中的 + Web App

---2023-08-03---8.17.24


Step 3. 輸入相關資訊

  • Resource group 欄位請選擇唯一且可識別的名稱。
  • Name 欄位請輸入唯一且可識別的名稱。
  • Publish 欄位請選擇 Code
  • Runtime stack 欄位請選擇 Node 18 LTS
  • Region 欄位請選擇所要使用服務的所在位置。
  • Linux Plan 欄位請選擇所要使用的 Plan。
  • Pricing Plan 欄位請選擇所要使用的規格。
  • 以上資訊輸入完成後點選下方的 Review + create

---2023-08-03---8.21.44-1

---2023-08-03---8.26.35


Step 4. 確認相關資訊

  • 確認完成後請點選左下角的 Create

---2023-08-03---10.27.46


Step 5. 建立過程中

---2023-08-03---8.37.17


Step 6. 建立完成,點選 Go to resource

---2023-08-03---8.38.24


Step 7. 啟用 Managed identity

  • 點選左側的 Identity > 再點選 On

---2023-08-03---8.41.17

  • 點選上方的 Save

---2023-08-03---8.42.15

  • 點選上方的 Yes

---2023-08-03---8.44.04

建立與設定 Azure Key Vault

Step 1. 於 Azure Portal 中的上方搜尋框輸入 Key Vault > 點選 Key Vaults 的搜尋結果

---2023-08-03---8.46.55


Step 2. 點選左上角 + Create 按鈕中的 + Web App

---2023-08-03---8.48.15


Step 3. 輸入相關資訊

  • Resource group 欄位請選擇唯一且可識別的名稱。
  • Key vault name 欄位請輸入唯一且可識別的名稱。
  • Region 欄位請選擇所要使用服務的所在位置。
  • Pricing tier 欄位請選擇所要使用的規格。
  • 以上資訊輸入完成後點選下方的 Next

---2023-08-03---8.50.35

---2023-08-03---8.52.50

  • 選擇 Vault access policy 後再點選 Review + create

---2023-08-03---1.37.08


Step 4. 確認相關資訊

  • 確認完成後請點選左下角的 Create

---2023-08-03---1.38.29


Step 5. 建立過程中

---2023-08-03---8.55.23


Step 6. 建立完成,點選 Go to resource

---2023-08-03---8.56.10


Step 7. 設定給 App Service 的存取權限

  • 點選左側的 Access configuration > 再點選 Go to access control (IAM)

---2023-08-03---8.59.12

  • 點選上方的 + Create

---2023-08-03---1.40.40

  • 點選 Secret permissions 中的 Get > 再點選下方的 Next

---2023-08-03---1.42.21

  • 於搜尋框輸入所建立的 App Service 名稱 ( 本範例為 app-sample168 ) > 點選所出現的結果 > 再點選 Next

---2023-08-03---1.45.00-1

---2023-08-03---1.45.00-1

---2023-08-03---1.47.23

  • 點選 Next

---2023-08-03---1.48.15

  • 確認相關資訊後點選 Create

---2023-08-03---1.49.19

  • 存取權限設定完成

---2023-08-03---1.50.23


Step 8. 設定 Secret

  • 點選左側的 Secrets > 再點選上方的 + Generate/Import

---2023-08-03---9.30.15

  • 輸入 Secret 資訊
    • Name 欄位請輸入 db-connection-string
    • Secret value 欄位請輸入 test_from_web
    • 當以上資訊輸入完成後點選左下方的 Create

---2023-08-03---9.33.31

---2023-08-03---9.34.35


Step 9. 取得 CURRENT VERSIONSecret Identifier

  • 點選所建立的 db-connection-string

---2023-08-03---9.36.25

  • 取得 CURRENT VERSION

---2023-08-03---9.37.13

  • 取得 Secret Identifier
    • 點選出現的 CURRENT VERSION

---2023-08-03---9.37.13

---2023-08-03---9.38.55

設定 Azure App Service 的 Configuration

Step 1. 回到所建立的 Azure App Service ( 本範例為 app-sample168 ) > 點選左側的 Configuration > 再點選 + New application setting

---2023-08-03---9.42.04


Step 2. 設定 setting 資訊

  • 輸入相關資訊
    • Name 欄位輸入 DB_CONNECTION_STRING
    • Value 欄位輸入 @Microsoft.KeyVault(SecretUri=Value_From_Secret_Identifier),請修改 Value_From_Secret_Identifier建立與設定 Azure Key Vault 段落 Step 9 所取得的 Secret Identifier
    • 以上資訊輸入完成後點選 OK
    • @Microsoft.KeyVault(referenceString) 中的 referenceString 的格式可為以下兩種:
referenceString 說明
SecretUri= secretUri SecretUri 為 Secret 的完整 URI 或選擇性地包含版本,例如 https://myvault.vault.azure.net/secrets/mysecret/https://myvault.vault.azure.net/secrets/mysecret/ec96f02080254f109c51a1f14cdb1931
VaultName= vaultName ;SecretName= secretName ;SecretVersion= secretVersion VaultName 是必要的,而且是保存庫名稱。
SecretName 是必要的,而且是秘密名稱。
SecretVersion 為選擇性,顯示時表示要使用的秘密版本。

---2023-08-03---9.49.47

  • 點選上方的 Save

---2023-08-03---9.51.40

  • 點選 Continue

---2023-08-03---9.52.28

部署 Node.js 程式到 Azure App Service

Step 1. 下載範例程式


Step 2. 部署 Node.js 程式

  • 點選 Nodejs 資料夾右鍵 > 點選 Deploy to Web App...

---2023-08-03---9.57.08

  • 選擇所建立的 App Service ( 本範例為 app-sample168 )

---2023-08-03---9.58.10

  • 點選 Deploy

---2023-08-03---9.59.38

  • 部署過程中

---2023-08-03---10.00.17

  • 部署完成

---2023-08-03---10.00.48

測試與驗證

Step 1. 取得 App Service 的 Default domain

  • 到所建立的 App Service ( 本範例為 app-sample168 )

1


Step 2. 開啟測試頁面

  • 於瀏覽器開啟新的頁籤,輸入 https://Default-Domain/secret,請修改 Default-Domain 為上步驟所取得的 Default domain

---2023-08-03---10.05.57

Reference

Sample Code

GitHub

List of blogs