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

Article
02/20/2024

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

Compte Azure avec un abonnement actif. Créez-en un gratuitement.
Un magasin App Configuration. Créez un magasin.
SDK .NET 6.0 ou ultérieur

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 --framework net6.0

Se connecter au magasin App Configuration

Accédez au répertoire TestAppConfig du projet et exécutez la commande suivante pour ajouter une référence de package NuGet Microsoft.Azure.AppConfiguration.AspNetCore :
```
dotnet add package Microsoft.Azure.AppConfiguration.AspNetCore
```
Exécutez la commande suivante : La commande utilise Secret Manager pour stocker un secret nommé ConnectionStrings:AppConfig, qui stocke la chaîne de connexion de votre magasin App Configuration. Remplacez l'espace réservé <your_connection_string> par la chaîne de connexion de votre magasin App Configuration. La chaîne de connexion se trouve sous Clés d’accès dans votre magasin App Configuration dans le portail Azure.
```
dotnet user-secrets init
dotnet user-secrets set ConnectionStrings:AppConfig "<your_connection_string>"
```
Conseil

Certains interpréteurs de commandes tronquent la chaîne de connexion, à moins qu’elle soit placée entre guillemets. Vérifiez que la sortie de la commande dotnet user-secrets list affiche la chaîne de connexion complète. Si ce n’est pas le cas, réexécutez la commande en plaçant la chaîne de connexion entre guillemets.

Secret Manager stocke le secret en dehors de l’arborescence de votre projet, ce qui permet d’empêcher le partage accidentel de secrets dans le code source. Secret Manager est utilisé uniquement pour tester l’application web localement. Lorsque l’application est déployée sur Azure comme App Service, utilisez les chaînes de connexion, les paramètres d’application ou les variables d’environnement pour stocker la chaîne de connexion. Sinon, pour éviter toutes les chaînes de connexion, vous pouvez vous connecter à App Configuration à l’aide d’identités managées ou de vos autres identités Microsoft Entra.
Ouvrez Program.cs et ajoutez Azure App Configuration en tant que source de configuration supplémentaire en appelant la méthode AddAzureAppConfiguration.
```
var builder = WebApplication.CreateBuilder(args);

// Retrieve the connection string
string connectionString = builder.Configuration.GetConnectionString("AppConfig");

// Load configuration from Azure App Configuration
builder.Configuration.AddAzureAppConfiguration(connectionString);

// The rest of existing code in program.cs
// ... ...
```
Ce code se connecte à votre magasin App Configuration à l’aide d’une chaîne de connexion et charge toutes les valeurs de clé qui n’ont aucune étiquette. Pour plus d’informations sur le fournisseur App Configuration, consultez les informations de 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.

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

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

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

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

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
```
Une fois la génération terminée, exécutez la commande suivante pour exécuter l’application web localement :
```
dotnet run
```
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.

La page Web ressemble à ce qui suit :

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.

Connectez-vous au portail Azure, puis sélectionnez Groupes de ressources.
Dans la zone Filtrer par nom, entrez le nom de votre groupe de ressources.
Dans la liste de résultats, sélectionnez le nom du groupe de ressources pour afficher une vue d’ensemble.
Sélectionnez Supprimer le groupe de ressources.
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