Fermer

mars 20, 2025

Création de frontend pour le service Web – ASP.NET

Création de frontend pour le service Web – ASP.NET


Une application de cloud-native a besoin d’un frontend pour que vos utilisateurs puissent travailler. Voici comment configurer un service d’application Azure, puis créer et déployer un frontage côté serveur ASP.NET Core vers ce service APP à l’aide du code Visual Studio.

Dans les articles précédents, j’ai créé un service Web (partie 5) qui accédaient en toute sécurité une base de données SQL Azure. La prochaine étape évidente consiste à créer un frontend pour ce service Web, puis à sécuriser l’accès entre ce frontend et le service Web.

Dans cet article, je vais couvrir la création d’un frontend côté serveur dans ASP.NET Core dans Visual Studio Code et le déployer sur un service Azure App (il y a un article compagnon sur celui-ci qui fait de même pour un client Frontend JavaScript / TypeScript Using React (partie 7a). Dans un article de suivi, je limiterai le service Web pour ne parler qu’à ce frontage autorisé.

Création de l’application

Si vous êtes intéressé par ce post, je vais supposer que vous avez téléchargé les deux .Net 8 et Code Visual Studio.

Pour initialiser un projet de pages de rasoir et l’ouvrir dans Visual Studio:

  1. Ouvrez une invite de commande Windows.
  2. Surfez au dossier dans lequel vous souhaitez créer votre projet.
  3. Entrez cette commande, en remplaçant <name of your frontend app> Avec le nom que vous souhaitez donner votre application Frontend (j’ai utilisé WarehouseManagementFrontend):
dotnet new razor -o <name of your project> -f net8.0
  1. Une fois votre application créée, entrez le dossier tenant votre projet et démarrez Visual Studio Code:
cd <name of your project>
code .
  1. Revenez à la fenêtre de l’invite de commande, fermez-le et revenez au code Visual Studio.

Visual Studio Code vous incitera probablement à installer les extensions des extensions de kit C # et C # (en supposant que vous ne les avez pas déjà installés). Si c’est le cas, laissez le code Visual Studio les installer.

Si vous n’avez pas ces extensions installées et que vous n’êtes pas invité, vous devrez les installer. Pour ce faire:

  1. Dans Visual Studio Code, cliquez sur le Extensions L’icône du panneau d’extrême gauche (c’est l’icône du carré divisé en quatre parties avec une partie qui sort) pour ouvrir le panneau d’extensions.
  2. Dans la boîte de recherche en haut du panneau, recherchez C # et installez le kit C # Dev et les extensions C #.

Coder votre frontend

Votre prochaine étape consiste à rédiger le code pour accéder à votre service Web. Dans Visual Studio Code, dans le volet Explorer à gauche, élargissez le Pages nœud et double-cliquez sur le Index.cshtml.cs fichier pour l’ouvrir. Dans ce fichier:

  1. Au bas du fichier, avant la fermeture du fichier bouclé ( } ), ajouter ce code (remplacer les noms et types de propriétés par ceux appropriés à l’objet renvoyé par votre service Web):
public class Product
    {
        public int productId {get; set;}
        public string name {get; set;}
        public decimal listPrice {get; set;}
    }
  1. En haut du fichier, en dessous de la ligne commençant private readonly ILogger<IndexModel> …Ajoutez cette ligne:
 public List<Product> Products = new();
  1. Supprimer l’existant OnGet Méthode et le remplacer par ce code:
public async Task OnGetAsync()
    {
            HttpClient hc = new();
            HttpResponseMessage resp = await hc.GetAsync(<URL for your Web Service>);
            if (resp.IsSuccessStatusCode)
            {
                Products = await resp.Content.ReadFromJsonAsync<List<Product>>();
            }
        }
   }
  1. Enregistrez vos modifications.
  2. Dans Visual Studio Code’s Explorer Pane, double-cliquez sur le Index.cshtml Fichier pour l’ouvrir (c’est juste au-dessus du fichier index.cshtml.cs que vous venez d’ouvrir).
  3. Supprimer le <div> élément et tout à l’intérieur. Remplacez-le par ce code (modifiant les noms de propriété sur le prd variable avec vos propres noms de propriété):
@{ foreach (var prd in Model.Products)
      {
        <p>
           Product Id: @prd.productId <br/>
           Product Name: @prd.name <br/>
           Product Price: @prd.listPrice <br/>
       </p>
     }
}
  1. Enregistrez vos modifications.

Vous devez maintenant créer votre application. Enregistrez votre code (sauf si vous avez automatiquement sauvegardé le code Visual Studio, auquel cas, votre code est déjà enregistré). De Visual Studio Code Terminal menu, sélectionner Nouveau terminal Pour ouvrir un volet Terminal sous votre volet de code. Dans le volet terminal nouvellement ouvert, Type build dotnet Pour vérifier que vous n’avez aucune erreur de codage.

