Tutoriel : Déployer une application ASP.NET sur Azure avec Azure SQL Database

Azure App Service offre un service d’hébergement web hautement évolutif appliquant des mises à jour correctives automatiques. Ce tutoriel montre comment déployer une application ASP.NET basée sur des données dans App Service et comment la connecter à Azure SQL Database. Quand vous avez terminé, vous disposez d’une application ASP.NET s’exécutant dans Azure et connectée à SQL Database.

Dans ce tutoriel, vous allez apprendre à :

• Créer une base de données dans Azure SQL Database.
• Connecter une application ASP.NET à SQL Database
• Déploiement de l’application dans Azure
• Mise à jour du modèle de données et redéploiement de l’application
• Diffuser des journaux d’activité à partir d’Azure vers votre terminal

Si vous n’avez pas d’abonnement Azure, créez un compte gratuit Azure avant de commencer.

Prérequis

Pour suivre ce tutoriel :

Installez Visual Studio 2022 avec les charges de travail Développement web et ASP.NET et Développement Azure.

Si vous avez déjà installé Visual Studio, ajoutez les charges de travail dans Visual Studio en cliquant sur Outils>Obtenir des outils et des fonctionnalités.

Télécharger l’exemple

1. Téléchargez l’exemple de projet.

2. Extrayez (décompressez) le fichier dotnet-sqldb-tutorial-master.zip.

Cet exemple de projet contient une simple application CRUD (Create-Read-Update-Delete) ASP.NET MVC basée sur Entity Framework Code First.

Exécuter l’application

1. Ouvrez le fichier dotnet-sqldb-tutorial-master/DotNetAppSqlDb.sln dans Visual Studio.

2. Entrez F5 pour exécuter l’application. L’application s’affiche dans votre navigateur par défaut.

   Notes

   Si vous avez seulement installé Visual Studio et les prérequis, vous devrez peut-être installer des packages manquants via NuGet.

3. Sélectionnez le lien Create New et créez quelques éléments to-do.

   

4. Testez les liens Edit, Details et Delete.

L’application utilise un contexte de base de données pour se connecter à la base de données. Dans cet exemple, le contexte de base de données utilise une chaîne de connexion appelée MyDbConnection. Cette chaîne de connexion est définie dans le fichier Web.config et référencée dans le fichier Models\MyDatabaseContext.cs. Utilisé plus loin dans ce tutoriel, le nom de chaîne de connexion permet de connecter l’application Azure à une base de données Azure SQL.

Publier l’application ASP.NET sur Azure

1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet DotNetAppSqlDb, puis sélectionnez Publier.

   

2. Sélectionnez Azure comme cible, puis cliquez sur Suivant.

3. Vérifiez que Azure App Service (Windows) est sélectionné et cliquez sur Suivant.

Se connecter et ajouter une application

1. Dans la boîte de dialogue Publier, cliquez sur Se connecter.

2. Connectez-vous à votre abonnement Azure. Si vous êtes déjà connecté à un compte Microsoft, assurez-vous que le compte conserve votre abonnement Azure. Si le compte Microsoft auquel vous êtes connecté ne comporte pas votre abonnement Azure, cliquez dessus pour ajouter le compte approprié.

3. Dans le volet Instances App Service, cliquez sur +.

   

Configurer le nom de l’application web

Vous pouvez conserver le nom de l’application web généré ou le remplacer par un autre nom unique (les caractères valides sont a-z, 0-9 et -). Le nom de l’application web est utilisé dans l’URL par défaut de votre application (<app_name>.azurewebsites.net, où <app_name> est le nom de votre application web). Le nom de l’application web doit être unique parmi toutes les applications dans Azure.

Notes

Ne sélectionnez pas encore Créer.

Créer un groupe de ressources

Un groupe de ressources est un conteneur logique dans lequel les ressources Azure, comme les applications web, les bases de données et les comptes de stockage, sont déployées et managées. Par exemple, vous pouvez choisir de supprimer le groupe de ressources complet ultérieurement en une seule étape.

1. À côté de Groupe de ressources, cliquez sur Nouveau.

   

