Quickstart: Een Aspire-oplossing maken met Azure App Configuration

In deze quickstart gebruik je Azure App Configuration om opslag en beheer van je app-instellingen voor een Aspire-project externaliseren. Je gebruikt Azure App Configuration Aspire integratiebibliotheken om een App Configuration-resource te provisioneren en gebruikt App Configuration in elke gedistribueerde app.

Vereiste voorwaarden

De app lokaal testen

De Aspire Starter-sjabloon bevat een front-endweb-app die communiceert met een minimaal API-project. Het API-project levert nep-weersgegevens aan de frontend. De frontend-app gebruikt service discovery om verbinding te maken met het API-project. Een AppHost orkestreert alle middelen in de Aspire-oplossing.

  1. Vanaf de oplossingswortel start je de AppHost:

    aspire run

    U ziet het Aspire-dashboard in uw browser.

    Schermopname van het Aspire-dashboard met webfront-end- en API-servicebronnen.

  2. Klik op de URL van de webfront-end. U ziet een pagina met een welkomstbericht.

    Schermopname van een web-app met een welkomstbericht.

Azure App Configuration toevoegen aan de Aspire-oplossing

  1. Ga naar de AppHost-map. Voer het volgende commando uit om het Aspire.Hosting.Azure.AppConfiguration NuGet-pakket toe te voegen.

    aspire add Aspire.Hosting.Azure.AppConfiguration

    Voor meer informatie, zie aspire addintegratie van Azure App Configuration Hosting.

  2. Open het AppHost.cs-bestand en voeg de volgende code toe.

    var builder = DistributedApplication.CreateBuilder(args);

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

    Belangrijk

    Wanneer u aanroept AddAzureAppConfiguration, geeft u de app de opdracht om Azure-resources dynamisch te genereren tijdens het opstarten van de app. De app moet het juiste abonnement en de juiste locatie configureren. Zie Lokale Azure-inrichting voor meer informatie. Als u de nieuwste Aspire SDK gebruikt, kunt u de abonnementsgegevens configureren via het Aspire-dashboard. Screenshot van het Aspire-dashboard Change Azure contextdialoog.

    Opmerking

    U moet de rol Eigenaar of Beheerder voor gebruikerstoegang hebben toegewezen aan het Azure-abonnement. Deze rollen zijn vereist om roltoewijzingen te maken als onderdeel van het inrichtingsproces.

    Aanbeveling

    Verwijs naar een bestaande App Configuration-opslag door de naam en resourcegroep als parameters door te geven aan AsExisting():

    var storeName = builder.AddParameter("appConfigurationName");
var resourceGroup = builder.AddParameter("appConfigurationResourceGroup");

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

    Voor meer informatie, zie Gebruik bestaande Azure-bronnen.

  3. Voeg de verwijzing van de App Configuration-resource toe en configureer het webfrontend project om erop te wachten.

    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. Voer vanuit de hoofdmap van de oplossing aspire run uit. Je ziet dat de Azure App Configuration-resource wordt ingericht.

    Schermopname van het inrichten van een Azure App Configuration-resource in Het Dashboard van Aspire.

  5. Wacht enkele minuten en u ziet dat de Azure App Configuration-resource is ingericht en wordt uitgevoerd.

    Schermopname van het dashboard van Aspire waarop de Azure App Configuration-resource draait.

  6. Ga naar Azure Portal door te klikken op de implementatie-URL op het Aspire-dashboard. U ziet dat de implementatie is voltooid en u kunt naar uw Azure App Configuration-resource gaan.

    Schermopname van Azure Portal met de implementatie van App Configuration is voltooid.

Een sleutelwaarde toevoegen

Voeg de volgende sleutelwaarde toe aan uw App Configuration-archief en laat label en inhoudstype ongewijzigd met de standaardwaarden. Ga naar Een sleutelwaarde maken voor meer informatie over het toevoegen van sleutelwaarden aan een opslag met de Azure Portal of de CLI.

Key Waarde
TestApp:Settings:Message Hallo vanuit Azure App Configuration!

