教學課程：使用 Azure App Service 和 Azure OpenAI 建置聊天機器人（.NET）

在本教學課程中，您將整合 Azure OpenAI 與 Java Spring Boot 應用程式，並將其部署至 Azure App Service，以建置智慧型手機 AI 應用程式。 您將建立 Razor 頁面，以將聊天完成要求傳送至 Azure OpneAI 中的模型，並將回應串流回頁面。

在本教學課程中，您將瞭解如何：

• 建立 Azure OpenAI 資源並部署語言模型
• 使用 Azure OpenAI 建置 Blazor 應用程式
• 將應用程式部署至 Azure App Service
• 在開發環境和 Azure 中實作無密碼驗證

先決條件

• 具有有效訂閱的Azure 帳戶
• 為使用 GitHub Codespaces 而設置的 GitHub 帳戶

1.建立 Azure OpenAI 資源

在本節中，您將使用 GitHub Codespaces 搭配 Azure CLI 建立 Azure OpenAI 資源。

1. 移至 GitHub Codespaces 並使用您的 GitHub 帳戶登入。

2. 在 GitHub 上尋找 空白 範本，然後選取 使用此範本 來建立新的空白 Codespace。

3. 在 Codespace 終端機中，安裝 Azure CLI：

   curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash
   

4. 登入您的 Azure 帳戶：

   az login
   

   請遵循終端機中的指示進行驗證。

5. 設定資源群組名稱、Azure OpenAI 服務名稱和位置的環境變數：

   export RESOURCE_GROUP="<group-name>"
   export OPENAI_SERVICE_NAME="<azure-openai-name>"
   export APPSERVICE_NAME="<app-name>"
   export LOCATION="eastus2"
   

   這很重要

   區域很重要，因為它與所選模型的區域可用性相關。 模型可用性和 部署類型可用性 會因區域而異。 本教學課程使用 gpt-4o-mini，其可在標準部署類型下取得 eastus2 。 如果您部署到不同的區域，此模型可能無法使用，或可能需要不同的階層。 變更區域之前，請參閱 模型摘要數據表和區域可用性 ，以確認您慣用區域中的模型支援。

6. 使用自定義網域建立資源群組和 Azure OpenAI 資源，然後新增 gpt-4o-mini 模型：

   # Resource group
   az group create --name $RESOURCE_GROUP --location $LOCATION
   # Azure OpenAI resource
   az cognitiveservices account create \
     --name $OPENAI_SERVICE_NAME \
     --resource-group $RESOURCE_GROUP \
     --location $LOCATION \
     --custom-domain $OPENAI_SERVICE_NAME \
     --kind OpenAI \
     --sku s0
   # gpt-4o-mini model
   az cognitiveservices account deployment create \
     --name $OPENAI_SERVICE_NAME \
     --resource-group $RESOURCE_GROUP \
     --deployment-name gpt-4o-mini \
     --model-name gpt-4o-mini \
     --model-version 2024-07-18 \
     --model-format OpenAI \
     --sku-name Standard \
     --sku-capacity 1
   # Cognitive Services OpenAI User role that lets the signed in Azure user to read models from Azure OpenAI
   az role assignment create \
     --assignee $(az ad signed-in-user show --query id -o tsv) \
     --role "Cognitive Services OpenAI User" \
     --scope /subscriptions/$(az account show --query id -o tsv)/resourceGroups/$RESOURCE_GROUP/providers/Microsoft.CognitiveServices/accounts/$OPENAI_SERVICE_NAME
   

現在您已擁有 Azure OpenAI 資源，您將建立 Web 應用程式來與其互動。

2.建立及設定 Blazor Web 應用程式

在本節中，您將使用 .NET CLI 建立新的 Blazor Web 應用程式。

1. 在您的 Codespace 終端機中，建立新的 Blazor 應用程式，並嘗試第一次執行它。

   dotnet new blazor -o .
   dotnet run
   

   您應該會在 GitHub Codespaces 中看到通知，指出應用程式可在特定埠使用。 選取 [在瀏覽器中開啟 ] 以在新瀏覽器索引標籤中啟動應用程式。