2. Attribuez au groupe de ressources le nom myResourceGroup.

Créer un plan App Service

Un plan App Service spécifie l’emplacement, la taille et les fonctionnalités de la batterie de serveurs web qui héberge votre application. Vous pouvez économiser de l’argent quand vous hébergez plusieurs applications en configurant les applications web pour partager un plan App Service.

Les plans App Service définissent :

• Région (par exemple : Europe Nord, USA Est ou Asie Sud-Est)
• Taille d’instance (petit, moyen ou grand)
• Étendue de la mise à l’échelle (1 à 20 instances)
• Référence (SKU) (Gratuit, Partagé, De base, Standard ou Premium)

1. À côté de Plan d’hébergement, cliquez sur Nouveau.

2. Dans la boîte de dialogue Configurer le plan App Service, configurez le nouveau plan App Service avec les paramètres suivants, puis cliquez sur OK :

   Paramètre	Valeur suggérée	Informations supplémentaires
   Plan App Service	myAppServicePlan	Plans App Service
   Lieu	Europe Ouest	Régions Azure
   Taille	Gratuit	Niveaux de tarification

   

3. Cliquez sur Créer et attendez que les ressources Azure soient créées.

4. La boîte de dialogue Publier affiche les ressources que vous avez configurées. Cliquez sur Terminer.

   

Créer un serveur et une base de données

Avant de créer une base de données, vous avez besoin d’un serveur SQL logique. Un serveur SQL logique est une construction logique qui contient un groupe de bases de données gérées en tant que groupe.

1. Dans la boîte de dialogue Publier, faites défiler jusqu’à la section Dépendances du service. À côté de Base de données SQL Server, cliquez sur Configurer.

   Notes

   Veillez à configurer la base de données SQL dans la page Publier au lieu de la page Services connectés.

   

2. Sélectionnez Azure SQL Database, puis cliquez sur Suivant.

3. Dans la boîte de dialogue Configurer Azure SQL Database, cliquez sur +.

4. À côté de Serveur de base de données, cliquez sur Nouveau.

   Le nom du serveur est utilisé dans l’URL par défaut de votre serveur, <server_name>.database.windows.net. Il doit être unique parmi tous les serveurs dans Azure SQL. Remplacez le nom du serveur par une valeur de votre choix.

5. Ajoutez un nom d’utilisateur administrateur et un mot de passe. Pour plus d’informations sur la complexité requise des mots de passe, consultez Stratégie de mot de passe.

   Gardez en tête ce nom d'utilisateur et ce mot de passe. Vous en aurez besoin pour gérer le serveur ultérieurement.

   

   Important

   Même si votre mot de passe dans les chaînes de connexion est masqué (dans Visual Studio et également dans App Service), le fait qu’il soit conservé quelque part augmente la surface d’attaque de votre application. App Service peut utiliser des identités de service managées pour éliminer ce risque en supprimant toute nécessité de conserver les secrets dans votre configuration de code ou d’application. Pour plus d’informations, consultez Étapes suivantes.

6. Cliquez sur OK.

7. Dans la boîte de dialogue Azure SQL Database, conservez le Nom de la base de données généré par défaut. Sélectionnez Créer et attendez que la ressource de base de données soit créée.

   

Configurer la chaîne de connexion de base de données

1. Lorsque l’Assistant a terminé de créer les ressources de base de données, cliquez sur Suivant.

2. Dans Nom de la chaîne de connexion de base de données, tapez MyDbConnection. Ce nom doit correspondre à la chaîne de connexion référencée dans Models/MyDatabaseContext.cs.

3. Dans Nom d’utilisateur de connexion de base de données et Mot de passe de connexion de base de données, tapez le nom d’utilisateur et le mot de passe de l’administrateur que vous avez utilisés dans Créer un serveur.

4. Vérifiez que Paramètres d’application Azure est sélectionné et cliquez sur Terminer.

   Notes

   Si vous voyez Fichiers des secrets de l’utilisateur local à la place, vous avez dû configurer la base de données SQL dans la page Services connectés au lieu de le faire dans la page Publier.

   