Après avoir nettoyé toutes les erreurs de codage (et enregistré votre fichier après avoir apporté ces modifications), vous êtes prêt à déployer votre application.

Déploiement de votre service d’application

La première étape du déploiement de votre application sur Azure est de créer un service d’application. Vous pouvez le faire à partir du code Visual Studio, mais je pense que l’utilisation de l’interface utilisateur d’Azure Portal aide à comprendre ce qui se passe. Alors ce qui suit est une version coupée des étapes de mon article précédent sur Création d’un service d’applications (partie 3) qui utilise le portail Azure.

Création du service d’application

Après avoir surfer sur la page des services d’application dans le portail Azure, cliquez sur le + Créer À l’extrémité gauche du menu en haut de la page et sélectionnez Application Web Pour démarrer le Créer une application Web magicien.

Comme pour toute ressource Azure, vous devrez attribuer votre service d’application à un groupe de ressources et lui donner un nom (le nom du service d’application est roulé dans une URL afin que vous ne puissiez pas utiliser les espaces, bien que cette page vous permettra d’utiliser des lettres supérieures).

Par défaut, l’assistant contactera automatiquement une chaîne aléatoire à la fin du nom afin que l’URL résultante soit unique, mais vous pouvez désactiver cela en utilisant le commutateur à bascule juste en dessous du nom de votre service d’application (j’ai appelé mon service WarehouseMgmtFrontEndpar exemple, qui s’est avéré unique).

Pour prendre en charge mon frontend, je définis le bouton Radio Code / Container sur Code (Consultez cet article précédent pour une discussion sur la sélection du choix du conteneur). Choisir l’option de code Affiche le Pile d’exécution La liste déroulante qui vous permet de choisir la prise en charge de votre application sera chargée dans le service d’application. J’ai choisi ASP.NET Core 8 Parce qu’il correspondait à la version d’Asp.net que j’utilisais. Pour le système d’exploitation, j’ai choisi Fenêtre Parce que c’était la plate-forme sur laquelle je développais (et me permet également d’utiliser un débogage à distance).

J’ai défini la région sur la même région que la base de données Azure SQL que j’ai créée dans mon post précédent, Codage Azure 2: Configuration d’une base de données Azure SQLpour éviter toute charge croisée (c’est Canada Centraldans mon cas).

Les choix qui vous permettent de définir la puissance de traitement que vous obtiendrez (et, par conséquent, combien vous paierez). Sous Plan de prixJ’ai cliqué sur Créer un nouveau Et, dans la boîte de dialogue qui en résulte, a donné un nom à mon plan.

Lorsque vous reviendrez de l’attribution de nom de votre plan, vous aurez une liste déroulante des plans disponibles. Pour cette application d’étude de cas, j’ai sélectionné le F1 gratuit Plan qui me donne 60 minutes de traitement par jour pour jouer avec. Dans la vraie vie, vous aurez probablement besoin de plus de puissance de traitement que cela.

Sur l’onglet Sécurité + sécurisé, j’ai handicapé Aperçu de l’application Parce que je ne voulais pas payer pour ça.

Avec ces modifications apportées, j’ai cliqué sur le Examen + créer bouton puis le Créer bouton pour créer mon service d’applications.

Déploiement à partir du code Visual Studio

De retour dans Visual Studio Code, vous devez ajouter des extensions pour prendre en charge le déploiement de votre application à un service Azure App.

Pour ajouter ces extensions, dans Visual Studio Code, cliquez sur le Extensions icône à nouveau. Dans la zone de recherche en haut du panneau, recherchez le Service d’application Azure extension et installez-le. (Cela devrait également installer l’extension Azure Ressources, mais vous voudrez peut-être la rechercher dans le volet Extensions et confirmer qu’elle est installée). Une nouvelle icône Azure sera ajoutée au panneau sur le côté gauche de Visual Studio.

Vous êtes maintenant prêt à déployer votre application:

  1. Dans la fenêtre du terminal de Visual Studio Code, créez un package de publication avec Dotnet Publish.
  2. Cliquez sur la nouvelle icône Azure dans le panneau à gauche pour obtenir une liste de tous vos abonnements (il peut être demandé de vous connecter à Azure).
  3. Cliquez sur l’abonnement que vous avez utilisé lors de la création de votre service d’application pour afficher une liste de ressources Azure attribuées à cet abonnement auquel vous avez accès.
  4. Cliquer sur Services d’application Dans cette liste des ressources Azure pour afficher une liste des services d’applications auxquels vous avez accès.
  5. Cliquez avec le bouton droit sur le service d’application que vous avez créé pour maintenir votre frontend et sélectionner Déployer sur l’application Web.
  6. Une zone de texte avec un Parcourir L’option s’ouvrira dans le centre supérieur de votre fenêtre de code Visual Studio. Cliquez sur le Parcourir Option pour afficher les dossiers de votre projet.
  7. Fermer à travers le bac dossier pour sélectionner le publier dossier (le dossier bin / publication a été ajouté à votre projet par la commande dotnet publish) et cliquez sur le Sélectionner bouton.
  8. Lorsqu’on vous a demandé si vous êtes sûr, cliquez Déployer.