2. 回到 Codespace 終端機，使用 Ctrl+C 停止應用程式。

3. 安裝必要的 NuGet 套件以使用 Azure OpenAI：

   dotnet add package Azure.AI.OpenAI
   dotnet add package Azure.Identity
   

4. 使用下列程式代碼開啟 Components/Pages/Home.razor 並取代其內容，以使用 Azure OpenAI 進行簡單的聊天完成串流呼叫：

   @page "/"
   @rendermode InteractiveServer
   @using Azure.AI.OpenAI
   @using Azure.Identity
   @using OpenAI.Chat
   @inject Microsoft.Extensions.Configuration.IConfiguration _config
   
   <h3>Azure OpenAI Chat</h3>
   <div class="mb-3 d-flex align-items-center" style="margin:auto;">
       <input class="form-control me-2" @bind="userMessage" placeholder="Type your message..." />
       <button class="btn btn-primary" @onclick="SendMessage">Send</button>
   </div>
   <div class="card p-3" style="margin:auto;">
       @if (!string.IsNullOrEmpty(aiResponse))
       {
           <div class="alert alert-info mt-3 mb-0">@aiResponse</div>
       }
   </div>
   
   @code {
       private string? userMessage;
       private string? aiResponse;
   
       private async Task SendMessage()
       {
           if (string.IsNullOrWhiteSpace(userMessage)) return;
   
           // Initialize the Azure OpenAI client
           var endpoint = new Uri(_config["AZURE_OPENAI_ENDPOINT"]!);
           var client = new AzureOpenAIClient(endpoint, new DefaultAzureCredential());
           var chatClient = client.GetChatClient("gpt-4o-mini");
   
           aiResponse = string.Empty;
           StateHasChanged();
   
           // Create a chat completion streaming request
           var chatUpdates = chatClient.CompleteChatStreamingAsync(
               [
                   new UserChatMessage(userMessage)
               ]);
   
               await foreach(var chatUpdate in chatUpdates)
               {
                   // Update the UI with the streaming response
                   foreach(var contentPart in chatUpdate.ContentUpdate)
               {
                   aiResponse += contentPart.Text;
                   StateHasChanged();
               }
           }
       }
   }
   

5. 在終端機中，擷取您的 OpenAI 端點：

   az cognitiveservices account show \
     --name $OPENAI_SERVICE_NAME \
     --resource-group $RESOURCE_GROUP \
     --query properties.endpoint \
     --output tsv
   

6. 再次執行應用程式，方法是從 CLI 輸出新增 AZURE_OPENAI_ENDPOINT 其值：

   AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> dotnet run
   

7. 選取 [在瀏覽器中開啟 ] 以在新瀏覽器索引標籤中啟動應用程式。

8. 在文本框中輸入訊息，然後選取 [傳送]，然後為應用程式提供幾秒鐘的時間，以回復來自 Azure OpenAI 的訊息。

應用程式會使用 DefaultAzureCredential，其會自動使用您的 Azure CLI 登入使用者進行令牌驗證。 在本教學課程稍後，您會將 Blazor 應用程式部署至 Azure App Service，並將其設定為使用受控識別安全地連線到您的 Azure OpenAI 資源。 程序代碼中的相同 DefaultAzureCredential 可以偵測受控識別，並將其用於驗證。 不需要額外的程序代碼。

3.部署至 Azure App Service 並設定 OpenAI 連線

既然您的應用程式在本機運作，讓我們將其部署至 Azure App Service，並使用受控識別設定 Azure OpenAI 的服務連線。

1. 首先，使用 Azure CLI 命令 az webapp up將您的應用程式部署至 Azure App Service。 這個指令會建立新的 Web 應用程式，並將程式代碼部署到其中：

   az webapp up \
     --resource-group $RESOURCE_GROUP \
     --location $LOCATION \
     --name $APPSERVICE_NAME \
     --plan $APPSERVICE_NAME \
     --sku B1 \
     --os-type Linux \
     --track-status false
   

   此命令可能需要幾分鐘的時間才能完成。 它會在與 OpenAI 資源相同的資源群組中建立新的 Web 應用程式。

