練習 - 建立應用程式並部署至 Azure

10 分鐘

若要使用 App Service 進行遠端偵錯練習，您必須先建立應用程式並將其部署至 Azure。您將建立的 Razor Pages 範例應用程式，可讓使用者依組織搜尋 GitHub 存放庫。不過，此應用程式也包含一個小錯誤 (bug)，在部署應用程式後需要使用 Visual Studio 進行疑難排解。

建立範例應用程式

您可以使用 Visual Studio 建立此課程模組的範例應用程式。範例應用程式可讓您依名稱搜尋 GitHub 組織，並在簡單的表格中顯示其存放庫。

在 Visual Studio 中，選取 [檔案] > [新增專案]。
在 [建立新專案] 對話方塊中，搜尋 ASP.NET，然後選取 [ASP.NET Core Web 應用程式] 選項。請務必選擇 Razor Pages 專案範本，而不是 [Model-View-Controller] 選項，然後選取 [下一步]。
在 [設定新專案] 對話方塊中，將專案命名為 GitHubBrowser，針對其餘設定保留預設值，然後選擇 [下一步]。

重要

請務必為下面程式碼片段將您的專案命名為 GitHubBrowser，以使用相符的命名空間。如果您將專案命名為其他樣子，則必須更新程式碼片段中的命名空間。
在 [其他資訊] 步驟中，選擇 [.NET 6.0 (長期支援)]，然後選取 [建立]。此練習也可以與舊版 .NET 搭配使用，例如 .NET 5.0 或 .NET Core 3.1。

Visual Studio 建立專案之後，請在方案總管中展開 Pages 資料夾，然後開啟 Index.cshtml 檔案。以下列程式碼取代 Index.cshtml 的內容：

@page
@model IndexModel

<h1 class="display-6">Welcome to the GitHub searcher!</h1>
<p class="mb-3">Enter the name of a GitHub organization such as "Microsoft" or "Azure" to browse its repositories.</p>

<form method="post" class="form mb-5">
    <div class="form-group mb-3">
        <input type="text" class="form-control" asp-for="@Model.SearchTerm" />
    </div>
    <input class="btn btn-success" type="submit" value="Search" />
</form>

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <td>Name</td>
            <td>Description</td>
            <td>Link</td>
        </tr>
    </thead>
    @foreach (var item in Model.Repos)
    {
        <tr>
            <td>@item.Name</td>
            <td>@Html.Raw(item.Description)</td>
            <td><a class="btn btn-secondary" href="@item.HtmlUrl">Browse</a></td>
        </tr>
    }
</table>

此 Razor 程式碼提供基本搜尋表單來瀏覽 GitHub 組織，並在表格中顯示結果。

在方案總管中，展開 Index.cshtml 旁的箭頭以顯示 Index.cshtml.cs 檔案。按兩下 Index.cshtml.cs 檔案加以開啟，然後以下列程式碼取代其內容：

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Net.Http.Headers;
using System.Text.Json;
using System.Text.Json.Serialization;

namespace GitHubBrowser.Pages
{
    public class IndexModel : PageModel
    {
        private readonly IConfiguration _env;

        [BindProperty]
        public string SearchTerm { get; set; }

        public IEnumerable<GitRepo> Repos { get; set; } = new List<GitRepo>();

        public IndexModel(IConfiguration env)
        {
            _env = env;
        }

        public IActionResult OnGet()
        {
            return Page();
        }

        public async Task<IActionResult> OnPost()
        {
            var client = new HttpClient();

            var githubUrl = _env["GitHubUrl"];
            var searchUrl = $"{githubUrl}/orgs/{SearchTerm}/repos";
            var httpRequestMessage = new HttpRequestMessage(HttpMethod.Get, searchUrl)
            {
                Headers =
                {
                    { HeaderNames.UserAgent, "dotnet" }
                }
            };

            var httpResponseMessage = await client.SendAsync(httpRequestMessage);
            var content = await httpResponseMessage.Content.ReadAsStringAsync();
            Repos = JsonSerializer.Deserialize<IEnumerable<GitRepo>>(content);

            return Page();
        }
    }

    public class GitRepo
    {
        [JsonPropertyName("name")]
        public string Name { get; set; }

        [JsonPropertyName("description")]
        public string Description { get; set; }

        [JsonPropertyName("html_url")]
        public string HtmlUrl { get; set; }
    }
}

上述程式碼包含兩個重要方法：

OnGet 方法一開始會處理搜尋頁面的載入。
OnPost 方法會處理表單提交。該方法會使用設定服務從 appsettings.Development.json 檔案提取 GitHub API URL，並將提交的搜尋字詞當作參數來提出 HTTP 要求。從 API 傳回的項目接著會指派給屬性，並使用 Index.cshtml 檔案中的資料表來轉譯。

在 Visual Studio 方案總管中，展開 appsettings.json 檔案旁的箭頭。開啟 appsettings.Development.json 檔案，並以下列程式碼取代其內容：
```
{
  "GitHubURL": "https://api.github.com",
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  }
}
```
此檔案提供應用程式的一些基本設定值，包括用來擷取組織存放庫的 GitHub API URL。
您可以選取 Visual Studio 頂端的 [執行] 按鈕，在本機測試應用程式。應用程式應該會在瀏覽器中載入，並顯示用於搜尋查詢的表單。例如，搜尋「dotnet」，瀏覽該 GitHub 組織的存放庫，了解結果應如何。

