déploiement web ASP.NET à l’aide de Visual Studio : déploiement d’une mise à jour de code

Article
07/13/2023

Cette série de tutoriels vous montre comment déployer (publier) une application web ASP.NET sur Azure App Service Web Apps ou sur un fournisseur d’hébergement tiers, à l’aide de Visual Studio 2012 ou Visual Studio 2010. Pour plus d’informations sur la série, consultez le premier tutoriel de la série.

Vue d’ensemble

Après le déploiement initial, votre travail de maintenance et de développement de votre site web se poursuit, et vous souhaiterez rapidement déployer une mise à jour. Ce tutoriel vous guide tout au long du processus de déploiement d’une mise à jour dans votre code d’application. La mise à jour que vous implémentez et déployez dans ce didacticiel n’implique pas de modification de base de données ; Vous verrez les différences dans le déploiement d’une modification de base de données dans le tutoriel suivant.

Rappel : si vous obtenez un message d’erreur ou si quelque chose ne fonctionne pas pendant le didacticiel, veillez à case activée la page de résolution des problèmes.

Modifier le code

En guise d’exemple simple de mise à jour de votre application, vous allez ajouter à la page Instructeurs une liste des cours enseignés par l’instructeur sélectionné.

Si vous exécutez la page Instructeurs , vous remarquerez qu’il existe des liens Sélectionner dans la grille, mais qu’ils ne font rien d’autre que de rendre l’arrière-plan de ligne grisé.

Page Instructeurs avec sélection

Vous allez maintenant ajouter du code qui s’exécute lorsque vous cliquez sur le lien Sélectionner et affiche une liste des cours enseignés par l’instructeur sélectionné.

Dans Instructors.aspx, ajoutez le balisage suivant immédiatement après le contrôle ErrorMessageLabelLabel :

<h3>Courses Taught</h3>
<asp:ObjectDataSource ID="CoursesObjectDataSource" runat="server" TypeName="ContosoUniversity.BLL.SchoolBL"
    DataObjectTypeName="ContosoUniversity.DAL.Course" SelectMethod="GetCoursesByInstructor">
    <SelectParameters>
        <asp:ControlParameter ControlID="InstructorsGridView" Name="PersonID" PropertyName="SelectedDataKey.Value"
            Type="Int32" />
    </SelectParameters>
</asp:ObjectDataSource>
<asp:GridView ID="CoursesGridView" runat="server" DataSourceID="CoursesObjectDataSource"
    AllowSorting="True" AutoGenerateColumns="False" SelectedRowStyle-BackColor="LightGray"
    DataKeyNames="CourseID">
    <EmptyDataTemplate>
        <p>No courses found.</p>
    </EmptyDataTemplate>
    <Columns>
        <asp:BoundField DataField="CourseID" HeaderText="ID" ReadOnly="True" SortExpression="CourseID" />
        <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
        <asp:TemplateField HeaderText="Department" SortExpression="DepartmentID">
            <ItemTemplate>
                <asp:Label ID="GridViewDepartmentLabel" runat="server" Text='<%# Eval("Department.Name") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Exécutez la page et sélectionnez un instructeur. Vous voyez une liste des cours enseignés par cet instructeur.
Fermez le navigateur.

Déployer la mise à jour du code dans l’environnement de test

Avant de pouvoir utiliser vos profils de publication pour le déploiement en test, en préproduction et en production, vous devez modifier les options de publication de base de données. Vous n’avez plus besoin d’exécuter les scripts d’octroi et de déploiement de données pour la base de données d’appartenance.

Ouvrez l’Assistant Publication web en cliquant avec le bouton droit sur le projet ContosoUniversity et en cliquant sur Publier.
Cliquez sur Profil de test dans la liste déroulante Profil .
Cliquez sur l'onglet Paramètres .
Sous DefaultConnection dans la section Bases de données, désactivez la zone Mettre à jour la base de données case activée.
Cliquez sur l’onglet Profil , puis sur le profil intermédiaire dans la liste déroulante Profil .
Quand vous êtes invité à enregistrer les modifications apportées au profil de test , cliquez sur Oui.
Apportez la même modification dans le profil intermédiaire.
Répétez le processus pour apporter la même modification dans le profil de production.
Fermez l’Assistant Publier le web .

Le déploiement dans l’environnement de test consiste désormais à exécuter à nouveau la publication en un clic. Pour accélérer ce processus, vous pouvez utiliser la barre d’outils Publier en un clic .

Dans le menu Affichage , choisissez Barres d’outils , puis sélectionnez Web One Click Publish.
Dans Explorateur de solutions, sélectionnez le projet ContosoUniversity.
La barre d’outils Publier en un clic sur le web, choisissez le profil de publication de test, puis cliquez sur Publier le site web (l’icône avec des flèches pointant vers la gauche et la droite).
Visual Studio déploie l’application mise à jour et le navigateur s’ouvre automatiquement sur la page d’accueil.
Exécutez la page Instructeurs et sélectionnez un instructeur pour vérifier que la mise à jour a bien été déployée.

