Oefening: Een opslagaccount gebruiken om een statische website te hosten

  • 15 minuten

Nu de API is geïmplementeerd in de cloud, moet u als Tailwind Traders-engineer de clientcode bijwerken en implementeren ter ondersteuning van de SignalR-berichten die beschikbaar zijn voor Azure Functions.

De clienttoepassing bijwerken

  1. Open ./start/client/src/index.js en vervang in Visual Studio Code alle code om te luisteren naar SignalR-berichten. De code haalt de eerste voorraadlijst op met een HTTP-aanvraag en luistert vervolgens naar updates van de SignalR-verbinding. Wanneer een voorraad wordt bijgewerkt, werkt de client de aandelenkoers in de gebruikersinterface bij.

    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. Open ./start/client/index.html en plak de volgende code in plaats van de huidige DIV met de id van de app.

    <!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>

    Deze markering bevat een overgangselement, waarmee Vue.js een subtiele animatie kan uitvoeren wanneer de voorraadgegevens veranderen. Wanneer een voorraad wordt bijgewerkt, wordt de tegel lichter en vervolgens weer in de normale kleuren weergegeven. Op deze manier kunnen gebruikers eenvoudig zien welke voorraden zijn gewijzigd als de pagina vol staat met voorraadgegevens.

  3. Voeg het volgende scriptblok toe net boven de verwijzing naar bundle.js om de SignalR SDK op te nemen.

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

De client .env bijwerken

  1. Maak een omgevingsvariabelenbestand in de map met de start/client naam .env.

  2. Voeg een variabele toe met de naam BACKEND_URL en voeg de waarde toe die u hebt gekopieerd uit les 5.

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

Een Azure Static Web Apps-resource maken en client implementeren

  1. Open Azure Portal om een nieuwe Azure Static Web Apps-resource te maken.

  2. Gebruik de volgende informatie om het tabblad Basisinformatie voor het maken van resources te voltooien.

    Naam Weergegeven als
    Abonnement Selecteer uw abonnement.
    Resourcegroep Gebruik de resourcegroep stock-prototype.
    Naam van statische web-app Postpend uw naam aan client. Bijvoorbeeld: client-jamie.
    Type hostingabonnement Selecteer Gratis.
    Implementatiebron Selecteer GitHub.
    Organisatie Selecteer uw GitHub-account
    Opslagplaats Zoek en selecteer mslearn-advocates.azure-functions-and-signalr.
    Vertakking Selecteer de hoofdbranch .
    Vooraf ingestelde instellingen bouwen Selecteer Vue.js.
    App-locatie Voer /start/client in.
    API-locatie Leeg laten.
    Uitvoerlocatie Voer dist in.

  3. Selecteer Voorbeeldwerkstroombestand om de implementatie-instellingen te controleren. De stap Bouwen en implementeren moet er als volgt uitzien:

    - 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. Selecteer Sluiten om de wijziging op te slaan.

  5. Selecteer Beoordelen en maken en selecteer vervolgens Maken om de resource te maken. Wacht tot de implementatie is voltooid voordat u doorgaat.

  6. Selecteer Ga naar de resource om de nieuwe Azure Static Web App-resource te openen.

  7. Kopieer de URL-waarde op de pagina Overzicht. Dit is de basis-URL van de geïmplementeerde statische web-app.

De variabele BACKEND_URL toevoegen aan de opslagplaats

Voor de werkstroom moet de BACKEND_URL omgevingsvariabele zijn ingesteld op de basis-URL van de geïmplementeerde Azure Functions-app vanaf les 5.

  1. Selecteer in een browser voor uw GitHub-fork van de voorbeeldopslagplaats Instellingen - Beveiliging ->> Geheimen en variabelen -> Acties.

  2. Selecteer Variabelen en selecteer vervolgens de variabele Nieuwe opslagplaats.

  3. Gebruik de volgende tabel om de variabele te maken:

    Naam Weergegeven als
    BACKEND_URL De basis-URL van de geïmplementeerde Azure Functions-app. De URL moet de indeling hebben van https://<FUNCTIONS-RESOURCE-NAME>.azurewebsites.net

  4. Selecteer Variabele toevoegen om de variabele op te slaan in de opslagplaats.

GitHub-implementatiewerkstroom bewerken

  1. Haal in de Visual Studio Code-terminal het nieuwe werkstroombestand op uit uw fork (oorsprong).

    git pull origin main

  2. Open het bestand .github/workflows/azure-static-web-apps-*.yml.

  3. Wijzig de name waarde boven aan het bestand in Client.

  4. Bewerk de stap Bouwen en implementeren om de env-eigenschap voor de BACKEND_URL omgevingsvariabele toe te voegen.

    ```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. Sla de wijzigingen op en push deze naar de opslagplaats.

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

  6. Open het tabblad Acties in de GitHub-fork-opslagplaats om de implementatie te bekijken.

CORS bijwerken in de functie-app

Functie-apps staan standaard GEEN CORS-aanvragen toe. U moet de functie-app bijwerken om aanvragen van de statische web-app toe te staan.

  1. Navigeer in Azure Portal naar de Azure Functions-app die in les 5 is gemaakt.

  2. Selecteer API -> CORS in het menu aan de linkerkant.

  3. Selecteer Access-Control-Allow-Credentials inschakelen.

  4. Voeg de waarde toe die u hebt gekopieerd voor de RESOURCE-URL van Static Web Apps.

    Eigenschappen Weergegeven als
    Toegestane oorsprongen De basis-URL van de geïmplementeerde statische web-app.

  5. Selecteer Opslaan om de CORS-instellingen op te slaan.

De implementatie van de client testen

  1. Gebruik in een browser de URL van de geïmplementeerde statische web-app om de client te openen.
  2. Open ontwikkelhulpprogramma's om de Console te bekijken om te zien wanneer de SignalR-gegevens voor bijgewerkte voorraad worden ontvangen. Houd er rekening mee dat dit geen HTTP-aanvragen zijn, dus u ziet ze niet op het tabblad Netwerk.

Gefeliciteerd U hebt uw voorraad-app verbeterd met SignalR.