Pendant que votre déploiement est un traitement, il vous sera demandé si vous souhaitez toujours déployer votre projet sur ce service d’application. Choisissez l’option «oui».

Si votre déploiement réussit, vous obtiendrez un bouton qui vous permettra de Internet de parcourir. Cliquez sur ce bouton pour essayer de visualiser votre application (vous pouvez également cliquer avec le bouton droit sur votre service d’application dans le panneau Azure à gauche et sélectionner Internet de parcourir).

Votre navigateur doit afficher les informations renvoyées de votre service Web. Si ce n’est pas le cas, ne paniquez pas! Il est tout à fait possible que votre base de données n’ait pas répondu à temps car elle était en mode inactif. Essayez quelques rafraîchissements sur quelques minutes avant le débogage.

Après la première manche

Si vous avez choisi l’option «Je veux toujours déployer» lors de votre premier déploiement, alors, lorsque l’icône Azure sélectionnée dans le menu à l’extrême gauche du code Visual Studio, vous verrez une barre d’espace de travail affiché dans le volet Azure. Si vous survolez votre souris sur cette barre, vous verrez une icône de service d’application affichée à l’extrémité droite de la barre. En cliquant sur cette icône, vous réexécutera votre déploiement afin que vous n’ayez pas à trouver votre service d’application dans le volet Azure (vous devrez toujours cliquer sur «déploier» dans la boîte de dialogue «êtes-vous sûr», cependant).

Et comme vous vous déployez à partir du dossier bac / publication de votre application, vous devez vous rappeler de faire une version avant de déployer pour obtenir la dernière version de votre code.

Compte tenu de toutes ces étapes, il convient de noter que vous ne avoir pour déployer sur Azure afin de tester votre application, en utilisant le Dotnet Run Commande dans la fenêtre du terminal du code Visual Studio (ou en appuyant sur F5 dans Visual Studio) vous permettra d’exécuter votre application sur votre ordinateur local.

Se préparer pour l’avenir

Tant que nous travaillons sur notre frontend, nous devrions passer un peu de temps à réfléchir à la maintenabilité.

Notre frontend passera des transactions commerciales à un système plus complexe comprenant probablement plusieurs étapes et / ou microservices. Lorsque les choses tournent mal dans la production (et elles le feront), vous devrez pouvoir suivre ces transactions via les différents microservices qui traitent cette transaction.

Il est logique, à ce stade, de générer un ID de corrélation pour chaque transaction soumise par votre frontend que vous pouvez transmettre à tous les processus ultérieurs. Ces processus peuvent ensuite intégrer cet ID de corrélation dans leurs journaux et / ou messages d’erreur. Avoir un identifiant de corrélation pour une transaction commerciale est très utile pour déterminer ce qui est arrivé à cette transaction.

La seule véritable exigence pour l’ID de corrélation est qu’elle doit être unique pour chaque transaction. Vous pouvez assembler un ID de corrélation à partir de parties des informations associées à la transaction (par exemple, la date et l’heure à la milliseconde), mais, pour cette étude de cas, je vais générer un identifiant unique à l’aide de l’objet .NET Core Guid et le transmettre à mon service Web dans la tête X-Corrélation-ID de ma demande:

  string correlationId = Guid.NewGuid().ToString();
  hc.DefaultRequestHeaders.Add("X-Correlation-ID",
                                                                                new string[] { correlationId });

Dans le service Web, pour récupérer l’en-tête, vous devez accepter (en tant que paramètre sur votre méthode API) l’objet httpRequest qui représente la demande faite au service. Dans votre méthode API, vous pouvez utiliser la collection d’en-têtes de l’objet HttpRequest pour récupérer l’en-tête par nom (dans ce cas, le nom que vous souhaitez est «X-Corrélation-ID»). Une fois que vous avez récupéré l’ID de corrélation, c’est à vous de décider comment vous souhaitez l’utiliser.

Cela signifie que le début d’une méthode d’API Web typique (avec un exemple de message de journal qui tire parti de l’ID de corrélation) ressemblerait à ceci:

app.MapGet("/products", (HttpRequest req) =>
{
    string correlationId = req.Headers["X-Correlation-ID"].ToString();
    app.Logger.LogInformation("Request received, Correlation Id: " + correlationId);

Étapes suivantes

Votre prochaine étape consiste à sécuriser l’accès entre votre frontend et votre service Web. C’est mon prochain post (en supposant que vous sautez le « Création d’un frontend JavaScript / TypeScript dans React (partie 7A) » poste).

Le meilleur outil 2023 pour ta croissance Instagram !



Source link