Exercice : Utiliser un compte de stockage pour héberger un site web statique

  • 15 minutes

Maintenant que l’API est déployée dans le cloud, en tant qu’ingénieur Tailwind Traders, vous devez mettre à jour le code client et le déployer pour prendre en charge les messages SignalR à venir pour Azure Functions.

Mettre à jour l’application cliente

  1. Dans Visual Studio Code, ouvrez ./start/client/src/index.js et remplacez tout le code pour écouter les messages SignalR. Le code obtient la liste de stock initiale avec une requête HTTP, puis écoute les mises à jour de la connexion SignalR. Lorsqu’un stock est mis à jour, le client met à jour le cours de l’action dans l’interface utilisateur.

    import './style.css';
import { BACKEND_URL } from './env';

const app = new Vue({
    el: '#app',
    data() {
        return {
            stocks: []
        }
    },
    methods: {
        async getStocks() {
            try {

                const url = `${BACKEND_URL}/api/getStocks`;
                console.log('Fetching stocks from ', url);

                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status} - ${response.statusText}`);
                }
                app.stocks = await response.json();
            } catch (ex) {
                console.error(ex);
            }
        }
    },
    created() {
        this.getStocks();
    }
});

const connect = () => {

    const signalR_URL = `${BACKEND_URL}/api`;
    console.log(`Connecting to SignalR...${signalR_URL}`)

    const connection = new signalR.HubConnectionBuilder()
                            .withUrl(signalR_URL)
                            .configureLogging(signalR.LogLevel.Information)
                            .build();

    connection.onclose(()  => {
        console.log('SignalR connection disconnected');
        setTimeout(() => connect(), 2000);
    });

    connection.on('updated', updatedStock => {
        console.log('Stock updated message received', updatedStock);
        const index = app.stocks.findIndex(s => s.id === updatedStock.id);
        console.log(`${updatedStock.symbol} Old price: ${app.stocks[index].price}, New price: ${updatedStock.price}`);
        app.stocks.splice(index, 1, updatedStock);
    });

    connection.start().then(() => {
        console.log("SignalR connection established");
    });
};

connect();

  2. Ouvrez ./start/client/index.html et collez le code suivant à la place de la DIV actuelle avec l’ID de l’application.

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css"
        integrity="sha256-8B1OaG0zT7uYA572S2xOxWACq9NXYPQ+U5kHPV1bJN4=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <title>Stock Notifications | Enable automatic updates in a web application using Azure Functions and SignalR</title>
</head>

<body>
    <div id="app" class="container">
        <h1 class="title">Stocks</h1>
        <div id="stocks">
            <div v-for="stock in stocks" class="stock">
                <transition name="fade" mode="out-in">
                    <div class="list-item" :key="stock.price">
                        <div class="lead">{{ stock.symbol }}: ${{ stock.price }}</div>
                        <div class="change">Change:
                            <span
                                :class="{ 'is-up': stock.changeDirection === '+', 'is-down': stock.changeDirection === '-' }">
                                {{ stock.changeDirection }}{{ stock.change }}
                            </span>
                        </div>
                    </div>
                </transition>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"
        integrity="sha256-chlNFSVx3TdcQ2Xlw7SvnbLAavAQLO0Y/LBiWX04viY=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js"></script>
    <script src="bundle.js" type="text/javascript"></script>
</body>
</html>

    Ce balisage inclut un élément de transition, qui permet Vue.js d’exécuter une animation subtile à mesure que les données de stock changent. Quand une action est mise à jour, la vignette disparaît, puis réapparaît rapidement. Ainsi, si la page est pleine de données boursières, les utilisateurs peuvent facilement voir les actions qui ont été modifiées.

  3. Ajoutez le bloc de script suivant juste au-dessus de la référence à bundle.js pour inclure le Kit de développement logiciel (SDK) SignalR.

    <script src="https://cdn.jsdelivr.net/npm/@aspnet/signalr@1.0.3/dist/browser/signalr.js"></script>

Mettre à jour le client .env

  1. Créez un fichier de variables d’environnement dans le dossier client/start nommé .env.

  2. Ajoutez une variable nommée BACKEND_URL et ajoutez sa valeur que vous avez copiée à partir de l’unité 5.

    BACKEND_URL=https://YOUR-FUNTIONS-APP-NAME.azurewebsites.net

Créer une ressource Azure Static Web Apps et déployer un client

  1. Ouvrez le Portail Microsoft Azure pour créer une ressource Azure Static Web Apps.

  2. Utilisez les informations suivantes pour terminer la création de ressources onglet Informations de base .

    Nom Valeur
    Abonnement Sélectionnez votre abonnement.
    Resource group Utilisez le groupe de ressources stock-prototype.
    Nom de l’application web statique Ajoutez votre nom à client. Par exemple : client-jamie.
    Type de plan d’hébergement Sélectionnez Gratuit.
    Source de déploiement Sélectionnez GitHub.
    Organization Sélectionner votre compte GitHub
    Référentiel Recherchez et sélectionnez mslearn-advocates.azure-functions-and-signalr.
    Branche Sélectionnez la branche main.
    Présélections de build Sélectionnez Vue.js.
    Emplacement de l’application Entrez /start/client.
    Emplacement de l’API Laissez ce champ vide.
    Emplacement de sortie Entrez dist.

  3. Sélectionnez fichier de flux de travail en préversion pour passer en revue les paramètres de déploiement. L’étape Générer et déployer doit ressembler à ce qui suit :

    - name: Build And Deploy
  id: builddeploy
  uses: Azure/static-web-apps-deploy@v1
  with:
    azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_123 }}
    repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
    action: "upload"
    ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
    # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
    app_location: "/solution/client" # App source code path
    api_location: "" # Api source code path - optional
    output_location: "dist" # Built app content directory - optional
    ###### End of Repository/Build Configurations ######

  4. Sélectionnez Fermer pour enregistrer la modification.

  5. Sélectionnez Vérifier + Créer, puis sélectionnez Créer pour créer la ressource. Attendez que le déploiement se termine avant de continuer.

  6. Sélectionnez Accéder à la ressource pour ouvrir la nouvelle ressource Azure Static Web App.

  7. Sur la page Présentation, copiez la valeur de l'URL. Il s’agit de l’URL de base de l’application web statique déployée.

Ajouter la variable BACKEND_URL au référentiel

Le flux de travail doit avoir la variable d’environnement BACKEND_URL définie sur l’URL de base de l’application Azure Functions déployée à partir de l’unité 5.

  1. Dans un navigateur pour votre fork GitHub de l'exemple de référentiel, sélectionnez Paramètres -> Security -> Secrets and variables -> Actions.

  2. Sélectionnez variables, puis sélectionnez nouvelle variable de référentiel.

  3. Utilisez le tableau suivant pour créer la variable :

    Nom Valeur
    BACKEND_URL URL de base de l’application Azure Functions déployée. L’URL doit être au format de https://<FUNCTIONS-RESOURCE-NAME>.azurewebsites.net

  4. Sélectionnez Ajouter une variable pour enregistrer la variable dans le référentiel.

Modifier le flux de travail de déploiement GitHub

  1. Dans le terminal Visual Studio Code, extrayez le nouveau fichier de flux de travail à partir de votre fourche (origine).

    git pull origin main

  2. Ouvrez le fichier .github/workflows/azure-static-web-apps-*.yml .

  3. Modifiez la valeur name en haut du fichier en Client.

  4. Modifiez l’étape Générer et déployer pour ajouter la propriété env pour la variable d’environnement BACKEND_URL .

    ```yaml
    name: Client - Azure Static Web Apps CI/CD
    
    on:
      push:
        branches:
          - main
      pull_request:
        types: [opened, synchronize, reopened, closed]
        branches:
          - main
    
    jobs:
      build_and_deploy_job:
        if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
        runs-on: ubuntu-latest
        name: Build and Deploy Job
        steps:

          - uses: actions/checkout@v3
            with:
              submodules: true
              lfs: false

          #Debug only - Did GitHub action variable get into workflow correctly?
          - name: Echo
            run: |
              echo "BACKEND_URL: ${{ vars.BACKEND_URL }}"

          - name: Build And Deploy
            id: builddeploy
            uses: Azure/static-web-apps-deploy@v1
            with:
              azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_123 }}
              repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
              action: "upload"
              ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
              # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
              app_location: "/solution/client" # App source code path
              api_location: "" # Api source code path - optional
              output_location: "dist" # Built app content directory - optional
              ###### End of Repository/Build Configurations ######
            env: 
              BACKEND_URL: ${{ vars.BACKEND_URL }}

      close_pull_request_job:
        if: github.event_name == 'pull_request' && github.event.action == 'closed'
        runs-on: ubuntu-latest
        name: Close Pull Request Job
        steps:
          - name: Close Pull Request
            id: closepullrequest
            uses: Azure/static-web-apps-deploy@v1
            with:
              azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_123 }}
              action: "close"
    ```

  5. Enregistrez et envoyez les modifications au référentiel.

    git add .
git commit -m "Add BACKEND_URL environment variable"
git push

  6. Ouvrez l’onglet Actions dans le référentiel de duplication GitHub pour surveiller le déploiement.

Mettre à jour CORS dans l’application de fonction

Par défaut, les applications de fonction n’autorisent pas les requêtes CORS. Vous devez mettre à jour l’application de fonction pour autoriser les requêtes de l’application web statique.

  1. Dans le Portail Microsoft Azure, accédez à l’application Azure Functions créée dans l’unité 5.

  2. Dans le menu de gauche, sélectionnez API -> CORS.

  3. Sélectionnez Activer Access-Control-Allow-Credentials.

  4. Ajoutez la valeur que vous avez copiée pour l’URL de ressource Static Web Apps.

    Propriété Valeur
    Origines autorisées URL de base de l’application web statique déployée.

  5. Sélectionnez Enregistrer pour enregistrer les paramètres CORS.

Tester le déploiement du client

  1. Dans un navigateur, utilisez l’URL de l’application web statique déployée pour ouvrir le client.
  2. Ouvrez les outils de développement pour regarder la console pour voir quand les données SignalR pour le stock mis à jour sont reçues. N’oubliez pas que ces requêtes ne sont pas HTTP. Vous ne les verrez donc pas sous l’onglet Réseau.

Félicitations ! Vous avez déployé votre application stock améliorée avec SignalR !