Partager via

Démarrage rapide : Créer une application ASP.NET Core avec Azure App Configuration

  • Article

Dans ce guide de démarrage rapide, vous utilisez Azure App Configuration pour externaliser le stockage et la gestion de vos paramètres d’application ASP.NET Core. ASP.NET Core génère un objet de configuration basé sur une paire clé-valeur unique utilisant les paramètres d’un ou de plusieurs fournisseurs de configuration. App Configuration offre une bibliothèque de fournisseurs de configuration .NET. Par conséquent, vous pouvez utiliser App Configuration comme source de configuration supplémentaire pour votre application. Si vous disposez d’une application existante, pour commencer à utiliser App Configuration, vous n’aurez besoin que de quelques petites modifications apportées au code de démarrage de votre application.

Prérequis

Conseil

Azure Cloud Shell est un interpréteur de commandes interactif gratuit qui vous permet d’exécuter les instructions de ligne de commande de cet article. Les outils Azure les plus courants y sont préinstallés, y compris le Kit de développement logiciel (SDK) .NET. Si vous êtes connecté à votre abonnement Azure, lancez Azure Cloud Shell à partir de shell.azure.com. Pour en savoir plus sur Azure Cloud Shell, consultez notre documentation.

Ajouter des clés-valeurs

Ajoutez les clés-valeurs suivantes au magasin App Configuration et conservez les valeurs par défaut des options Étiquette et Type de contenu. Pour plus d’informations sur l’ajout de clés-valeurs à un magasin avec le Portail Azure ou l’interface CLI, consultez Création d’une clé-valeur.

Clé Valeur
TestApp:Settings:BackgroundColor white
TestApp:Settings:FontColor black
TestApp:Settings:FontSize 24
TestApp:Settings:Message Data from Azure App Configuration

Créez une application web ASP.NET Core

Utilisez l’Interface de ligne de commande (CLI) .NET pour créer un projet d’application web ASP.NET Core. Azure Cloud Shell vous fournit ces outils, qui sont également disponibles sur les plateformes Windows, macOS et Linux.

Exécutez la commande suivante pour créer une application web ASP.NET Core dans un nouveau dossier TestAppConfig :

dotnet new webapp --output TestAppConfig

Se connecter au magasin App Configuration

Connectez-vous à votre magasin App Configuration à l’aide de Microsoft Entra ID (recommandé) ou d’une chaîne de connexion.

  1. Naviguez jusqu’au répertoire TestAppConfig du projet et exécutez la commande suivante pour ajouter des références de package NuGet.

    dotnet add package Microsoft.Azure.AppConfiguration.AspNetCore
dotnet add package Azure.Identity

  2. Créez un secret utilisateur pour l’application en accédant au dossier TestAppConfig et exécutez la commande suivante.

    La commande utilise le Gestionnaire de secrets pour stocker un secret nommé Endpoints:AppConfiguration, qui stocke le point de terminaison de votre magasin App Configuration. Remplacez l’espace réservé <your-App-Configuration-endpoint> par le point de terminaison de votre magasin App Configuration. Le point de terminaison se trouve dans le panneau Vue d’ensemble de votre magasin App Configuration dans le portail Azure.

    dotnet user-secrets init
dotnet user-secrets set Endpoints:AppConfiguration "<your-App-Configuration-endpoint>"

  3. Ouvrez Program.cs et ajoutez les espaces de noms suivants :

    using Microsoft.Extensions.Configuration;
using Microsoft.Azure.AppConfiguration.AspNetCore;
using Azure.Identity;

  4. Connectez-vous à votre magasin App Configuration en appelant la méthode AddAzureAppConfiguration dans le fichier Program.cs.

    Vous utilisez le DefaultAzureCredential pour vous authentifier auprès de votre magasin App Configuration. Suivez les instructions pour attribuer à votre identifiant le rôle de lecteur de données de configuration de l'application. Veillez à laisser suffisamment de temps pour que l’autorisation se propage avant d’exécuter votre application.

    var builder = WebApplication.CreateBuilder(args); 

// Retrieve the endpoint
string endpoint = builder.Configuration.GetValue<string>("Endpoints:AppConfiguration")
    ?? throw new InvalidOperationException("The setting `Endpoints:AppConfiguration` was not found.");

// Load configuration from Azure App Configuration 
builder.Configuration.AddAzureAppConfiguration(options =>
{
    options.Connect(new Uri(endpoint), new DefaultAzureCredential());
});

// The rest of existing code in program.cs
// ... ...

    Ce code charge toutes les valeurs clés qui n’ont aucune étiquette à partir de votre magasin App Configuration. Pour plus d’informations sur le chargement de données à partir d’App Configuration, consultez Référence sur l’API du fournisseur App Configuration.

Lire depuis le magasin App Configuration

