Ćwiczenie — hostowanie statycznej strony internetowej przy użyciu konta przechowywania danych

  • 15 min

Teraz, gdy interfejs API jest wdrażany w chmurze, jako inżynier firmy Tailwind Traders, musisz zaktualizować kod klienta i wdrożyć go w celu obsługi komunikatów usługi SignalR przychodzących dla usługi Azure Functions.

Aktualizowanie aplikacji klienckiej

  1. W programie Visual Studio Code otwórz ./start/client/src/index.js i zastąp cały kod, aby nasłuchiwać komunikatów usługi SignalR. Kod pobiera początkową listę magazynową z żądaniem HTTP, a następnie nasłuchuje aktualizacji z połączenia usługi SignalR. Po zaktualizowaniu notowań klient widzi zaktualizowaną cenę akcji w interfejsie użytkownika.

    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. Otwórz ./start/client/index.html i wklej następujący kod zamiast bieżącego div z identyfikatorem aplikacji.

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

    Ten znacznik zawiera element przejścia, który umożliwia Vue.js wykonanie subtelnej animacji w miarę zmian danych giełdowych. Po zaktualizowaniu zapasów kafelek zanika i szybko wraca do widoku. Dzięki temu, jeśli strona jest pełna danych zapasów, użytkownicy mogą łatwo zobaczyć, które zapasy uległy zmianie.

  3. Dodaj następujący blok skryptu tuż nad odwołaniem do bundle.js w celu dołączenia pakietu SDK SignalR.

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

Aktualizowanie klienta .env

  1. Utwórz plik zmiennych środowiskowych w folderze start/client o nazwie .env.

  2. Dodaj zmienną o nazwie BACKEND_URL i dodaj jej wartość skopiowaną z lekcji 5.

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

Tworzenie zasobu usługi Azure Static Web Apps i wdrażanie klienta

  1. Otwórz witrynę Azure Portal, aby utworzyć nowy zasób usługi Azure Static Web Apps.

  2. Skorzystaj z poniższych informacji, aby ukończyć tworzenie zasobu w karcie Podstawy .

    Nazwa Wartość
    Subskrypcja Wybierz swoją subskrypcję.
    Grupa zasobów Użyj grupy zasobów stock-prototype.
    Nazwa statycznej aplikacji internetowej Dodaj swoje imię do client. Na przykład client-jamie.
    Typ planu hostingu Wybierz pozycję Bezpłatna.
    Źródło wdrożenia Wybierz GitHub.
    Organizacja Wybieranie konta usługi GitHub
    Repozytorium Wyszukaj i wybierz pozycję mslearn-advocates.azure-functions-and-signalr.
    Gałąź Wybierz gałąź główną .
    Ustawienia wstępne kompilacji Wybierz pozycję Vue.js.
    Lokalizacja aplikacji Wprowadź /start/client.
    Lokalizacja interfejsu API Pozostaw puste.
    Lokalizacja wyjściowa Wprowadź dist.

  3. Wybierz plik przepływu pracy w wersji zapoznawczej, aby przejrzeć ustawienia wdrożenia. Krok Kompilowanie i wdrażanie powinien wyglądać następująco:

    - 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. Wybierz pozycję Zamknij, aby zapisać zmianę.

  5. Wybierz pozycję Przejrzyj i utwórz, a następnie wybierz pozycję Utwórz, aby utworzyć zasób. Przed kontynuowaniem poczekaj na zakończenie wdrożenia.

  6. Wybierz pozycję Przejdź do zasobu, aby otworzyć nowy zasób aplikacji internetowej Azure Static.

  7. Na stronie Przegląd skopiuj wartość adresu URL. Jest to podstawowy adres URL wdrożonej statycznej aplikacji internetowej.

Dodawanie zmiennej BACKEND_URL do repozytorium

Przepływ pracy musi mieć zmienną środowiskową BACKEND_URL ustawioną na wdrożony podstawowy adres URL aplikacji usługi Azure Functions z lekcji 5.

  1. W przeglądarce dla twojego rozwidlenia przykładowego repozytorium GitHub wybierz Ustawienia -> Zabezpieczenia -> Tajemnice i zmienne -> Akcje.

  2. Wybierz Zmienne, a następnie wybierz Nowa zmienna repozytorium.

  3. Użyj poniższej tabeli, aby utworzyć zmienną:

    Nazwa Wartość
    BACKEND_URL Podstawowy adres URL wdrożonej aplikacji usługi Azure Functions. Adres URL powinien mieć format https://<FUNCTIONS-RESOURCE-NAME>.azurewebsites.net

  4. Wybierz pozycję Dodaj zmienną, aby zapisać zmienną w repozytorium.

Edytowanie przepływu pracy wdrażania usługi GitHub

  1. W terminalu programu Visual Studio Code ściągnij nowy plik przepływu pracy z forka (origin).

    git pull origin main

  2. Otwórz plik .github/workflows/azure-static-web-apps-*.yml.

  3. Zmień wartość name w górnej części pliku na Client.

  4. Edytuj krok Kompilowanie i wdrażanie, aby dodać właściwość env dla środowiskowej zmiennej 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. Zapisz i wypchnij zmiany do repozytorium.

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

  6. Otwórz kartę Actions w zaforkowanym repozytorium GitHub, aby obejrzeć wdrożenie.

Aktualizowanie mechanizmu CORS w aplikacji funkcjonalnej

Domyślnie aplikacje funkcji nie zezwalają na żądania CORS. Należy zaktualizować aplikację funkcjonalną, aby zezwolić na żądania ze statycznej aplikacji internetowej.

  1. W witrynie Azure Portal przejdź do aplikacji usługi Azure Functions utworzonej w lekcji 5.

  2. W menu po lewej stronie kliknij na pozycję interfejs API —> CORS.

  3. Wybierz pozycję Włącz Zezwalaj na poświadczenia w ramach kontroli dostępu.

  4. Dodaj wartość skopiowaną dla adresu URL zasobu usługi Static Web Apps.

    Własność Wartość
    Dozwolone źródła Podstawowy adres URL wdrożonej statycznej aplikacji internetowej.

  5. Wybierz Zapisz, aby zapisać ustawienia CORS.

Testowanie wdrożenia klienta

  1. W przeglądarce użyj adresu URL wdrożonej statycznej aplikacji internetowej, aby otworzyć klienta.
  2. Otwórz narzędzia deweloperskie i śledź konsolę, aby zobaczyć, kiedy są odbierane dane SignalR dotyczące zaktualizowanych akcji. Pamiętaj, że nie są to żądania HTTP, więc nie będą one widoczne na karcie Sieć.

Gratulacje! Uruchomiłeś swoją aplikację giełdową, ulepszoną dzięki SignalR!