Partager via

Démarrage rapide : Créer une solution Aspire avec Azure App Configuration

Dans ce guide de démarrage rapide, vous allez utiliser Azure App Configuration pour externaliser le stockage et la gestion des paramètres de votre application pour un projet Aspire. Vous allez utiliser des bibliothèques d’intégration Aspire Azure App Configuration pour approvisionner une ressource App Configuration et utiliser App Configuration dans chaque application distribuée.

Prerequisites

Tester l’application localement

Le modèle Aspire Starter inclut une application web frontale qui communique avec un projet d’API minimal. Le projet d’API est utilisé pour fournir des données météorologiques fausses au front-end. L’application frontale est configurée pour utiliser la découverte de service pour se connecter au projet d’API. Il existe également un AppHost projet qui orchestre toutes les applications distribuées dans la solution Aspire.

  1. Exécutez le projet AppHost. Vous voyez le tableau de bord Aspire dans votre navigateur.

    Capture d’écran du tableau de bord Aspire avec des ressources de service web frontend et API.

  2. Cliquez sur l’URL du front-end web. Vous voyez une page contenant un message de bienvenue.

    Capture d’écran d’une application web avec un message de bienvenue.

Ajouter Azure App Configuration à la solution Aspire

  1. Accédez au AppHost répertoire du projet. Exécutez la commande suivante pour ajouter le Aspire.Hosting.Azure.AppConfiguration package Nuget.

    dotnet add package Aspire.Hosting.Azure.AppConfiguration

  2. Ouvrez le fichier AppHost.csproj pour vérifier les packages. Vous devez voir un package nommé Aspire.Hosting.AppHost référencé. Vérifiez que la version du paquet Aspire.Hosting.AppHost est au moins égale à celle du Aspire.Hosting.Azure.AppConfiguration installé.

  3. Ouvrez le fichier AppHost.cs et ajoutez le code suivant.

    var builder = DistributedApplication.CreateBuilder(args);

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

    Important

    Lorsque vous appelez AddAzureAppConfiguration, vous demandez à l’application de générer dynamiquement des ressources Azure au démarrage de l’application. L’application doit configurer l’abonnement et l’emplacement appropriés. Pour plus d’informations, consultez Provisionnement Azure local. Si vous utilisez le dernier SDK Aspire, vous pouvez configurer les informations d’abonnement via le tableau de bord Aspire. Capture d’écran du tableau de bord Aspire demandant des informations sur l’abonnement Azure.

    Note

    Vous devez disposer du rôle Propriétaire ou Administrateur de l’accès utilisateur attribué sur l’abonnement Azure. Ces rôles sont nécessaires pour créer des attributions de rôles dans le cadre du processus d’approvisionnement.

    Conseil / Astuce

    Vous pouvez référencer des ressources App Configuration existantes en chaînant un appel RunAsExisting() sur builder.AddAzureAppConfiguration("appconfig"). Pour plus d’informations, accédez à Utiliser des ressources Azure existantes.

  4. Ajoutez la référence de la ressource App Configuration au projet webfrontend et configurez-le pour qu'il l'attende.

    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. Exécutez le projet AppHost. Vous voyez que la ressource Azure App Configuration est en cours d’approvisionnement.

    Capture d’écran du tableau de bord Aspire provisionnant la ressource Azure App Configuration.

  6. Attendez quelques minutes et vous voyez que la ressource Azure App Configuration est provisionnée et est en cours d’exécution.

    Capture d’écran du tableau de bord Aspire avec la ressource Azure App Configuration en cours d’exécution.

  7. Accédez au portail Azure en cliquant sur l’URL de déploiement dans le tableau de bord Aspire. Vous voyez que le déploiement est terminé et que vous pouvez accéder à votre ressource Azure App Configuration.

    Capture d’écran du portail Azure montrant que le déploiement d’App Configuration est terminé.

Ajouter une clé-valeur

Ajoutez la clé-valeur suivante à votre magasin App Configuration et laissez étiquette et type de contenu avec leurs valeurs par défaut. Pour plus d’informations sur l’ajout de clés-valeurs à un magasin avec le Portail Azure ou la CLI, consultez Créer une clé-valeur.

Key Valeur
TestApp :Settings :Message Bonjour à partir d’Azure App Configuration !