Normalement, vous effectuez également des tests de régression (c’est-à-dire, testez le reste du site pour vous assurer que la nouvelle modification n’a pas rompu les fonctionnalités existantes). Toutefois, pour ce tutoriel, vous allez ignorer cette étape et procéder au déploiement de la mise à jour vers la préproduction et la production.

Lorsque vous redéployez, Web Deploy détermine automatiquement les fichiers qui ont changé et copie uniquement les fichiers modifiés sur le serveur. Par défaut, Web Deploy utilise des dates de dernière modification sur les fichiers pour déterminer ceux qui ont changé. Certains systèmes de contrôle de code source modifient les dates des fichiers même lorsque vous ne modifiez pas le contenu du fichier. Dans ce cas, vous souhaiterez peut-être configurer Web Deploy pour utiliser des sommes de contrôle de fichiers afin de déterminer les fichiers qui ont changé. Pour plus d’informations, consultez Pourquoi tous mes fichiers sont redéployés alors que je ne les ai pas modifiés ? dans la FAQ sur le déploiement ASP.NET.

Jeter l’application hors connexion pendant le déploiement

La modification que vous déployez maintenant est une modification simple à une seule page. Mais parfois, vous déployez des modifications plus importantes, ou vous déployez des modifications de code et de base de données, et le site peut se comporter incorrectement si un utilisateur demande une page avant la fin du déploiement. Pour empêcher les utilisateurs d’accéder au site pendant le déploiement en cours, vous pouvez utiliser un fichier app_offline.htm . Lorsque vous placez un fichier nommé app_offline.htm dans le dossier racine de votre application, IIS affiche automatiquement ce fichier au lieu d’exécuter votre application. Par conséquent, pour empêcher l’accès pendant le déploiement, vous placez app_offline.htm dans le dossier racine, exécutez le processus de déploiement, puis supprimezapp_offline.htm une fois le déploiement réussi.

Vous pouvez configurer Web Deploy pour placer automatiquement un fichier deapp_offline.htm par défaut sur le serveur lorsqu’il démarre le déploiement et le supprimer à la fin de son déploiement. Pour ce faire, il vous suffit d’ajouter l’élément XML suivant à votre fichier de profil de publication (.pubxml) :

<EnableMSDeployAppOffline>true</EnableMSDeployAppOffline>

Pour ce tutoriel, vous allez voir comment créer et utiliser un fichier deapp_offline.htm personnalisé.

L’utilisation deapp_offline.htm dans le site de préproduction n’est pas nécessaire, car vous n’avez pas d’utilisateurs qui accèdent au site intermédiaire. Toutefois, il est recommandé d’utiliser la préproduction pour tester tout ce que vous envisagez de déployer en production.

Créer app_offline.htm

Dans Explorateur de solutions, cliquez avec le bouton droit sur la solution, cliquez sur Ajouter, puis cliquez sur Nouvel élément.
Créez une page HTML nommée app_offline.htm (supprimez le « l » final dans l’extension .html que Visual Studio crée par défaut).

Remplacez le balisage de modèle par le balisage suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Contoso University - Under Construction</title>
</head>
<body>
  <h1>Contoso University</h1>
  <h2>Under Construction</h2>
  <p>The Contoso University site is temporarily unavailable while we upgrade it. Please try again later.</p>
</body>
</html>

Enregistrez et fermez le fichier.

Copier app_offline.htm dans le dossier racine du site web

Vous pouvez utiliser n’importe quel outil FTP pour copier des fichiers sur le site web. FileZilla est un outil FTP populaire qui s’affiche dans les captures d’écran.

Pour utiliser un outil FTP, vous avez besoin de trois éléments : l’URL FTP, le nom d’utilisateur et le mot de passe.

L’URL est affichée sur la page du tableau de bord du site web dans le portail de gestion Azure, et le nom d’utilisateur et le mot de passe pour FTP se trouvent dans le fichier .publishsettings que vous avez téléchargé précédemment. Les étapes suivantes montrent comment obtenir ces valeurs.

Dans le portail de gestion Azure, cliquez sur l’onglet Sites web , puis sur le site web intermédiaire.
Dans la page Tableau de bord , faites défiler vers le bas pour trouver le nom d’hôte FTP dans la section Aperçu rapide .
Ouvrez le fichier .publishsettings intermédiaire dans le Bloc-notes ou un autre éditeur de texte.
Recherchez l’élément publishProfile pour le profil FTP.
Copiez les userName valeurs et userPWD .
Ouvrez votre outil FTP et connectez-vous à l’URL FTP.
Copiez app_offline.htm du dossier solution vers le dossier /site/wwwroot dans le site intermédiaire.
Accédez à l’URL de votre site intermédiaire. Vous voyez que la page app_offline.htm s’affiche maintenant à la place de votre page d’accueil.

Vous êtes maintenant prêt à déployer en préproduction.

