Inicio rápido: Creación de una solución Aspire con Azure App Configuration

En este inicio rápido, usas Azure App Configuration para externalizar el almacenamiento y la gestión de la configuración de tu app para un proyecto de Aspire. Utilizas las bibliotecas de integración de Azure App Configuration Aspire para aprovisionar un recurso de Configuración de Aplicaciones y usar Configuración de Aplicaciones en cada aplicación distribuida.

Prerrequisitos

Prueba local de la aplicación

La plantilla Aspire Starter incluye una aplicación web de front-end que se comunica con un proyecto de API mínima. El proyecto API proporciona datos meteorológicos falsos al frontend. La aplicación frontend utiliza el descubrimiento de servicios para conectarse al proyecto API. Un AppHost coordina todos los recursos de la solución Aspire.

  1. Desde la raíz de la solución, ejecuta el AppHost:

    aspire run

    Verá el panel Aspire en el explorador.

    Captura de pantalla del panel de Aspire con recursos de front-end web y servicio de API.

  2. Haga clic en la dirección URL del front-end web. Verá una página con un mensaje de bienvenida.

    Captura de pantalla de una aplicación web con un mensaje de bienvenida.

Incorporación de Azure App Configuration a la solución Aspire

  1. Ve al directorio de AppHost. Ejecuta el siguiente comando para añadir el Aspire.Hosting.Azure.AppConfiguration paquete NuGet.

    aspire add Aspire.Hosting.Azure.AppConfiguration

    Para más información, consulta aspire addla integración de Azure App Configuration Hosting.

  2. Abra el archivo AppHost.cs y agregue el código siguiente.

    var builder = DistributedApplication.CreateBuilder(args);

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

    Importante

    Cuando se llama a AddAzureAppConfiguration, se indica a la aplicación que genere recursos de Azure dinámicamente durante el inicio de la aplicación. La aplicación debe configurar la suscripción y la ubicación adecuadas. Para más información, consulte Aprovisionamiento local de Azure. Si usa el SDK de Aspire más reciente, puede configurar la información de la suscripción a través del panel de Aspire. Captura de pantalla del cuadro de diálogo Cambiar el contexto de Azure del panel de Aspire.

    Nota:

    Debe tener asignado el rol Propietario o Administrador de acceso de usuario en la suscripción de Azure. Estos roles son necesarios para crear asignaciones de roles como parte del proceso de aprovisionamiento.

    Sugerencia

    Haga referencia a un almacén de App Configuration existente al pasar su nombre y grupo de recursos como parámetros a AsExisting():

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

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

    Para más información, véase Utilizar recursos existentes de Azure.

  3. Agregue la referencia del recurso de App Configuration y configure el proyecto webfrontend para que espere.

    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. Desde la raíz de la solución, ejecuta aspire run. Ves el recurso Azure App Configuration siendo provisionado.

    Captura de pantalla de la provisión del recurso Azure App Configuration en el panel de Aspire.

  5. Espere unos minutos y verá que el recurso de Azure App Configuration se aprovisiona y se está ejecutando.

    Captura de pantalla del panel Aspire con el recurso de Azure App Configuration en ejecución.

  6. Para ir a Azure Portal, haga clic en la dirección URL de implementación en el panel Aspire. Verá que la implementación está completa y puede ir al recurso de Azure App Configuration.

    Captura de pantalla de Azure Portal en la que se muestra que la implementación de App Configuration está completa.

Agregar un par clave-valor

Agregue el siguiente valor de clave al almacén de App Configuration y deje Etiqueta y tipo de contenido con sus valores predeterminados. Para obtener más información sobre cómo agregar pares clave-valor a un almacén mediante Azure Portal o la CLI, vaya a Creación de un par clave-valor.

Key Importancia
TestApp:Settings:Message Hola desde Azure App Configuration.

