教學課程：使用 Azure SQL Database 將 ASP.NET 應用程式部署至 Azure

  • 發行項

Azure App Service 提供可高度調整且自我修補的虛擬主機服務。 本教學課程示範如何在 App Service 中開發資料驅動的 ASP.NET 應用程式，並將它連線到Azure SQL Database。 完成時，您的 ASP.NET 應用程式就會在 Azure 中執行，並已連線到 SQL Database。

Published ASP.NET application in Azure App Service

在本教學課程中，您會了解如何：

  • 在 Azure SQL Database 中建立資料庫
  • 將 ASP.NET 應用程式連線到 SQL Database
  • 將應用程式部署至 Azure
  • 將資料模型更新並將應用程式重新部署
  • 將記錄從 Azure 串流到終端機

如果您沒有 Azure 訂閱，請在開始之前，先建立 Azure 免費帳戶。

必要條件

完成本教學課程：

安裝 Visual Studio 2022，以及 ASP.NET 與 Web 開發與 Azure 開發工作負載。

如果您已安裝 Visual Studio，請按一下 [工具]>[取得工具和功能] 在 Visual Studio 中新增工作負載。

下載範例

  1. 下載範例專案。

  2. 解壓縮 dotnet-sqldb-tutorial-master.zip 檔案。

範例專案包含一個使用 Entity Framework Code First 的基本 ASP.NET MVC 建立-讀取-更新-刪除 (CRUD) 應用程式。

執行應用程式

  1. 在 Visual Studio 中開啟 dotnet-sqldb-tutorial-master/DotNetAppSqlDb.sln 檔案。

  2. 輸入 F5 以執行應用程式。 應用程式會在預設瀏覽器中顯示。

    注意

    如果您只安裝 Visual Studio 和必要條件，則可能必須透過 NuGet 安裝遺漏套件。

  3. 選取 [新建] 連結，並且建立幾個 [待辦事項] 項目。

    New ASP.NET Project dialog box

  4. 測試 Edit、Details 和 Delete 連結。

應用程式會使用資料庫內容，與資料庫連線。 在這個範例中，資料庫內容會使用名為 MyDbConnection 的連接字串。 連接字串是在 Web.config 檔案中設定，並在 Models/MyDatabaseContext.cs 檔案中進行參考。 稍後會在本教學課程中使用此連接字串名稱，將 Azure 應用程式連線到 Azure SQL Database。

將 ASP.NET 應用程式發佈至 Azure

  1. 在 [方案總管] 中，以滑鼠右鍵按一下 [DotNetAppSqlDb] 專案，然後選取 [發佈]。

    Publish from Solution Explorer

  2. 選取 [Azure] 作為目標，並按 [下一步]。

  3. 確定已選取 [Azure App Service (Windows)]，並按一下 [發佈]。

登入並新增應用程式

  1. 在 [發佈] 對話方塊中，按一下 [登入]。

  2. 登入 Azure 訂用帳戶。 如果您已登入 Microsoft 帳戶，請確定該帳戶保留您的 Azure 訂用帳戶。 如果登入的 Microsoft 帳戶沒有 Azure 訂用帳戶，請按一下它來新增正確的帳戶。

  3. 在 [App Service 執行個體] 窗格中，按一下 +。

    Sign in to Azure

設定 Web 應用程式名稱

您可以保留產生的 Web 應用程式名稱，或將它變更為另一個唯一的名稱 (有效的字元是 a-z、0-9 和 -)。 Web 應用程式名稱是作為應用程式預設 URL 的一部分 (<app_name>.azurewebsites.net，其中 <app_name> 是您的 Web 應用程式名稱)。 Web 應用程式名稱在 Azure 中的所有應用程式之間必須是唯一的。

注意

請先不要選取 [建立]。

Create app service dialog

建立資源群組

資源群組是一個邏輯容器，可在其中部署與管理 Azure 資源 (例如 Web 應用程式、資料庫和儲存體帳戶)。 例如，您可以選擇在稍候透過一個簡單的步驟刪除整個資源群組。

  1. 按一下 [資源群組] 旁邊的 [新增]。

    Next to Resource Group, click New.

  2. 將資源群組命名為 myResourceGroup。

建立 App Service 方案

App Service 方案會指定用來裝載應用程式的 Web 伺服器陣列位置、大小和功能。 在裝載多個應用程式時，您可以將 Web 應用程式設定為共用單一 App Service 方案來節省開支。