5. Attendez la fin de l’Assistant Configuration, puis cliquez sur Fermer.

Déployer votre application ASP.NET

1. Sous l’onglet Publier, faites défiler la liste vers le haut et cliquez sur Publier. Une fois votre application ASP.NET déployée sur Azure. Votre navigateur par défaut démarre et se connecte à l’URL de l’application déployée.

2. Ajoutez quelques tâches.

   

   Félicitations ! Votre application ASP.NET orientée données s’exécute dans Azure App Service.

Accéder à la base de données localement

Visual Studio vous permet d’explorer et de gérer facilement votre nouvelle base de données dans Azure à l’aide de l’Explorateur d’objets SQL Server. La nouvelle base de données a déjà ouvert son pare-feu sur l’application App Service que vous avez créée. Cependant, pour y accéder depuis votre ordinateur local (par exemple, à partir de Visual Studio), vous devez ouvrir un pare-feu sur l’adresse IP publique de votre ordinateur local. Si votre fournisseur de services Internet change votre adresse IP publique, vous devez reconfigurer le pare-feu pour accéder à nouveau à la base de données Azure.

Créer une connexion à la base de données

1. Dans le menu Vue, sélectionnez Explorateur d’objets SQL Server.

2. En haut de l’Explorateur d’objets SQL Server, cliquez sur le bouton Ajouter SQL Server.

Configurer la connexion à la base de données

1. Dans la boîte de dialogue Se connecter, développez le nœud Azure. Toutes vos instances SQL Database dans Azure sont répertoriées ici.

2. Sélectionnez la base de données que vous avez créée. La connexion que vous avez créée apparaît automatiquement en bas de la page.

3. Entrez le mot de passe de l’administrateur de base de données que vous avez créé, puis cliquez sur Se connecter.

   

Autoriser une connexion client à partir de votre ordinateur

La boîte de dialogue Créer une nouvelle règle de pare-feu s’ouvre. Par défaut, un serveur autorise les connexions à ses bases de données uniquement à partir de services Azure, comme votre application Azure. Pour vous connecter à votre base de données en dehors d’Azure, créez une règle de pare-feu au niveau du serveur. Cette règle de pare-feu autorise l’adresse IP publique de votre ordinateur local.

La boîte de dialogue contient déjà l’adresse IP de votre ordinateur.

1. Assurez-vous que la case Ajouter mon adresse IP cliente est cochée, puis cliquez sur OK.

   

   Lorsque Visual Studio a créé le paramètre de pare-feu pour votre instance SQL Database, votre connexion s’affiche dans l’Explorateur d’objets SQL Server.

   Ici, vous pouvez effectuer les opérations de base de données les plus courantes, par exemple exécuter des requêtes, créer des vues et des procédures stockées, etc.

2. Développez votre connexion >Bases de données><votre base de données>>Tables. Cliquez avec le bouton droit sur la table Todoes, puis sélectionnez Afficher les données.

   

Mettre à jour l’application avec les Code First Migrations

Vous pouvez utiliser les outils que vous connaissez dans Visual Studio pour mettre à jour votre base de données et votre application dans Azure. Dans cette étape, vous allez utiliser des Code First Migrations dans Entity Framework pour apporter une modification à votre schéma de base de données et la publier sur Azure.

Pour plus d’informations sur l’utilisation de Migrations Entity Framework Code First, consultez Getting Started with Entity Framework 6 Code First using MVC 5 (Mise en route avec Entity Framework 6 Code First à l’aide de MVC 5).

Mettre à jour votre modèle de données

Ouvrez Models\Todo.cs dans l’éditeur de code. Ajoutez la propriété suivante à la classe ToDo :

public bool Done { get; set; }

Exécuter la fonction Code First Migrations en local

Exécutez quelques commandes pour mettre à jour votre base de données locale.

1. Dans le menu Outils, cliquez sur Gestionnaire de package NuGet>Console du Gestionnaire de package.

2. Dans la fenêtre de Console du Gestionnaire de package, activez les Migrations Code First :

   Enable-Migrations
   

3. Ajoutez une migration :

   Add-Migration AddProperty
   

