Compartir a través de

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

En este inicio rápido, usará Azure App Configuration para externalizar el almacenamiento y la administración de la configuración de la aplicación para un proyecto Aspire. Usará bibliotecas de integración de Azure App Configuration Aspire para aprovisionar un recurso de App Configuration y usar App Configuration 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 de API se usa para proporcionar datos meteorológicos falsos al front-end. La aplicación de front-end está configurada para usar la detección de servicios para conectarse al proyecto de API. También hay un AppHost proyecto que organiza todas las aplicaciones distribuidas en la solución Aspire.

  1. Ejecute el proyecto AppHost. 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. Navegue al directorio del proyecto AppHost. Ejecute el siguiente comando para agregar el Aspire.Hosting.Azure.AppConfiguration paquete Nuget.

    dotnet add package Aspire.Hosting.Azure.AppConfiguration

  2. Abra el archivo AppHost.csproj para comprobar los paquetes. Debería ver que se hace referencia a un paquete denominado Aspire.Hosting.AppHost . Asegúrese de que la versión del Aspire.Hosting.AppHost paquete sea al menos tan alta como la versión de Aspire.Hosting.Azure.AppConfiguration que se instaló.

  3. 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 panel Aspire que solicita información de suscripción de Azure.

    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

    Para hacer referencia a los recursos existentes de App Configuration, encadene una llamada RunAsExisting() en builder.AddAzureAppConfiguration("appconfig"). Para más información, vaya a Uso de recursos de Azure existentes.

  4. 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

  5. Ejecute el proyecto AppHost. Verá que el recurso de Azure App Configuration se está aprovisionando.

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

  6. 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.

  7. 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. Ingrese en el AppHost directorio del proyecto. Ejecute el siguiente comando para agregar el Aspire.Hosting.Azure.AppConfiguration paquete Nuget.

    dotnet add package Aspire.Hosting.Azure.AppConfiguration

  2. Abra AppHost.csproj. Asegúrese de que la versión del Aspire.Hosting.AppHost paquete no sea anterior a la versión que instaló. De lo contrario, debe actualizar el Aspire.Hosting.AppHost paquete.

  3. 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.

  4. 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

  5. Inicie el entorno de ejecución del contenedor. En este tutorial, se usa Docker Desktop.

  6. Ejecute el proyecto AppHost. 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. Ingrese en el Web directorio del proyecto. Ejecute el siguiente comando para agregar 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. Reinicie el AppHost proyecto. Vaya al panel Aspire y haga clic en la dirección URL del front-end web.

    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.

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

  • Last updated on