Övning – Använda ett lagringskonto som värd för en statisk webbplats

  • 15 minuter

Nu när API:et har distribuerats till molnet måste du som Tailwind Traders-tekniker uppdatera klientkoden och distribuera den för att stödja SignalR-meddelanden som kommer för Azure Functions.

Uppdatera klientprogrammet

  1. Öppna och ersätt all kod i Visual Studio Code ./start/client/src/index.js för att lyssna efter SignalR-meddelanden. Koden hämtar den första lagerlistan med en HTTP-begäran och lyssnar sedan efter uppdateringar från SignalR-anslutningen. När en aktie uppdateras uppdaterar klienten aktiekursen i användargränssnittet.

    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. Öppna ./start/client/index.html och klistra in följande kod i stället för aktuell DIV med appens ID.

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

    Den här markeringen innehåller ett övergångselement som gör att Vue.js kan köra en subtil animering när aktiedata ändras. När en aktie uppdateras tonas panelen ut och snabbt in igen i vyn. Om sidan då är fylld med aktiedata kan användarna enkelt se vilka aktier som har ändrats.

  3. Lägg till följande skriptblock precis ovanför referensen till bundle.js för att inkludera SignalR SDK.

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

Uppdatera klienten .env

  1. Skapa en miljövariabelfil i start/client mappen med namnet .env.

  2. Lägg till en variabel med namnet BACKEND_URL och lägg till dess värde som du kopierade från enhet 5.

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

Skapa en Azure Static Web Apps-resurs och distribuera klienten

  1. Öppna Azure-portalen för att skapa en ny Azure Static Web Apps-resurs.

  2. Använd följande information för att slutföra fliken Grundläggande för resursskapande.

    Name Värde
    Prenumeration Välj din prenumeration.
    Resursgrupp Använd resursgruppen stock-prototype.
    Namn på statisk webbapp Postpend ditt namn till client. Exempel: client-jamie
    Typ av värdplan Välj Kostnadsfri.
    Distributionskälla Välj GitHub.
    Organisation Välj ditt GitHub-konto
    Lagringsplats Sök och välj mslearn-advocates.azure-functions-and-signalr.
    Filial Välj huvudgrenen.
    Skapa förinställningar Välj Vue.js.
    Applats Ange /start/client.
    API-plats Lämna tomt.
    Utdataplats Ange dist.

  3. Välj Förhandsgranska arbetsflödesfil för att granska distributionsinställningarna. Steget Skapa och distribuera bör se ut så här:

    - 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. Spara ändringen genom att välja Stäng .

  5. Välj Granska + skapa och välj sedan Skapa för att skapa resursen. Vänta tills distributionen är klar innan du fortsätter.

  6. Välj Gå till resurs för att öppna den nya Azure Static Web App-resursen.

  7. På sidan Översikt kopierar du URL-värdet . Det här är bas-URL:en för den distribuerade statiska webbappen.

Lägg till variabeln BACKEND_URL på lagringsplatsen

Arbetsflödet måste ha BACKEND_URL miljövariabeln inställd på den distribuerade Azure Functions-appens bas-URL från enhet 5.

  1. I en webbläsare för din GitHub-förgrening av exempellagringsplatsen väljer du Inställningar – Säkerhet –>> Hemligheter och variabler –> Åtgärder.

  2. Välj Variabler och välj sedan Ny lagringsplatsvariabel.

  3. Använd följande tabell för att skapa variabeln:

    Name Värde
    BACKEND_URL Bas-URL:en för den distribuerade Azure Functions-appen. URL:en ska vara i formatet https://<FUNCTIONS-RESOURCE-NAME>.azurewebsites.net

  4. Välj Lägg till variabel för att spara variabeln på lagringsplatsen.

Redigera GitHub-distributionsarbetsflöde

  1. I Visual Studio Code-terminalen hämtar du den nya arbetsflödesfilen från din förgrening (ursprung).

    git pull origin main

  2. Öppna .github/workflows/azure-static-web-apps-*.yml-filen.

  3. Ändra värdet name överst i filen till Client.

  4. Redigera steget Skapa och distribuera för att lägga till egenskapen env för BACKEND_URL miljövariabeln.

    ```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. Spara och skicka ändringarna till lagringsplatsen.

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

  6. Öppna fliken Åtgärder på GitHub-förgreningslagringsplatsen för att titta på distributionen.

Uppdatera CORS i funktionsappen

Funktionsappar tillåter som standard inte CORS-begäranden. Du måste uppdatera funktionsappen för att tillåta begäranden från den statiska webbappen.

  1. Gå till Azure Functions-appen som skapades i enhet 5 i Azure-portalen.

  2. I den vänstra menyn väljer du API –> CORS.

  3. Välj Aktivera åtkomstkontroll-tillåt-autentiseringsuppgifter.

  4. Lägg till värdet som du kopierade för resurs-URL:en för Static Web Apps.

    Property Värde
    Tillåtna ursprung Bas-URL:en för den distribuerade statiska webbappen.

  5. Välj Spara för att spara CORS-inställningarna.

Testa distributionen av klienten

  1. I en webbläsare använder du URL:en för den distribuerade statiska webbappen för att öppna klienten.
  2. Öppna utvecklarverktyg för att titta på konsolen för att se när SignalR-data för uppdaterade lager tas emot. Kom ihåg att det här inte är HTTP-begäranden, så du ser dem inte på fliken Nätverk.

Grattis! Du har distribuerat din aktieapp bättre med SignalR!