Déployer la mise à jour du code sur la préproduction et la production

Dans la barre d’outils Publier web one click , choisissez le profil de publication intermédiaire , puis cliquez sur Publier le site web.

Visual Studio déploie l’application mise à jour et ouvre le navigateur sur la page d’accueil du site. Le fichier app_offline.htm s’affiche. Avant de pouvoir tester pour vérifier la réussite du déploiement, vous devez supprimer le fichier app_offline.htm .
Revenez à votre outil FTP et supprimez app_offline.htm du site intermédiaire.
Dans le navigateur, ouvrez la page Instructeurs dans le site de préproduction, puis sélectionnez un instructeur pour vérifier que la mise à jour a bien été déployée.
Suivez la même procédure pour la production que pour la préproduction.

Examen des modifications et déploiement de fichiers spécifiques

Visual Studio 2012 vous permet également de déployer des fichiers individuels. Pour un fichier sélectionné, vous pouvez afficher les différences entre la version locale et la version déployée, déployer le fichier dans l’environnement de destination ou copier le fichier de l’environnement de destination vers le projet local. Dans cette section du tutoriel, vous voyez comment utiliser ces fonctionnalités.

Apporter une modification au déploiement

Ouvrez Content/Site.css et recherchez le bloc de la body balise.

Remplacez la valeur de background-color par darkblue#fff .

body {
    background-color: darkblue;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

Afficher la modification dans la fenêtre Publier l’aperçu

Lorsque vous utilisez l’Assistant Publication web pour publier le projet, vous pouvez voir les modifications qui vont être publiées en double-cliquant sur le fichier dans la fenêtre Aperçu .

Cliquez avec le bouton droit sur le projet ContosoUniversity, puis cliquez sur Publier.
Dans la liste déroulante Profil , sélectionnez Le profil de publication de test .
Cliquez sur Aperçu, puis sur Démarrer l’aperçu.
Dans le volet Aperçu , double-cliquez sur Site.css.

La boîte de dialogue Aperçu des modifications affiche un aperçu des modifications qui seront déployées.

Si vous double-cliquez sur le fichier Web.config , la boîte de dialogue Aperçu des modifications affiche l’effet de vos transformations de configuration de build et de vos transformations de profil de publication. À ce stade, vous n’avez rien fait qui entraînerait la modification du fichier Web.config sur le serveur. Vous vous attendez donc à ne voir aucune modification. Toutefois, la fenêtre Modifications d’aperçu affiche incorrectement deux modifications. Il semble que deux éléments XML soient supprimés. Ces éléments sont ajoutés par le processus de publication lorsque vous sélectionnez Exécuter Migrations Code First au démarrage de l’application pour une classe de contexte Code First. La comparaison est effectuée avant que le processus de publication ajoute ces éléments. Il semble donc qu’ils soient supprimés, bien qu’ils ne soient pas supprimés. Cette erreur sera corrigée dans une version ultérieure.
Cliquez sur Fermer.
Cliquez sur Publier.
Lorsque le navigateur s’ouvre sur la page d’accueil du site de test, appuyez sur Ctrl+F5 pour provoquer une actualisation matérielle afin de voir l’effet de la modification css.
Fermez le navigateur.

Publier des fichiers spécifiques à partir de Explorateur de solutions

Supposons que vous n’aimez pas l’arrière-plan bleu et que vous souhaitez revenir à la couleur d’origine. Dans cette section, vous allez restaurer les paramètres d’origine en publiant un fichier spécifique directement à partir de Explorateur de solutions.

Ouvrez Content/Site.css et restaurez le background-color paramètre sur #fff.
Dans Explorateur de solutions, cliquez avec le bouton droit sur le fichier Content/Site.css.

Le menu contextuel affiche trois options de publication.
Cliquez sur Aperçu des modifications apportées à Site.css.

Une fenêtre s’ouvre pour afficher les différences entre le fichier local et sa version dans l’environnement de destination.
Dans Explorateur de solutions, cliquez de nouveau avec le bouton droit sur Site.css, puis cliquez sur Publier le site.css.

La fenêtre Activité de publication web indique que le fichier a été publié.
Ouvrez l’URL http://localhost/contosouniversity dans un navigateur, puis appuyez sur Ctrl+F5 pour provoquer une actualisation matérielle afin de voir l’effet de la modification css.
Fermez le navigateur.

Résumé

Vous avez maintenant vu plusieurs façons de déployer une mise à jour d’application qui n’implique pas de modification de base de données, et vous avez vu comment afficher un aperçu des modifications pour vérifier que ce qui sera mis à jour correspond à ce que vous attendez. La page Instructeurs comporte désormais une section Cours enseignés .

Capture d’écran montrant la page Instructeurs et les cours enseignés par un instructeur spécifique.

Le tutoriel suivant vous montre comment déployer une modification de base de données : vous allez ajouter un champ de date de naissance à la base de données et à la page Instructeurs.

Précédent Suivant