2. 部署應用程式之後，請使用受控識別，在 Web 應用程式與 Azure OpenAI 資源之間建立服務連線：

   az webapp connection create cognitiveservices \
     --resource-group $RESOURCE_GROUP \
     --name $APPSERVICE_NAME \
     --target-resource-group $RESOURCE_GROUP \
     --account $OPENAI_SERVICE_NAME
     --connection azure-openai \
     --system-identity
   

   此命令會建立 Web 應用程式與 Azure OpenAI 資源之間的連線，方法是：

   • 為 Web 應用程式產生系統指派的受控識別。
   • 將認知服務 OpenAI 貢獻者角色新增至 Azure OpenAI 資源的受管理的身份。
   • 將 AZURE_OPENAI_ENDPOINT 應用程式設定新增至 Web 應用程式。

   您的應用程式現在已部署並連線至具有受控識別的 Azure OpenAI。 我透過 AZURE_OPENAI_ENDPOINT讀取應用程式設定。

3. 在瀏覽器中開啟已部署的 Web 應用程式。 在終端機輸出中尋找已部署 Web 應用程式的 URL。 開啟網頁瀏覽器並流覽至它。

   az webapp browse
   

4. 在文本框中輸入訊息，然後選取 [傳送]，然後為應用程式提供幾秒鐘的時間，以回復來自 Azure OpenAI 的訊息。

   

常見問題

• 如果我想要連線到 OpenAI 而不是 Azure OpenAI，該怎麼辦？
• 我可以改為使用 API 金鑰連線到 Azure OpenAI 嗎？
• DefaultAzureCredential 如何在本教學課程中運作？

---

如果我想要連線到 OpenAI 而不是 Azure OpenAI，該怎麼辦？

若要改為連線到 OpenAI，請使用下列程式代碼：

@using OpenAI.Client

var client = new OpenAIClient("<openai-api-key>");

如需詳細資訊，請參閱 OpenAI API 驗證。

在 App Service 中使用連線密碼時，您應該使用 Key Vault 參考 ，而不是將秘密直接儲存在程式碼基底中。 這可確保敏感性資訊保持安全且集中管理。

---

我可以改為使用 API 金鑰連線到 Azure OpenAI 嗎？

是，您可以使用 API 金鑰來連線到 Azure OpenAI，而不是受控識別。 Azure OpenAI SDK 和語意核心支援此方法。

• 如需在 C# 中使用 API 金鑰搭配語意核心的詳細資訊，請參閱 語意核心 C# 快速入門。
• 如需使用 Azure OpenAI 用戶端程式庫的 API 金鑰詳細資訊，請參閱快速入門：使用 Azure OpenAI 服務的聊天功能開始入門。

在 App Service 中使用連線密碼時，您應該使用 Key Vault 參考 ，而不是將秘密直接儲存在程式碼基底中。 這可確保敏感性資訊保持安全且集中管理。

---

DefaultAzureCredential 如何在本教學課程中運作？

藉 DefaultAzureCredential 由自動選取最佳的可用驗證方法，簡化驗證：

• 在本機開發期間：執行 az login之後，它會使用本機 Azure CLI 認證。
• 部署至 Azure App Service 時：它會使用應用程式的受控識別進行安全、無密碼的驗證。

這種方法可讓您的程式代碼在本機和雲端環境中安全地順暢地執行，而不需要修改。

更多資源

• 教學課程：使用 Azure OpenAI 和 Azure AI 搜尋建置檢索增強生成 （.NET）
• 教學：在 App Service 中使用 Phi-4 側車擴充功能運行聊天機器人 （ASP.NET Core）
• 建立和部署 Azure OpenAI 服務資源
• 深入瞭解 App Service 中的受控識別