4. Mettez à jour la base de données locale :

   Update-Database
   

5. Entrez Ctrl+F5 pour exécuter l’application. Testez les liens de modification, de détails et de création.

Si l’application se charge sans erreur, cela signifie que la fonction Code First Migrations a réussi. Votre page garde cependant le même aspect car votre logique d’application n’utilise pas encore cette nouvelle propriété.

Utiliser la nouvelle propriété

Apportez quelques modifications à votre code pour utiliser la propriété Done. Pour plus de simplicité dans ce didacticiel, vous allez uniquement modifier les vues Index et Create pour voir la propriété en action.

1. Ouvrez Controllers\TodosController.cs.

2. Recherchez la méthode Create() à la ligne 52 et ajoutez Done à la liste des propriétés dans l’attribut Bind. Lorsque vous avez terminé, la signature de votre méthode Create() doit ressembler à ceci :

   public ActionResult Create([Bind(Include = "Description,CreatedDate,Done")] Todo todo)
   

3. Ouvrez Views\Todos\Create.cshtml.

4. Dans le code Razor, vous devriez voir un élément <div class="form-group"> qui utilise model.Description et un autre élément <div class="form-group"> qui utilise model.CreatedDate. Juste après ces deux éléments, ajoutez un autre élément <div class="form-group"> qui utilise model.Done :

   <div class="form-group">
       @Html.LabelFor(model => model.Done, htmlAttributes: new { @class = "control-label col-md-2" })
       <div class="col-md-10">
           <div class="checkbox">
               @Html.EditorFor(model => model.Done)
               @Html.ValidationMessageFor(model => model.Done, "", new { @class = "text-danger" })
           </div>
       </div>
   </div>
   

5. Ouvrez Views\Todos\Index.cshtml.

6. Recherchez l’élément <th></th> vide. Juste au-dessus de cet élément, ajoutez le code Razor suivant :

   <th>
       @Html.DisplayNameFor(model => model.Done)
   </th>
   

7. Recherchez l’élément <td> contenant les méthodes d’assistance Html.ActionLink(). Au-dessus de ce <td>, ajoutez un autre élément <td> avec le code Razor suivant :

   <td>
       @Html.DisplayFor(modelItem => item.Done)
   </td>
   

   Voilà tout ce que vous avez à faire pour voir les modifications dans les vues Index et Create.

8. Entrez Ctrl+F5 pour exécuter l’application.

Vous pouvez maintenant ajouter un élément de tâche et cocher Terminé. Cette tâche devrait ensuite apparaître dans votre page d’accueil comme un élément terminé. N’oubliez pas que la vue Edit n’affiche pas le champ Done, car vous n’avez pas modifié la vue Edit.

Activer Code First Migrations dans Azure

Maintenant que votre modification de code fonctionne, y compris la migration de la base de données, vous allez la publier dans votre application Azure et mettre également à jour votre instance SQL Database avec les Migrations Code First.

1. Comme précédemment, cliquez avec le bouton droit sur votre projet et sélectionnez Publier.

2. Cliquez sur Autres actions>Modifier pour ouvrir les paramètres de publication.

   

3. Dans la liste déroulante MyDatabaseContext, sélectionnez la connexion de base de données pour votre base de données Azure SQL.

4. Sélectionnez Exécuter les migrations Code First (s’exécute au démarrage de l’application) , puis cliquez sur Enregistrer.

   

Publier vos modifications

Maintenant que vous avez activé les Migrations Code First dans votre application Azure, publiez vos modifications du code.

1. Dans la page de publication, cliquez sur Publier.

2. Essayez d’ajouter à nouveau des tâches et de sélectionner Terminé : elles doivent apparaître dans votre page d’accueil comme éléments terminés.

   

Toutes les tâches existantes sont toujours affichées. Lorsque vous republiez votre application ASP.NET, les données existantes dans votre instance SQL Database ne sont pas perdues. En outre, Code First Migrations modifie uniquement le schéma de données, sans toucher à vos données existantes.

Diffuser les journaux d’activité d’applications

Vous pouvez diffuser des messages de suivi directement entre votre application Azure et Visual Studio.