Incorporación de Azure App Configuration a la solución Aspire

  1. Ve al directorio AppHost. Ejecuta el siguiente comando para añadir el Aspire.Hosting.Azure.AppConfiguration paquete NuGet.

    aspire add Aspire.Hosting.Azure.AppConfiguration

    Para más información, consulta aspire addla integración de Azure App Configuration Hosting.

  2. Abra el archivo AppHost.cs y agregue el código siguiente.

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

    Importante

    Cuando se llama a RunAsEmulator, extrae la imagen del emulador de App Configuration y ejecuta un contenedor como recurso de App Configuration. Asegúrese de que tiene un entorno de ejecución de contenedor compatible con OCI en la máquina. Para obtener más información, vaya a Aspire Container Runtime.

    Sugerencia

    Puede llamar a WithDataBindMount o WithDataVolume para configurar el recurso del emulador para el almacenamiento persistente de contenedores, para evitar recrear los valores clave cada vez.

  3. Agregue la referencia del recurso de App Configuration y configure el proyecto webfrontend para que espere.

    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. Inicie el entorno de ejecución del contenedor. En este tutorial, se usa Docker Desktop.

  5. Desde la raíz de la solución, ejecuta aspire run. Vaya al panel Aspire. Verá que el recurso del emulador de App Configuration se está ejecutando.

    Captura de pantalla del panel Aspire que muestra el recurso del emulador de App Configuration.

    Se inicia un contenedor para ejecutar el emulador de App Configuration.

    Captura de pantalla del escritorio de Docker que ejecuta un contenedor.

Agregar un par clave-valor

  1. Haga clic en la dirección URL del appconfiguration recurso. Verá la interfaz de usuario del emulador de App Configuration.

  2. Haga clic en el Create botón de la esquina superior derecha.

    Captura de pantalla de la interfaz de usuario del emulador de App Configuration.

  3. Agregue el siguiente valor de clave.

    Key Importancia
    TestApp:Settings:Message Hola desde Azure App Configuration.

  4. Haga clic en el botón Save.

    Captura de pantalla de la interfaz de usuario del emulador de App Configuration para crear un nuevo valor de clave.

Uso de App Configuration en la aplicación web

  1. Ve al Web directorio del proyecto. Ejecuta el siguiente comando para añadir el Aspire.Microsoft.Extensions.Configuration.AzureAppConfiguration paquete NuGet.

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

  2. Abra el archivo Program.cs y agregue el código siguiente.

    var builder = WebApplication.CreateBuilder(args);

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

  3. Abra el archivo Components/Pages/Home.razor y actualícelo con el código siguiente.

    @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. Detiene el proceso actual aspire run , ejecuta aspire run de nuevo y luego selecciona la URL del frontend web en el panel de control de Aspire.

    Captura de pantalla del panel Aspire que muestra los recursos.

  5. Verá una página con un mensaje de bienvenida de Azure App Configuration.

    Captura de pantalla de una aplicación web con un mensaje de bienvenida de Azure App Configuration.

Para más información sobre cómo las aplicaciones consumidoras reciben y utilizan el endpoint App Configuration, consulte Connect to Azure App Configuration.

Pasos siguientes

En esta guía de inicio rápido:

  • Se ha agregado un recurso de Azure App Configuration en una solución Aspire.
  • Lea sus valores clave desde Azure App Configuration con la biblioteca de integración App Configuration Aspire.
  • Muestra una página web con la configuración que configuró en App Configuration.

Para obtener información sobre cómo configurar la aplicación Aspire para actualizar dinámicamente las opciones de configuración, continúe con el siguiente tutorial.

Habilitación de la configuración dinámica

Para aprender a usar marcas de características en la aplicación Aspire, continúe con el siguiente tutorial.

Usar banderas de características en Aspire

Para más información sobre el emulador de Azure App Configuration, continúe con el siguiente documento.

Introducción al emulador de Azure App Configuration

  • Se actualizó por última vez el