App Service 方案可定義：

  • 區域 (例如︰北歐、美國東部或東南亞)
  • 執行個體大小 (小型、中型或大型)
  • 級別計數 (1 到 20 個執行個體)
  • SKU (免費、共用、基本、標準或進階)

  1. 按一下 [主控方案] 旁的 [新增]。

  2. 在 [設定 App Service 方案] 對話方塊中，使用下列設定來設定新的 App Service 方案，並按一下 [確定]︰

    設定 建議的值 取得更多資訊
    App Service 方案 myAppServicePlan App Service 方案
    地點 西歐 Azure 區域
    大小 免費 定價層

    Create App Service plan

  3. 按一下 [建立]，並等候系統建立 Azure 資源。

  4. [發佈] 對話方塊會顯示您已設定的資源。 按一下完成。

    the resources you've created

建立伺服器和資料庫

建立資料庫之前，您需要邏輯 SQL 伺服器。 邏輯 SQL 伺服器是邏輯建構，包含一組當作群組管理的資料庫。

  1. 在 [發佈] 對話方塊中，向下捲動至 [服務相依性] 區段。 按一下 [SQL Server 資料庫] 旁的 [設定]。

    注意

    請務必從 [發佈] 頁面設定SQL Database，而不是從 [已連線的服務] 頁面。

    Configure SQL Database dependency

  2. 選取 [Azure SQL Database]，並按一下 [下一步]。

  3. 在 [設定 SQL Database] 對話方塊中，按一下 +。

  4. 按一下 [資料庫伺服器] 旁的 [新增]。

    該伺服器名稱將作為伺服器預設 URL 的一部分：<server_name>.database.windows.net。 它在 Azure SQL 的所有伺服器之間必須是唯一的。 將伺服器名稱變更為所需值。

  5. 新增系統管理員使用者名稱和密碼。 如需密碼複雜性需求，請參閱密碼原則。

    請記住這個使用者名稱和密碼。 您稍後需要它們來管理伺服器。

    Create server

    重要

    即使您在連接字串中的密碼已經遮罩處理 (在 Visual Studio 以及 App Service 中)，但是它於某處受到維護的事實增加了您應用程式受到攻擊的可能性。 App Service 可以使用受控服務識別來降低此風險，方法是完全免除在您的程式碼或應用程式組態中維護祕密的需求。 如需詳細資訊，請參閱後續步驟。

  6. 按一下 [確定]。

  7. 在 [Azure SQL Database] 對話方塊中，保留預設產生的資料庫名稱。 選取 [建立]，並等候系統建立資料庫資源。

    Configure database

設定資料庫連線

  1. 當精靈完成建立資料庫資源時，按 [下一步]。

  2. 在 [資料庫連接字串名稱] 中，輸入 MyDbConnection。 此名稱必須符合 Models/MyDatabaseContext.cs 中所參考的連接字串。

  3. 在 [資料庫連線使用者名稱] 和 [資料庫連線密碼] 中，輸入建立伺服器時所用的管理員使用者名稱和密碼。

  4. 確定已選取 [Azure App 設定]，並按一下 [完成]。

    注意

    若您看到的是 [本機使用者秘密檔案]，則須從 [已連線的服務] 頁面設定 SQL Database，而不是從 [發佈] 頁面。

    Configure database connection string

  5. 等候組態精靈完成，並按一下 [關閉]。

部署 ASP.NET 應用程式

  1. 在 [發佈] 索引標籤中，向上捲動回頂端並按一下 [發佈]。 已將 ASP.NET 應用程式部署至 Azure 後。 預設瀏覽器隨即啟動，瀏覽至部署應用程式的 URL。

  2. 新增幾個待辦事項項目。

    Published ASP.NET application in Azure app

    恭喜！ 您的資料導向 ASP.NET 應用程式正在 Azure App Service 中執行。

在本機存取資料庫

Visual Studio 可讓您在 SQL Server 物件總管中輕鬆探索與管理新資料庫。 新的資料庫已開啟其防火牆，連至所建立 App Service 應用程式。 但若要從本機電腦存取 (例如從 Visual Studio)，則須針對本機電腦的公用 IP 位址開啟防火牆。 若您的網際網路服務提供者變更公用 IP 位址，則須重新設定防火牆，才能再次存取 Azure 資料庫。

建立資料庫連接

  1. 從 [檢視] 功能表選取 [SQL Server 物件總管]。

  2. 在 [SQL Server 物件總管] 上方，按一下 [加入 SQL Server] 按鈕。

設定資料庫連接

  1. 在 [連接] 對話方塊中，展開 [Azure] 節點。 此處會列出 Azure 中您所有的 SQL Database 執行個體。

  2. 選取您稍早建立的資料庫。 系統會自動在下方填入您稍早建立的連線。

  3. 輸入您稍早建立的資料庫管理員密碼，然後按一下 [連線]。

    Configure database connection from Visual Studio