將應用程式部署至 Azure

接下來，您必須將應用程式部署至 Azure，供其他人用以瀏覽存放庫。您可以使用 Visual Studio 和下列步驟來部署應用程式。

如果您使用 Learn 沙箱，可能需要在 Visual Studio 內登出再重新登入，才能重新整理您的訂用帳戶資訊。您可以按一下 Visual Studio 右上角的 [名稱] 圖示，選擇 [帳戶設定]，然後選擇 [登出]，然後 [登入]，以管理您的帳戶。請確定您已登入用來建立沙箱的相同帳戶。
在 [方案總管] 中以滑鼠右鍵按一下專案節點，然後選取 [發佈]。
在發佈對話方塊中，選取 [Azure] 當作目標，然後選取 [下一步]。
在 [特定目標] 步驟中，選取 [Azure App Service (Windows)]，然後選擇 [下一步]。
針對 [App Service] 步驟，請在對話方塊右上方，確定您已登入正確的 Azure 帳戶。

請記住，針對 Learn 沙箱，您可能需要登出 Visual Studio 並登入，讓沙箱訂用帳戶可供使用，如先前所述。
選取您想要部署的訂用帳戶。

針對 Learn 沙箱環境，按一下 [重新整理] 按鈕來檢查是否已載入 Concierge Subscription。如果可用，請加以選取。如果無法使用，請繼續進行下一個步驟。
選取 [+ 新建] 按鈕，建立新的 App Service 執行個體。

注意

針對沙箱環境，您可能需要等候 Visual Studio 載入訂用帳戶資訊。這可能需要一些時間。

在新的 App Service 對話方塊中，輸入或驗證下列值：

設定	值
名稱	輸入 `GitHubBrowser123`，其中 `123` 是您選擇的三個亂數，以確保在 Azure 中您的 App Service 名稱和網域不重複。
訂用帳戶名稱	如果您使用 Learn 沙箱環境，請選取 `Concierge Subscription`，否則選取自己的訂用帳戶。
資源群組	如果您使用沙箱，請選擇預設 [沙箱資源群組名稱] 資源群組，或選取 [新增...] 以使用如 `mslearn-github-browser` 的名稱建立自己的新群組。
主控方案	如果您使用 Learn 沙箱，請保留預設值。如果您使用自己的訂用帳戶，請選取 [新增...]，輸入名稱 `mslearn-github-browser-plan`，然後選擇您的執行個體大小。

提示

如果您使用 Learn 沙箱，且未顯示預設主控方案，請將資源群組切換至新的群組，然後切換回預設群組。)

建立 App Service 工作流程的螢幕擷取畫面。

選取 [建立] 以關閉對話方塊，Visual Studio 需要一些時間為您建立 App Service 執行個體。

建立 App Service 之後，請選取新的執行個體，然後選擇 [完成]。如果您改為看到空白畫面，請嘗試繼續進行下一個步驟。
Visual Studio 會顯示發行設定檔的摘要檢視。選取右上角的 [發佈]，將您的應用程式部署至 Azure。此程序可能需要一些時間才能完成。

部署完成時，Visual Studio 會啟動網頁瀏覽器，開啟您應用程式的首頁。一開始，一切似乎都正常運作。

接下來，在 GitHubBrowser 應用程式的搜尋方塊中再次輸入 dotnet ，此時您會收到錯誤頁面，而不是結果資料表。此錯誤不是在本機發生，您可以使用 Visual Studio 來找出原因。

應用程式錯誤的螢幕擷取畫面。

啟用遠端偵錯

您必須先啟用 App Service 的遠端偵錯功能，才能使用 Visual Studio 對此問題進行偵錯。此設定可讓 Visual Studio 偵錯工具連線至主要應用程式服務 Web 裝載處理序。

如果您使用 Learn 沙箱，請開啟 Learn 沙箱 Azure 入口網站。請務必使用您開啟沙箱的同一個帳戶登入。如果您未使用沙箱，請登入您自己的 Azure 入口網站。

在 Azure 入口網站中找到已部署的應用程式。您可以瀏覽至 [應用程式服務] 頁面，然後選取 [GitHubBrowser123] 應用程式，找到您的應用程式。您也可以在頂端的搜尋列中，直接依名稱搜尋 App Service 執行個體。
在 [App Service 設定] 頁面上，選取左側導覽功能表中 [設定] 底下的 [組態]，然後選取 [一般設定] 索引標籤。
在頁面底部，務必將 [遠端偵錯] 功能設定為 [開啟]，然後選取 [2022] 當作 [遠端 Visual Studio 版本]。
選取 [儲存]，然後選取頁面頂端的 [繼續]，以保存您的變更。

您的 App Service 執行個體現在支援透過 Visual Studio 進行遠端偵錯。

練習 - 建立應用程式並部署至 Azure

建立範例應用程式

將應用程式部署至 Azure

啟用遠端偵錯

意見反應