Szybki start: Utwórz rozwiązanie Aspire przy użyciu usługi Azure App Configuration

W tym szybkim starcie używasz Azure App Configuration do eksternalizacji przechowywania i zarządzania ustawieniami aplikacji dla projektu Aspire. Używasz bibliotek integracyjnych Azure App Configuration Aspire do aranżowania zasobu konfiguracji aplikacji i korzystasz z konfiguracji aplikacji w każdej aplikacji rozproszonej.

Wymagania wstępne

Testowanie aplikacji lokalnie

Szablon Aspire Starter zawiera aplikację frontendową, która komunikuje się z projektem minimalnego interfejsu API. Projekt API dostarcza fałszywe dane pogodowe do frontendu. Aplikacja frontendowa wykorzystuje odkrywanie usług do łączenia się z projektem API. AppHost zarządza wszystkimi zasobami w rozwiązaniu Aspire.

  1. Z rootu rozwiązania uruchom AppHost:

    aspire run
    

    Widzisz pulpit nawigacyjny Aspire w swojej przeglądarce.

    Zrzut ekranu przedstawiający panel zarządzania Aspire z zasobami frontonu internetowego i usługi interfejsu API.

  2. Kliknij adres URL frontonu internetowego. Zostanie wyświetlona strona z komunikatem powitalnym.

    Zrzut ekranu przedstawiający aplikację internetową z komunikatem powitalnym.

Dodawanie usługi Azure App Configuration do rozwiązania Aspire

  1. Przejdź do katalogu AppHost. Uruchom następujące polecenie, aby dodać pakiet NuGet Aspire.Hosting.Azure.AppConfiguration.

    aspire add Aspire.Hosting.Azure.AppConfiguration
    

    Więcej informacji można znaleźć w artykule o aspire addintegracji Azure App Configuration Hosting.

  2. Otwórz plik AppHost.cs i dodaj następujący kod.

    var builder = DistributedApplication.CreateBuilder(args);
    
    // Add an Azure App Configuration resource
    var appConfiguration = builder.AddAzureAppConfiguration("appconfiguration");
    

    Ważne

    Podczas wywoływania metody AddAzureAppConfiguration, instruujesz aplikację, aby dynamicznie generowała zasoby Azure podczas jej uruchamiania. Aplikacja musi skonfigurować odpowiednią subskrypcję i lokalizację. Aby uzyskać więcej informacji, zobacz Local Azure provisioning (Lokalna aprowizacja platformy Azure). Jeśli używasz najnowszego zestawu SDK Aspire, możesz skonfigurować informacje o subskrypcji przez dashboard Aspire. Zrzut ekranu okna dialogowego „Zmień kontekst platformy Azure” w pulpicie nawigacyjnym Aspire.

    Uwaga / Notatka

    Musisz mieć przypisaną rolę Właściciel lub Administrator dostępu użytkowników w subskrypcji platformy Azure. Te role są wymagane do tworzenia przypisań ról w ramach procesu aprowizacji.

    Wskazówka

    Odwołuj się do istniejącego magazynu konfiguracji aplikacji, przekazując jego nazwę i grupę zasobów jako parametry do AsExisting():

    var storeName = builder.AddParameter("appConfigurationName");
    var resourceGroup = builder.AddParameter("appConfigurationResourceGroup");
    
    var appConfiguration = builder.AddAzureAppConfiguration("appconfiguration")
        .AsExisting(storeName, resourceGroup);
    

    Więcej informacji znajdziesz w artykule Używaj istniejących zasobów Azure.

  3. Dodaj odwołanie do zasobu App Configuration i skonfiguruj projekt webfrontend, aby na niego czekał.

    builder.AddProject<Projects.AspireApp_Web>("webfrontend")
        .WithExternalHttpEndpoints()
        .WithHttpHealthCheck("/health")
        .WithReference(apiService)
        .WaitFor(apiService)
        .WithReference(appConfiguration) // reference the App Configuration resource
        .WaitFor(appConfiguration); // wait for the App Configuration resource to enter the Running state before starting the resource
    
  4. Z korzenia rozwiązania uruchom aspire run. Widzisz, że zasób Azure App Configuration jest aprowizowany.

    Zrzut ekranu pulpitu nawigacyjnego Aspire przedstawiający aprowizację zasobu Azure App Configuration.

  5. Poczekaj kilka minut i zobaczysz, że zasób usługi Azure App Configuration jest aprowizowany i działa.

    Zrzut ekranu przedstawiający pulpit nawigacyjny Aspire z uruchomionym zasobem usługi Azure App Configuration.

  6. Przejdź do witryny Azure Portal, klikając adres URL wdrożenia na pulpicie nawigacyjnym Aspire. Zobaczysz, że wdrożenie zostało ukończone i możesz przejść do zasobu usługi Azure App Configuration.

    Zrzut ekranu witryny Azure Portal przedstawiający ukończenie wdrażania usługi App Configuration.

Dodawanie wartości klucza

Dodaj następującą wartość klucza do sklepu App Configuration i pozostaw wartości domyślne Etykieta i Typ zawartości . Aby uzyskać więcej informacji na temat dodawania par klucz-wartość do magazynu przy użyciu portalu Azure lub interfejsu wiersza polecenia, przejdź do Utwórz parę klucz-wartość.

Key Wartość
TestApp:Settings:Message Witaj z usługi Azure App Configuration!