允許來自您電腦的用戶端連接

[建立新的防火牆規則] 對話方塊即會開啟。 根據預設，伺服器僅會允許來自 Azure 服務 (例如 Azure 應用程式) 與其資料庫的連線。 若要從 Azure 外部連接到您的資料庫，請在伺服器層級建立防火牆規則。 防火牆規則允許本機電腦的公用 IP 位址。

對話方塊中已經填入您的電腦公用 IP 位址。

  1. 確定已選取 [加入我的用戶端 IP]，然後按一下 [確定]。

    Create firewall rule

    當 Visual Studio 完成建立 SQL Database 執行個體的防火牆設定時，您的連線就會出現在 [SQL Server 物件總管] 中。

    您可以在此處執行最常見的資料庫作業，例如執行查詢、建立檢視表和預存程序，以及其他更多作業。

  2. 展開您的連線 >[資料庫]><您的資料庫>>[資料表]。 以滑鼠右鍵按一下 Todoes 資料表並選取 [檢視資料]。

    Explore SQL Database objects

使用 Code First 移轉更新應用程式

您可以使用 Visual Studio 中熟悉的工具，來更新您在 Azure 中的資料庫與應用程式。 在此步驟中，您會使用 Entity Framework 中的 Code First 移轉來變更資料庫結構描述，然後將它發佈至 Azure。

如需有關使用 Entity Framework Code First 移轉的詳細資訊，請參閱使用 MVC 5 開始使用 Entity Framework 6 Code First。

更新資料模型

在程式碼編輯器中開啟 Models\Todo.cs。 將下列屬性加入至 ToDo 類別：

public bool Done { get; set; }

在本機執行 Code First 移轉

執行數個命令以進行本機資料庫的更新。

  1. 從 [工具] 功能表中，按一下 [NuGet 封裝管理員]>[封裝管理員主控台]。

  2. 在 [套件管理員主控台] 視窗中，啟用 Code First 移轉：

    Enable-Migrations

  3. 新增移轉：

    Add-Migration AddProperty

  4. 更新本機資料庫：

    Update-Database

  5. 輸入 Ctrl+F5 以執行應用程式。 測試編輯、詳細資料和建立連結。

如果應用程式載入而不會出現錯誤，則表示 Code First 移轉已成功。 不過，您的頁面仍然看起來一樣，因為您的應用程式邏輯尚未使用這個新屬性。

使用新屬性

