使用 Azure Resource Manager Template 從 GitHub 部署 Azure Cosmos DB 和 Azure App 服務,搭配網頁應用程式

這個教學教你如何進行「無觸控」部署,讓網頁應用程式在首次執行時就能連接到 Azure Cosmos DB,而不必將 Azure Cosmos DB 的連線資訊剪貼到 appsettings.json 或貼上到 Azure App Services 應用程式設定中 Azure 入口網站。 所有這些操作皆透過 Azure 資源管理範本在單一操作中完成。 在此範例中,我們將部署 Azure Cosmos DB ToDo 範例。

資源管理器範本相當靈活,允許你在 Azure 中任何服務中組合複雜的部署。 這包括進階任務,例如從 GitHub 部署應用程式,以及在 Azure 入口網站中將連線資訊注入 Azure App 服務 的應用程式設定中。 這個教學將示範如何使用單一的資源管理器範本來完成以下操作。

  • 部署 Azure Cosmos DB 帳戶。
  • 部署 Azure App 服務 Hosting Plan。
  • 部署 Azure App 服務。
  • 將 Azure Cosmos DB 帳號的端點和金鑰注入到 Azure 入口網站的 App Service 應用程式設定中。
  • 將 GitHub 倉庫中的網頁應用程式部署到 App Service。

最終部署的部署包含一個功能完整的網頁應用程式,可以連接 Azure Cosmos DB,無需從 Azure 入口網站複製貼上 Azure Cosmos DB 的端點 URL 或認證金鑰。

Prerequisites

小提示

雖然本教學不假設你有使用 Azure Resource Manager 範本或 JSON 的經驗,但如果你想修改參考的範本或部署選項,則需要具備這些領域的知識。

步驟 1:部署範本

首先,請選擇下方的 「部署到 Azure 」按鈕,開啟 Azure 入口網站以建立自訂部署。 你也可以從 Azure 快速入門範本圖庫中查看 Azure 資源管理員範本

將 Resource Manager 範本部署至 Azure 的按鈕。

進入 Azure 入口後,選擇要部署的訂閱,並選擇或建立新的資源群組。 接著填寫以下數值。

範本部署介面截圖

  • 區域 - 這是資源管理員的要求。 輸入與你資源所在位置參數相同的區域。
  • 應用程式名稱 - 此名稱被所有部署資源使用。 務必選擇唯一名稱,以避免與現有的 Azure Cosmos 資料庫和 App Service 帳號發生衝突。
  • 地點 - 你資源部署的區域。
  • App Service Plan Tier - App Service Plan 的定價層級。
  • App Service Plan 實例 - 應用程式服務計畫的工作人員數量。
  • Repository URL - GitHub 上網頁應用程式的儲存庫。
  • 分支 - GitHub 倉庫的分支。
  • 資料庫名稱 - Azure Cosmos DB 資料庫名稱。
  • 容器名稱 - Azure Cosmos DB 容器名稱。

填寫數值後,選擇 建立 按鈕開始部署。 此步驟約需5至10分鐘完成。

小提示

該範本無法驗證範本中輸入的 Azure App 服務 名稱及 Azure Cosmos DB 帳號名稱是否有效且可用。 強烈建議您在提交部署前,先確認您計劃提供的姓名是否可得。

步驟二:探索資源

查看已部署的資源

範本部署完資源後,你現在可以在資源群組中看到每一個資源。

資源群組

檢視 Azure Cosmos DB 端點和金鑰

接著,在入口網站開啟 Azure Cosmos 資料庫帳號。 以下截圖顯示了 Azure Cosmos 資料庫帳號的端點與金鑰。

Azure Cosmos DB 鍵

請在應用程式設定中查看 Azure Cosmos DB 鍵

接著,在資源群組中導航到 Azure App 服務。 點選「設定」標籤以查看該應用程式服務的應用程式設定。 應用程式設定包含連接 Azure Cosmos DB 所需的帳號及主要鍵值,以及從範本部署中傳入的資料庫和容器名稱。

應用程式設定

在部署中心查看網頁應用程式

接著前往 App Service 的部署中心。 這裡你會看到 Repository 指向作為範本參數的 GitHub 倉庫。 此外,下方狀態顯示成功(活躍),表示應用程式已成功部署並啟動。

部署中心

執行 Web 應用程式

點擊部署中心頂端的 瀏覽 以開啟網頁應用程式。 網頁應用程式會打開到主畫面。 點選「 建立新」 ,在欄位輸入資料,然後點選「儲存」。 結果畫面顯示已儲存到 Azure Cosmos 資料庫的資料。

主畫面

步驟三:運作方式

這需要三個要素才能奏效。

執行時讀取應用程式設定

首先,應用程式需要在 ASP.NET MVC 網路應用程式中使用 Startup 類別來請求 Azure Cosmos DB 端點和金鑰。 Azure Cosmos DB 待辦範例可以在本地執行,你可以輸入連線資訊到 appsettings.json。 不過,當這個檔案部署時,它會隨著應用程式一起部署。 如果這些紅色線無法從 appsettings.json存取設定,則會嘗試從 Azure App 服務 的應用程式設定。

截圖顯示一個方法,裡面有幾個字串變數以紅色標示,包括 databaseName、containerName、account 和 key。

使用特殊的 Azure 資源管理函式

為了讓這些值在部署時能被應用程式使用,Azure 資源管理員範本可以使用特殊的 Azure 資源管理功能(包括 參考 與 listKeys )向 Azure Cosmos 資料庫帳號請求這些值,這些函式會從 Azure Cosmos 資料庫帳號取得這些值,並以與上述應用程式使用的鍵名相符的值,插入應用程式設定中的值,並以 '{section:key}' 格式。 例如: CosmosDb:Account 。

範本金鑰

從 GitHub 部署網頁應用程式

最後,我們需要將 GitHub 的網頁應用程式部署到 App Service。 這是利用下方的 JSON 來完成的。 有兩件事需要注意:這個資源的類型和名稱。 "type": "sourcecontrols"和"name": "web"屬性值都是硬編碼的,不應該更改。

從 GitHub 部署

下一步

祝賀! 你部署了 Azure Cosmos DB、Azure App 服務 以及一個範例網頁應用程式,這些應用程式會自動提供連接 Azure Cosmos DB 所需的連結資訊,且無需複製貼上敏感資訊。 以這個範本作為起點,你可以修改它,讓自己也能以同樣方式部署網頁應用程式。