Dodawanie usługi Azure App Configuration do rozwiązania Aspire

  1. Przejdź do katalogu AppHost . Uruchom następujące polecenie, aby dodać pakiet NuGet Aspire.Hosting.Azure.AppConfiguration.

    aspire add Aspire.Hosting.Azure.AppConfiguration
    

    Więcej informacji można znaleźć w artykule o aspire addintegracji Azure App Configuration Hosting.

  2. Otwórz plik AppHost.cs i dodaj następujący kod.

    var builder = DistributedApplication.CreateBuilder(args);
    
    // Add an Azure App Configuration resource
    var appConfiguration = builder.AddAzureAppConfiguration("appconfiguration")
        .RunAsEmulator(emulator => { // use the App Configuration emulator
            emulator.WithDataBindMount();
        });
    

    Ważne

    Po wywołaniu RunAsEmulator pobiera obraz emulatora App Configuration i uruchamia kontener jako zasób App Configuration. Upewnij się, że na maszynie masz zgodne środowisko uruchomieniowe kontenera OCI. Aby uzyskać więcej informacji, przejdź do Aspire Container Runtime.

    Wskazówka

    Możesz zadzwonić pod WithDataBindMount lub WithDataVolume, aby skonfigurować zasób emulatora dla trwałego magazynowania w kontenerze, co pozwala uniknąć konieczności ponownego tworzenia wartości kluczy za każdym razem.

  3. Dodaj odwołanie do zasobu App Configuration i skonfiguruj projekt webfrontend, aby na niego czekał.

    builder.AddProject<Projects.AspireApp_Web>("webfrontend")
        .WithExternalHttpEndpoints()
        .WithHttpHealthCheck("/health")
        .WithReference(apiService)
        .WaitFor(apiService)
        .WithReference(appConfiguration) // reference the App Configuration resource
        .WaitFor(appConfiguration); // wait for the App Configuration resource to enter the Running state before starting the resource
    
  4. Uruchom środowisko uruchomieniowe kontenera. W tym samouczku używamy Docker Desktop.

  5. Z korzenia rozwiązania uruchom aspire run. Przejdź do pulpitu Aspire. Zobaczysz, że zasób emulatora usługi App Configuration jest uruchomiony.

    Zrzut ekranu pulpitu nawigacyjnego Aspire przedstawiający zasób emulatora App Configuration.

    Uruchomiono kontener, aby uruchomić emulator usługi App Configuration.

    Zrzut ekranu przedstawiający pulpit platformy Docker z uruchomionym kontenerem.

Dodawanie wartości klucza

  1. Kliknij adres URL appconfiguration zasobu. Zostanie wyświetlony interfejs użytkownika emulatora usługi App Configuration.

  2. Kliknij przycisk Create w prawym górnym rogu.

    Zrzut ekranu przedstawiający interfejs użytkownika emulatora usługi App Configuration.

  3. Dodaj następującą wartość klucza.

    Key Wartość
    TestApp:Settings:Message Witaj z usługi Azure App Configuration!
  4. Kliknij przycisk Save.

    Zrzut ekranu przedstawiający interfejs użytkownika emulatora usługi App Configuration podczas tworzenia nowej wartości klucza.

Korzystanie z usługi App Configuration w aplikacji internetowej

  1. Wejdź do Web katalogu projektu. Uruchom następujące polecenie, aby dodać pakiet NuGet Aspire.Microsoft.Extensions.Configuration.AzureAppConfiguration.

    dotnet add package Aspire.Microsoft.Extensions.Configuration.AzureAppConfiguration
    
  2. Otwórz plik Program.cs i dodaj następujący kod.

    var builder = WebApplication.CreateBuilder(args);
    
    // Use Azure App Configuration
    builder.AddAzureAppConfiguration("appconfiguration"); // use the resource name defined in the AppHost project
    
  3. Otwórz plik Components/Pages/Home.razor i zaktualizuj go przy użyciu następującego kodu.

    @page "/"
    
    @inject IConfiguration Configuration
    
    <PageTitle>Home</PageTitle>
    
    <h1>Hello, world!</h1>
    
    @if (!string.IsNullOrWhiteSpace(message))
    {
        <div class="alert alert-info">@message</div>
    }
    else
    {
        <div class="alert alert-info">Welcome to your new app.</div>
    }
    
    @code {
        private string? message;
    
        protected override void OnInitialized()
        {
            string? msg = Configuration["TestApp:Settings:Message"];
            message = string.IsNullOrWhiteSpace(msg) ? null : msg;
        }
    }
    
  4. Zatrzymaj bieżący proces aspire run, uruchom ponownie aspire run, a następnie wybierz adres URL internetowego frontonu na pulpicie nawigacyjnym Aspire.

    Zrzut ekranu pulpitu nawigacyjnego Aspire pokazujący zasoby.

  5. Zostanie wyświetlona strona z komunikatem powitalnym z usługi Azure App Configuration.

    Zrzut ekranu przedstawiający aplikację internetową z komunikatem powitalnym z usługi Azure App Configuration.

Aby uzyskać więcej informacji o tym, jak aplikacje konsumujące odbierają i korzystają z endpointu konfiguracji aplikacji, zobacz Połącz się z Azure App Configuration.

Dalsze kroki

W ramach tego szybkiego przewodnika wykonasz następujące czynności:

  • Dodano zasób Azure App Configuration w rozwiązaniu Aspire.
  • Przeczytaj klucz-wartości z usługi Azure App Configuration za pomocą biblioteki integracji App Configuration Aspire.
  • Wyświetlić stronę internetową przy użyciu ustawień skonfigurowanych w usłudze App Configuration.

Aby dowiedzieć się, jak skonfigurować aplikację Aspire do dynamicznego odświeżania ustawień konfiguracji, przejdź do następnego samouczka.

Aby dowiedzieć się, jak używać flag funkcji w aplikacji Aspire, przejdź do następnego samouczka.

Aby dowiedzieć się więcej na temat emulatora usługi Azure App Configuration, przejdź do następującego dokumentu.