在您的程式碼中進行一些變更以使用 Done 屬性。 為了簡單起見，在本教學課程中，您僅需變更 Index 和 Create 檢視，以查看作用中的屬性。

  1. 開啟 Controllers\TodosController.cs。

  2. 尋找位於行 52 的 Create() 方法，並將 Done 新增至 Bind 屬性 (Attribute) 中的屬性 (Property) 清單。 完成時，您的 Create() 方法簽章應該如以下程式碼所示：

    public ActionResult Create([Bind(Include = "Description,CreatedDate,Done")] Todo todo)

  3. 開啟 Views\Todos\Create.cshtml。

  4. 在 Razor 程式碼中，您應該會看到使用 model.Description 的 <div class="form-group"> 元素，然後是另一個使用 model.CreatedDate 的 <div class="form-group"> 元素。 在這兩個元素的正後方，新增另一個使用 model.Done 的 <div class="form-group"> 元素：

    <div class="form-group">
    @Html.LabelFor(model => model.Done, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <div class="checkbox">
            @Html.EditorFor(model => model.Done)
            @Html.ValidationMessageFor(model => model.Done, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

  5. 開啟 Views\Todos\Index.cshtml。

  6. 搜尋空白的 <th></th> 元素。 在此元素的正上方，新增下列 Razor 程式碼：

    <th>
    @Html.DisplayNameFor(model => model.Done)
</th>

  7. 尋找包含 Html.ActionLink() Helper 方法的 <td> 元素。 在這個 <td>上方，使用下列 Razor 程式碼新增另一個 <td> 元素：

    <td>
    @Html.DisplayFor(modelItem => item.Done)
</td>

    您只需查看 Index 和 Create 檢視中的變更。

  8. 輸入 Ctrl+F5 以執行應用程式。

您現在可以新增待辦事項項目，並且勾選 [完成]。 然後，它應該會在您的首頁中顯示為已完成的項目。 請記住，[Edit] 檢視不會顯示 [Done] 欄位，因為您沒有變更 [Edit] 檢視。

啟用 Azure 中的 Code First 移轉

您的程式碼變更會立即運作 (包括資料庫移轉)，您也可以將它發佈至 Azure 應用程式，然後使用 Code First 移轉來更新您的 SQL Database。

  1. 就像之前一樣，以滑鼠右鍵按一下專案，然後選取 [發佈]。

  2. 按一下[更多動作]>[編輯] 開啟發佈設定。

    Open publish settings

  3. 在 [MyDatabaseCoNtext]下拉式清單中，選取 Azure SQL Database 的資料庫連線。

  4. 選取 [執行 Code First 移轉 (在應用程式啟動時執行)] ，然後按一下 [儲存]。

    Enable Code First Migrations in Azure app

發佈您的變更

現在，您已在 Azure 應用程式中啟用 Code First 移轉，請發佈您的程式碼變更。

  1. 在發佈頁面中，按一下 [發佈]。

  2. 嘗試再次新增待辦事項，然後選取 [完成]，而它們應該會在您的首頁中顯示為已完成的項目。

    Azure app after Code First Migration

仍會顯示您現有的所有待辦事項項目。 當您重新發佈 ASP.NET 應用程式時，您 SQL Database 中現有的資料不會遺失。 此外，Code First 移轉只會變更資料結構描述，並讓現有的資料保持不變。

資料流應用程式記錄

您可以將追蹤訊息從 Azure 應用程式直接串流處理到 Visual Studio。

開啟 Controllers\TodosController.cs。

每個動作都是以 Trace.WriteLine() 方法開始。 新增此程式碼的用意是示範如何將追蹤訊息新增至 Azure 應用程式。

啟用記錄資料流

  1. 在發佈頁面中，向下捲動至 [主控] 區段。

  2. 按一下右上角的 ...>[檢視串流記錄]。

    Enable log streaming

    現在已將記錄資料流處理至 [輸出] 視窗。

    Log streaming in Output window

    不過，您還不會看到任何追蹤訊息。 這是因為當您第一次選取 [檢視串流記錄] 時，您的 Azure 應用程式會將追蹤層級設定為 Error，這只會記錄錯誤事件 (使用 Trace.TraceError() 方法)。

變更追蹤層級

  1. 若要變更追蹤層級以輸出其他追蹤訊息，請返回發佈頁面。

  2. 在 [主控] 區段中，按一下[...]>[在 Azure 入口網站 中開啟]。

  3. 在應用程式的入口網站管理頁面中，從左側功能表選取 [App Service 記錄]。

  4. 在[應用程式記錄 (檔案系統) 下，選取 [層級] 中的[詳細資訊]。 按一下 [檔案] 。

    提示

    您可以試驗不同的追蹤層級，以查看針對每個層級顯示的訊息類型。 例如，[資訊] 層級包含 Trace.TraceInformation()、Trace.TraceWarning() 和Trace.TraceError() 所建立的所有記錄，但不包含 Trace.WriteLine() 所建立的記錄。

  5. 在瀏覽器中，再次瀏覽至位於 http://<應用程式名稱>.azurewebsites.net 的應用程式，並嘗試按一下 Azure 中的待辦事項清單應用程式。 追蹤訊息現在會資料流處理到 Visual Studio 的 [輸出] 視窗中。

    Application: 2017-04-06T23:30:41  PID[8132] Verbose     GET /Todos/Index
Application: 2017-04-06T23:30:43  PID[8132] Verbose     GET /Todos/Create
Application: 2017-04-06T23:30:53  PID[8132] Verbose     POST /Todos/Create
Application: 2017-04-06T23:30:54  PID[8132] Verbose     GET /Todos/Index

停止記錄資料流

若要停止記錄資料流服務，按一下 [輸出] 視窗中的 [停止監視] 按鈕。

Stop log streaming

清除資源

在上述步驟中，您已建立資源群組中的 Azure 資源。 如果您預期未來不需要這些資源，則可以藉由刪除資源群組予以刪除。

  1. 從 Azure 入口網站中的 Web 應用程式概觀頁面，選取資源群組底下的 myResourceGroup 連結。
  2. 在 [資源群組] 頁面上，確定所列出資源是您想要刪除的資源。
  3. 選取 [刪除]，在文字方塊中鍵入 ，然後選取 [刪除]。

下一步

在本教學課程中，您已了解如何：

  • 在 Azure SQL Database 中建立資料庫
  • 將 ASP.NET 應用程式連線到 SQL Database
  • 將應用程式部署至 Azure
  • 將資料模型更新並將應用程式重新部署
  • 將記錄從 Azure 串流到終端機

前進到下一個教學課程，以了解如何輕鬆改善 Azure SQL Database 連線的安全性。

教學課程：使用無秘密的受控識別從 SQL Database 連線至 App Service

其他資源：

設定 ASP.NET 應用程式

想要最佳化並節省您的雲端費用嗎？

使用成本管理開始分析成本