Fermer

mars 20, 2025

Création d’un frontend pour un service Web – React

Création d’un frontend pour un service Web – React


Une application de cloud-native a besoin d’un frontend pour que vos utilisateurs puissent travailler. Voici comment configurer un service Azure App, puis créer et déployer un frontage de réaction côté client TypeScript / JavaScript à ce service d’application à l’aide du code Visual Studio.

Dans les articles précédents, j’ai créé un Service Web qui a accédé en toute sécurité une base de données SQL Azure (partie 5). 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 première partie de cela: créer un frontend côté client dans React dans Visual Studio Code et le déployer sur un service Azure App (il y a un article complémentaire sur celui-ci qui fait de même pour un serveur ASP.NET Core Frontend (partie 7b). Dans un article de suivi, je limiterai le service Web pour ne parler qu’à ce frontage autorisé.

Création de l’application

La première étape de la création d’une application côté client consiste à utiliser un outil d’échafaudage pour créer le squelette de votre projet. Je montre que je suis branché, avec ça et à jour en utilisant Vite Pour créer mon application React avant d’ouvrir l’application dans Visual Studio Code:

  1. Ouvrez une invite de commande Windows.
  2. Surfez dans le dossier où vous souhaitez créer votre projet React.
  3. Entrez la commande suivante pour créer un frontend TypeScript, en remplacement <name of your frontend app> Avec le nom que vous souhaitez donner votre application Frontend (j’ai utilisé WarehouseMgmtFrontendReact). Après avoir frappé Entreril vous sera demandé de confirmer le nom de votre package qui sera le nom de votre application en minuscules. Juste frapper Entrer encore pour continuer:
npx create-vite@latest <name of your frontend app> --template react-ts
  1. Lorsque l’utilitaire est terminé, passez dans le dossier de votre projet et démarrez le code Visual Studio:
cd <name of your project>
code .
  1. Revenez à la fenêtre de l’invite de commande, fermez-le et revenez au code Visual Studio.

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 SRC nœud et double-cliquez sur le App.tsx fichier pour l’ouvrir. Supprimez tout le code du fichier et remplacez-le par un code minimal pour démontrer que vous avez réussi à appeler votre service Web.

J’ai utilisé le code suivant, en signalant des endroits où vous devrez modifier pour travailler avec votre service (et, espérons-le, vous utiliserez également des noms de variables et de fonction plus appropriés que mes noms liés au «produit»):

import { useEffect, useState } from "react";


type Product =
  {
    productId: number,
    name: string,
    listPrice: number
  }

function App() 
{
  
  const [products, setProducts] = useState<Product[]>([]);

  useEffect(
     () => { 
        const loadProducts = async () => 
        {
          
          await callWarehouseManagementService("products");
        }
        loadProducts();
    },
    []
  )
   
  const WarehouseMgmtDomain: string = "<replace with your App Service's domain>";

  const callWarehouseManagementService = async (target:string) => 
          {
              let res = await fetch("https://" + WarehouseMgmtDomain + "https://www.telerik.com/" + target);      
              if (res.ok) { setProducts(await res.json()); }
         };

  return (
      <>      
      {products.map(
          (prd:Product) => {
            return(
	<>
                     <p>
                {}
                               Product Id: {prd.productId} <br/>
                Product Name: {prd.name} <br/>
                               Product Price: {prd.listPrice} <br/>
      </p>
	</>
            )
          } )
      }
      </>
  )
}

export default App

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 NPM Run Build 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 et est modifié pour une application Node.js.

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 pile d’assistance pour votre application sera chargée dans le service d’application. J’ai choisi Node 20 LTS Parce qu’il correspondait à la version de Node.js installée sur l’ordinateur où j’ai créé mon application React (vous pouvez déterminer quelle version du nœud que vous utilisez en ouvrant une invite de commande et en exécutant VODED -V). Pour le système d’exploitation, j’ai choisi Fenêtre Parce que c’était la plate-forme sur laquelle je développais.

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 cet exemple d’application, 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 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. 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. Faites une génération de production de votre application pour préparer les fichiers que vous déployez. Dans la fenêtre du terminal de Visual Studio Code, tapez NPM Run Build.
  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. Sélectionnez le distr dossier (il a été ajouté à votre projet quand a fait la construction) et cliquez sur le Sélectionner bouton.
  8. Si on vous demande si vous souhaitez exécuter des commandes de construction sur votre service d’application dans le cadre du déploiement, sélectionnez Oui.
  9. 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). Ne soyez pas surpris de découvrir que votre application ne fonctionne pas… du moins pas encore.

Configuration du service Web

Votre application ne fonctionnera pas car le service d’application qui maintient votre service d’application est configuré pour rejeter les demandes des applications exécutées dans n’importe quel domaine en dehors du service d’applications de votre service Web. Pour résoudre ce problème, vous devrez mettre à jour les paramètres CORS pour le service d’application de votre service Web afin d’accepter les demandes du service d’application de votre frontend:

  1. En supposant que vous affichez toujours votre application, à partir de la barre d’adresse de votre navigateur, sélectionnez et copiez la nouvelle URL de votre application.
  2. Dans un nouvel onglet, surfez sur le portail Azure puis sur le service d’application qui détient votre service Web.
  3. Dans le menu à gauche, percez vers le bas pour API | Cors Pour afficher les paramètres CORS pour votre service d’application à droite.
  4. Dans la zone de texte vide sous Origines autoriséesCollez dans l’URL que vous avez copiée à partir de votre application et supprimez toutes les barres obliques.
  5. Cliquez sur le Sauvegarder bouton en haut de la page.

Revenez à l’onglet qui affiche votre frontend et actualisez la page (vous devrez peut-être attendre environ une minute pour que votre mise à jour CORS propage).

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, depuis que vous déploiez à partir du dossier DIST de votre application, vous devez vous rappeler de faire une version avant de déployer afin que vous obteniez votre dernier 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 NPM Run Dev La commande dans la fenêtre Terminal de Visual Studio Code vous permettra d’exécuter votre application sur votre ordinateur local. Vous devrez ajouter l’URL que votre application utilise lors de l’exécution locale à la liste CORS pour le service d’application tenant votre service Web.

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 être en mesure de suivre ces transactions commerciales via les différents microservices qui étaient censés traiter 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 du package Node.js UUID.

Tout d’abord, dans le terminal de Visual Studio Code, Window, je vais installer le package UUID sur mon projet:

npm install uuid

En haut de mon fichier app.tsx, j’ajouterai cette instruction IMPORT pour mettre la version la plus récente du processeur UUID à la disposition de mon application (au moment où vous lisez ceci, la version la plus récente pourrait être quelque chose de plus récent que V6):

import {v6} from 'uuid';

Je met ensuite à jour mon appel à mon service Web pour générer un ID de corrélation et le transmettre à mon service Web dans l’en-tête X-Corrélation-ID de ma demande:

  const correlationid:string = v6();
  const callWarehouseManagementService = async (target:string) => 
        {
            let res = await fetch("https://" + WarehouseMngmntDomain + "https://www.telerik.com/" + target,
                                                       {  headers: {'X-Correlation-ID': correlationid}    }
                                                    );  
            if (res.ok) { …

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 de corrélation par nom (dans ce cas, le nom que vous voulez 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 Core ASP.NET » poste).

Le meilleur outil 2023 pour ta croissance Instagram !



Source link