Ajouter Azure App Configuration à la solution Aspire

  1. Accédez au AppHost répertoire du projet. Exécutez la commande suivante pour ajouter le Aspire.Hosting.Azure.AppConfiguration package Nuget.

    dotnet add package Aspire.Hosting.Azure.AppConfiguration

  2. Ouvrez AppHost.csproj. Vérifiez que la version du Aspire.Hosting.AppHost package n’est pas antérieure à la version que vous avez installée. Sinon, vous devez mettre à niveau le Aspire.Hosting.AppHost package.

  3. Ouvrez le fichier AppHost.cs et ajoutez le code suivant.

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

    Important

    Lorsque vous appelez RunAsEmulator, il extrait l’image de l’émulateur App Configuration et exécute un conteneur en tant que ressource App Configuration. Vérifiez que vous disposez d’un runtime de conteneur conforme OCI sur votre ordinateur. Pour plus d’informations, accédez à Aspire Container Runtime.

    Conseil / Astuce

    Vous pouvez appeler WithDataBindMount ou WithDataVolume configurer la ressource de l’émulateur pour le stockage de conteneurs persistant afin que vous n’ayez pas besoin de recréer des valeurs de clé à chaque fois.

  4. Ajoutez la référence de la ressource App Configuration au projet webfrontend et configurez-le pour qu'il l'attende.

    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. Démarrez votre runtime de conteneur. Dans ce tutoriel, nous utilisons Docker Desktop.

  6. Exécutez le projet AppHost. Accédez au tableau de bord Aspire. Vous voyez que la ressource de l’émulateur App Configuration est en cours d’exécution.

    Capture d’écran du tableau de bord Aspire montrant la ressource de l’émulateur App Configuration.

    Un conteneur est démarré pour exécuter l’émulateur App Configuration.

    Capture d’écran du bureau Docker exécutant un conteneur.

Ajouter une clé-valeur

  1. Cliquez sur l’URL de la appconfiguration ressource. L’interface utilisateur de l’émulateur App Configuration s’affiche.

  2. Cliquez sur le Create bouton en haut à droite.

    Capture d’écran de l’interface utilisateur de l’émulateur App Configuration.

  3. Ajoutez la clé-valeur suivante.

    Key Valeur
    TestApp :Settings :Message Bonjour à partir d’Azure App Configuration !

  4. Cliquez sur le bouton Save.

    Capture d’écran de l’interface utilisateur de l’émulateur App Configuration de la création d’une nouvelle valeur de clé.

Utiliser App Configuration dans l’application web

  1. Accédez au Web répertoire du projet. Exécutez la commande suivante pour ajouter le Aspire.Microsoft.Extensions.Configuration.AzureAppConfiguration package Nuget.

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

  2. Ouvrez le fichier Program.cs et ajoutez le code suivant.

    var builder = WebApplication.CreateBuilder(args);

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

  3. Ouvrez le fichier Components/Pages/Home.razor et mettez-le à jour avec le code suivant.

    @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. Redémarrez le AppHost projet. Accédez au tableau de bord Aspire et cliquez sur l’URL du front-end web.

    Capture d’écran du tableau de bord Aspire montrant les ressources.

  5. Vous voyez une page contenant un message de bienvenue d’Azure App Configuration.

    Capture d’écran d’une application web avec un message de bienvenue d’Azure App Configuration.

Étapes suivantes

Dans ce guide de démarrage rapide, vous :

  • Ajout d’une ressource Azure App Configuration dans une solution Aspire.
  • Lisez vos valeurs clés à partir d’Azure App Configuration avec la bibliothèque d’intégration App Configuration Aspire.
  • Affiche une page web à l’aide des paramètres que vous avez configurés dans votre App Configuration.

Pour savoir comment configurer votre application Aspire pour actualiser dynamiquement les paramètres de configuration, passez au tutoriel suivant.

Activer la configuration dynamique

Pour savoir comment utiliser des indicateurs de fonctionnalité dans votre application Aspire, passez au tutoriel suivant.

Utiliser des indicateurs de fonctionnalité dans Aspire

Pour en savoir plus sur l’émulateur Azure App Configuration, passez au document suivant.

Vue d’ensemble de l’émulateur Azure App Configuration

  • Last updated on