Ouvrez Controllers\TodosController.cs.

Chaque action commence par une méthode Trace.WriteLine(). Ce code est ajouté pour vous montrer comment ajouter des messages de suivi à votre application Azure.

Activer la diffusion de journaux

1. Faites défiler la page de publication jusqu’à la section Hébergement.

2. Dans le coin à droite, cliquez sur ...>Afficher les journaux d’activité de diffusion en continu.

   

   Les journaux d’activité sont maintenant transmis à la fenêtre Sortie.

   

   Vous ne pourrez cependant pas visualiser les messages de suivi à ce stade. La raison est simple : quand vous sélectionnez Afficher les journaux d’activité de streaming, votre application Azure définit le niveau de suivi sur Error, ce qui enregistre uniquement les événements d’erreur (avec la méthode Trace.TraceError()).

Modifier les niveaux de suivi

1. Pour changer les niveaux de suivi (trace) afin de générer d’autres messages de trace, revenez à la page de publication.

2. Dans la section Hébergement, cliquez sur ...>Ouvrir dans le portail Azure.

3. Dans la page de gestion de votre application du portail, dans le menu de gauche, sélectionnez Journaux App Service.

4. Sous Journal des applications (système de fichiers) , sélectionnez Commentaires dans Niveau. Cliquez sur Enregistrer.

   Conseil

   Vous pouvez expérimenter différents niveaux de suivi pour connaître les types de messages qui s’affichent pour chaque niveau. Par exemple, le niveau Informations inclut tous les journaux d’activité créés par Trace.TraceInformation(), Trace.TraceWarning(), et Trace.TraceError(), mais pas les journaux d’activité créés par Trace.WriteLine().

5. Dans votre navigateur, accédez à nouveau à votre application sur http://<nom de votre application>.azurewebsites.net, puis essayez de cliquer autour de l’application de la liste des tâches dans Azure. Les messages de suivi sont maintenant diffusés vers la fenêtre Sortie dans Visual Studio.

   Application: 2017-04-06T23:30:41  PID[8132] Verbose     GET /Todos/Index
   Application: 2017-04-06T23:30:43  PID[8132] Verbose     GET /Todos/Create
   Application: 2017-04-06T23:30:53  PID[8132] Verbose     POST /Todos/Create
   Application: 2017-04-06T23:30:54  PID[8132] Verbose     GET /Todos/Index
   

Arrêter la diffusion de journaux

Pour arrêter le service de diffusion de journaux, cliquez sur le bouton Arrêter l’analyse situé dans la fenêtre Sortie.

Nettoyer les ressources

Au cours des étapes précédentes, vous avez créé des ressources Azure au sein d’un groupe de ressources. Si vous ne pensez pas avoir besoin de ces ressources à l’avenir, vous pouvez les supprimer en supprimant le groupe de ressources.

1. Sur la page Vue d’ensemble de votre application web dans le Portail Azure, sélectionnez le lien myResourceGroup sous Groupe de ressources.
2. Sur la page du groupe de ressources, assurez-vous que les ressources répertoriées sont bien celles que vous souhaitez supprimer.
3. Sélectionnez Supprimer le groupe de ressources, tapez myResourceGroup dans la zone de texte, puis sélectionnez Supprimer.
4. Confirmez à nouveau en sélectionnant Supprimer.

Étapes suivantes

Dans ce didacticiel, vous avez appris à :

• Créer une base de données dans Azure SQL Database.
• Connecter une application ASP.NET à SQL Database
• Déploiement de l’application dans Azure
• Mise à jour du modèle de données et redéploiement de l’application
• Diffuser des journaux d’activité à partir d’Azure vers votre terminal

Passez au tutoriel suivant pour apprendre à améliorer facilement la sécurité de votre connexion à la base de données Azure SQL.

Tutoriel : Se connecter à SQL Database à partir d’App Service sans secrets à l’aide d’une identité managée

Autres ressources :

Configurer une application ASP.NET

Vous souhaitez optimiser et réduire vos coûts de cloud ?

Démarrer l’analyse des coûts avec Cost Management