Exercice : Analyser les limitations d’une application web basée sur l’interrogation

  • 15 minutes

Avant de modifier le prototype, vous devez l’exécuter afin de valider les hypothèses. Le prototype se trouve dans un référentiel de code source sur GitHub.

Créer des ressources Azure

  1. Dans une fenêtre ou un onglet de navigateur distinct, dupliquez l’exemple de référentiel sur GitHub à l’aide du lien suivant : mslearn-advocates.azure-functions-and-signalr. Cette étape vous permet d’effectuer un envoi (push) de vos modifications vers votre propre version du code source. Elle est requise pour déployer le code source sur Azure à un stade ultérieur du module.

  2. Dans le terminal, clonez le dépôt. Dans la commande suivante, remplacez MicrosoftDocs par votre compte :

    git clone https://github.com/MicrosoftDocs/mslearn-advocates.azure-functions-and-signalr stock-prototype

  3. Installez les dépendances dans le dossier setup-resources.

    cd stock-prototype/setup-resources && npm install

    Si vous recevez des avertissements concernant EBADENGINE, vous pouvez les ignorer.

  4. Se connecter à Azure avec Azure CLI.

    az login

  5. Affichez vos abonnements et définissez votre abonnement Azure par défaut.

    Affichez les abonnements.

    az account list --output json | jq -r '.[] | .name' | sort

    Pour définir l’abonnement par défaut, remplacez YOUR-SUBSCRIPTION-ID par un ID d’abonnement de la sortie Azure CLI précédente.

    az account set --subscription <YOUR-SUBSCRIPTION-ID>

    Cet abonnement est utilisé par défaut pour créer les ressources Azure.

  6. Créez les ressources Azure et chargez les exemples de données dans la base de données. L’exécution de ce processus peut prendre plusieurs minutes.

    bash create-start-resources.sh "<YOUR-SUBSCRIPTION-NAME>"

    Assurez-vous de placer le nom entre des guillemets doubles.

  7. Copiez les informations requises (vous en aurez besoin pour exécuter le prototype).

    Type de ressource Variable d’environnement
    Azure Cosmos DB Appelée COSMOSDB_CONNECTION_STRING
    Stockage Azure Appelée STORAGE_CONNECTION_STRING
    Groupe de ressources Appelée RESOURCE_GROUP_NAME.

  8. Utilisez un script Node.js pour charger les exemples de données dans la base de données avec la commande suivante.

    npm start

  9. À partir du terminal, accédez à au dossier racine.

    cd ..

Installer des dépendances et exécuter le prototype

  1. Installez les dépendances.

    cd start/client && npm install && cd ../..
cd start/server && npm install && cd ../..

  2. Si la notification vous invite à choisir une application Azure Functions pour l’espace de travail, sélectionnez start/server. Il s’agit de l’application de fonction que vous utiliserez pour exécuter le code côté serveur.

  3. Si vous recevez une notification concernant l’installation de la dernière version d’Azure Functions Core Tools, sélectionnez Installer.

Obtenir les URL client et serveur

Lors de l’exécution locale, il est important que les applications client et serveur connaissent leur emplacement respectif. Les URL sont les suivantes :

  • Client : http://localhost:3000
  • Serveur : http://localhost:7071

Mettre à jour les paramètres locaux de l’application Azure Functions

Ajoutez les chaînes de connexion à l’application Azure Functions du prototype.

  1. Créez le fichier ./start/server/local.settings.json et collez-y les éléments suivants. Ce fichier contient les paramètres de configuration du projet de fonctions locales.

    {
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "<STORAGE_CONNECTION_STRING>",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
    "COSMOSDB_CONNECTION_STRING": "<COSMOSDB_CONNECTION_STRING>"
  },
  "Host" : {
    "LocalHttpPort": 7071,
    "CORS": "http://localhost:3000",
    "CORSCredentials": true
  }
}

  2. Mettez à jour les variables suivantes avec les valeurs que vous avez copiées ci-dessus.

    Propriété Valeur
    AzureWebJobsStorage À remplacer par la chaîne de connexion de stockage.
    COSMOSDB_CONNECTION_STRING À remplacer par la chaîne de connexion Cosmos DB.

    À présent, l’application Functions peut recevoir des requêtes du client, puis se connecter à la base de données et gérer correctement le déclencheur du minuteur.

Ajouter des paramètres locaux pour l’application cliente

Ajoutez l’URL du serveur à l’application cliente du prototype.

Ouvrez ./start/client et créez un fichier .env avec le contenu suivant.

BACKEND_URL=http://localhost:7071

Exécuter l’application serveur

  1. Lancez l’application Azure Functions dans le terminal.

    cd start/server && npm start

  2. Attendez que le terminal affiche les points de terminaison d’API.

    Functions:

        getStocks: [GET] http://localhost:7071/api/getStocks

        setPrice: timerTrigger

Exécution de l’application cliente

  1. Démarrez l’application cliente dans un nouveau terminal.

    cd start/client && npm start

  2. Quand la notification indique que l’application est en cours d’exécution, sélectionnez Ouvrir dans le navigateur pour utiliser le prototype.

    Capture d’écran de la notification Visual Studio Code d’ouverture du navigateur.

  3. Arrangez vos fenêtres de navigateur de manière à pouvoir visualiser à la fois le terminal et le prototype du cours des actions.

  4. Dans la fenêtre de navigateur du prototype, ouvrez les outils de développement du navigateur. Notez que le navigateur envoie une requête à l’API toutes les cinq secondes pour obtenir toutes les données, même si ces dernières n’ont pas fait l’objet de modifications.

  5. Dans la fenêtre du navigateur, examinez la sortie de l’application Azure Functions. Le cours d’une action est actualisé toutes les minutes. Lorsque le prix change dans l’API, cette modification est comprise dans l’extraction suivante de l’ensemble des données par le client.

    Capture d’écran du terminal Visual Studio Code montrant la sortie de la console avec l’évolution du cours des actions.

  6. Dans les terminaux de démarrage du client et du serveur, arrêtez les applications avec Ctrl + C ou supprimez le terminal en sélectionnant l’icône corbeille.

Dans cette unité, vous avez exécuté le prototype. Bien que le client s’exécute correctement, il ne fonctionne pas de manière efficace. Cette faiblesse peut ne pas être perceptible individuellement par chaque client lorsqu’il s’agit d’un petit nombre d’actions, mais elle devient apparente à mesure que le nombre d’actions augmente et que les requêtes des clients affluent vers le serveur. Le prototype peut être amélioré. C’est ce que nous allons voir dans l’unité suivante.