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

內容

• 學習目標
• 前置準備作業
• 建立服務所使用的名稱
• 建立 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 資訊

前置準備作業

• 已建立 Azure 帳號並能正常登入
• 已於電腦端安裝 IDE，本範例使用 Visual Studio Code ( VScode )
  • https://code.visualstudio.com/
• 已於 VScode 安裝 Azure App Service Extension
  • https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice
• 已於 VScode 登入到 Azure

建立服務所使用的名稱

建立 Azure App Service

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

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

Step 3. 輸入相關資訊

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

Step 4. 確認相關資訊

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

Step 5. 建立過程中

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

Step 7. 啟用 Managed identity

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

• 點選上方的 Save

• 點選上方的 Yes

建立與設定 Azure Key Vault

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

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

Step 3. 輸入相關資訊

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

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

Step 4. 確認相關資訊

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

Step 5. 建立過程中

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

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

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

• 點選上方的 + Create

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

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

• 點選 Next

• 確認相關資訊後點選 Create

• 存取權限設定完成

Step 8. 設定 Secret

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

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

Step 9. 取得 CURRENT VERSION 與 Secret Identifier

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

• 取得 CURRENT VERSION

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

設定 Azure App Service 的 Configuration

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

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 的格式可為以下兩種：

• 點選上方的 Save

• 點選 Continue

部署 Node.js 程式到 Azure App Service

Step 1. 下載範例程式

• https://github.com/ArcherHuang/Azure-App-Service-Key-Vault

Step 2. 部署 Node.js 程式

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

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

• 點選 Deploy

• 部署過程中

• 部署完成

測試與驗證

Step 1. 取得 App Service 的 Default domain

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

Step 2. 開啟測試頁面

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

Reference

• https://learn.microsoft.com/zh-tw/azure/app-service/app-service-key-vault-references?tabs=azure-cli#source-app-settings-from-key-vault

Sample Code

• https://github.com/ArcherHuang/Azure-App-Service-Key-Vault

GitHub

• ArcherHuang @ GitHub

List of blogs

• https://learningsky.io/author/archer/
• https://medium.com/@mmosconii