Dans cet exemple, vous allez mettre à jour une page web pour afficher son contenu à l’aide des paramètres que vous avez configurés dans votre magasin App Configuration.

  1. Ajoutez un fichier Settings.cs à la racine du répertoire de votre projet. Il définit une classe Settings fortement typée pour la configuration que vous allez utiliser. Remplacez l’espace de noms par le nom de votre projet.

    namespace TestAppConfig
{
    public class Settings
    {
        public string BackgroundColor { get; set; }
        public long FontSize { get; set; }
        public string FontColor { get; set; }
        public string Message { get; set; }
    }
}

  2. Liez la section TestApp:Settings dans la configuration à l’objet Settings.

    Mettez à jour Program.cs à l’aide du code suivant et ajoutez l’espace de noms TestAppConfig au début du fichier.

    using TestAppConfig;

// Existing code in Program.cs
// ... ...

builder.Services.AddRazorPages();

// Bind configuration "TestApp:Settings" section to the Settings object
builder.Services.Configure<Settings>(builder.Configuration.GetSection("TestApp:Settings"));

var app = builder.Build();

// The rest of existing code in program.cs
// ... ...

  3. Ouvrez Index.cshtml.cs dans le répertoire Pages et mettez à jour la classe IndexModel avec le code suivant. Ajoutez l’espace de noms using Microsoft.Extensions.Options au début du fichier s’il n’y figure pas encore.

    public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;

    public Settings Settings { get; }

    public IndexModel(IOptionsSnapshot<Settings> options, ILogger<IndexModel> logger)
    {
        Settings = options.Value;
        _logger = logger;
    }
}

  4. Ouvrez Index.cshtml dans le répertoire Pages et mettez à jour le contenu avec le code suivant.

    @page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<style>
    body {
        background-color: @Model.Settings.BackgroundColor;
    }

    h1 {
        color: @Model.Settings.FontColor;
        font-size: @(Model.Settings.FontSize)px;
    }
</style>

<h1>@Model.Settings.Message</h1>

Générer et exécuter l’application localement

  1. Pour générer l’application à l’aide de l’interface CLI .NET, accédez au répertoire racine de votre projet. Exécutez la commande suivante dans le shell de commandes :

    dotnet build

  2. Une fois la génération terminée, exécutez la commande suivante pour exécuter l’application web localement :

    dotnet run

  3. La sortie de la commande dotnet run contient deux URL. Ouvrez un navigateur et accédez à l’une de ces URL afin d’accéder à votre application. Par exemple : https://localhost:5001.

    Si vous travaillez dans Azure Cloud Shell, sélectionnez le bouton Aperçu web, puis Configurer. Lorsque vous êtes invité à configurer le port pour l’aperçu, entrez 5000, puis sélectionnez Ouvrir et parcourir.

    Capture d’écran d’Azure Cloud Shell. Recherche de la préversion Web.

    La page Web ressemble à ce qui suit : Capture d’écran du navigateur. Lancement local de l’application de démarrage rapide.

Nettoyer les ressources

Si vous ne souhaitez plus utiliser les ressources créées dans cet article, supprimez le groupe de ressources que vous avez créé ici afin d’éviter des frais.

Important

La suppression d’un groupe de ressources est irréversible. Le groupe de ressources et toutes les ressources qu’il contient sont supprimés définitivement. Veillez à ne pas supprimer accidentellement les mauvaises ressources ou le mauvais groupe de ressources. Si vous avez créé les ressources pour cet article dans un groupe de ressources contenant d’autres ressources que vous souhaitez conserver, supprimez chaque ressource individuellement à partir de son volet, au lieu de supprimer l’intégralité du groupe de ressources.

  1. Connectez-vous au portail Azure, puis sélectionnez Groupes de ressources.
  2. Dans la zone Filtrer par nom, entrez le nom de votre groupe de ressources.
  3. Dans la liste de résultats, sélectionnez le nom du groupe de ressources pour afficher une vue d’ensemble.
  4. Sélectionnez Supprimer le groupe de ressources.
  5. Vous êtes invité à confirmer la suppression du groupe de ressources. Entrez le nom de votre groupe de ressources à confirmer, puis sélectionnez Supprimer.

Après quelques instants, le groupe de ressources et toutes ses ressources sont supprimés.

Étapes suivantes

Dans ce guide de démarrage rapide, vous :

  • Avez configuré un nouveau stockage App Configuration.
  • Vous êtes connecté à votre magasin App Configuration à l’aide de la bibliothèque de fournisseurs App Configuration.
  • Avez lu les valeurs de clé de votre magasin App Configuration avec la bibliothèque de fournisseurs de configuration.
  • Avez affiché une page web à l’aide des paramètres que vous avez configurés dans votre magasin App Configuration.

Pour savoir comment configurer votre application web ASP.NET Core afin d’actualiser dynamiquement les paramètres de configuration, passez au tutoriel suivant.

Activer la configuration dynamique