Azure App Configuration toevoegen aan de Aspire-oplossing

  1. Ga naar de map AppHost. Voer het volgende commando uit om het Aspire.Hosting.Azure.AppConfiguration NuGet-pakket toe te voegen.

    aspire add Aspire.Hosting.Azure.AppConfiguration

    Voor meer informatie, zie aspire addintegratie van Azure App Configuration Hosting.

  2. Open het AppHost.cs-bestand en voeg de volgende code toe.

    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();
    });

    Belangrijk

    Wanneer u aanroept RunAsEmulator, wordt de installatiekopie van de App Configuration-emulator opgehaald en wordt een container uitgevoerd als de App Configuration-resource. Zorg ervoor dat u een OCI-compatibele containerruntime op uw computer hebt. Ga naar Aspire Container Runtime voor meer informatie.

    Aanbeveling

    U kunt de emulatorresource aanroepen WithDataBindMount of WithDataVolume configureren voor permanente containeropslag, zodat u niet telkens opnieuw sleutelwaarden hoeft te maken.

  3. Voeg de verwijzing van de App Configuration-resource toe en configureer het webfrontend project om erop te wachten.

    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. Start de containerruntime. In deze zelfstudie gebruiken we Docker Desktop.

  5. Voer vanuit de hoofdmap van de oplossing aspire run uit. Ga naar het Aspire-dashboard. U ziet dat de app configuration-emulator resource actief is.

    Schermopname van het Aspire-dashboard met de Resource van de App Configuration-emulator.

    Er wordt een container gestart om de App Configuration-emulator uit te voeren.

    Schermopname van het docker-bureaublad waarop een container wordt uitgevoerd.

Een sleutelwaarde toevoegen

  1. Klik op de URL van de appconfiguration resource. U ziet de gebruikersinterface van de App Configuration-emulator.

  2. Klik op de Create knop in de rechterbovenhoek.

    Schermopname van de gebruikersinterface van de App Configuration-emulator.

  3. Voeg de volgende sleutelwaarde toe.

    Key Waarde
    TestApp:Settings:Message Hallo vanuit Azure App Configuration!

  4. Klik op de knop Save.

    Schermopname van de gebruikersinterface van de App Configuration-emulator van het maken van een nieuwe sleutelwaarde.

App Configuration gebruiken in de webtoepassing

  1. Ga naar de map van het Web project. Voer het volgende commando uit om het Aspire.Microsoft.Extensions.Configuration.AzureAppConfiguration NuGet-pakket toe te voegen.

    dotnet add package Aspire.Microsoft.Extensions.Configuration.AzureAppConfiguration

  2. Open het bestand Program.cs en voeg de volgende code toe.

    var builder = WebApplication.CreateBuilder(args);

// Use Azure App Configuration
builder.AddAzureAppConfiguration("appconfiguration"); // use the resource name defined in the AppHost project

  3. Open het bestand Components/Pages/Home.razor en werk het bij met de volgende code.

    @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. Stop het huidige aspire run proces, voer opnieuw uit aspire run en selecteer vervolgens de webfrontend-URL in het Aspire-dashboard.

    Schermopname van Het Dashboard van Aspire met resources.

  5. U ziet een pagina met een welkomstbericht van Azure App Configuration.

    Schermopname van een web-app met een welkomstbericht van Azure App Configuration.

Voor meer informatie over hoe consumerende applicaties het App Configuration-eindpunt ontvangen en gebruiken, zie Connect to Azure App Configuration.

Volgende stappen

In deze snelstart, gaat u het volgende doen:

  • Er is een Azure App Configuration-resource toegevoegd in een Aspire-oplossing.
  • Lees uw sleutelwaarden uit Azure App Configuration met de Integratiebibliotheek App Configuration Aspire.
  • Er wordt een webpagina weergegeven met behulp van de instellingen die u hebt geconfigureerd in uw app-configuratie.

Als u wilt weten hoe u uw Aspire-app configureert om configuratie-instellingen dynamisch te vernieuwen, gaat u verder met de volgende zelfstudie.

Dynamische configuratie inschakelen

Als u wilt weten hoe u functievlagmen gebruikt in uw Aspire-app, gaat u verder met de volgende zelfstudie.

Functievlagmen gebruiken in Aspire

Ga naar het volgende document voor meer informatie over de Azure App Configuration-emulator.

Overzicht van Azure App Configuration-emulator

  • Laatst bijgewerkt om