Ćwiczenie — Użycie konta magazynu do hostowania statycznej witryny internetowej

  • 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 akcji klient aktualizuje 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 uruchamianie subtelnej animacji w miarę zmian danych zapasów. Po zaktualizowaniu akcji kafelek zanika i szybko zostaje ponownie wyświetlony. W ten sposób jeśli strona jest pełna danych akcji, użytkownicy mogą łatwo dostrzec zmienione akcje.

  3. Dodaj następujący blok skryptu tuż nad odwołaniem do bundle.js , aby uwzględnić zestaw Sdk usługi 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ć kartę Podstawy tworzenia zasobów.

    Nazwa/nazwisko Wartość
    Subskrypcja Wybierz subskrypcję.
    Grupa zasobów Użyj grupy stock-prototypezasobów .
    Nazwa statycznej aplikacji internetowej Postpend your name to client. Na przykład client-jamie.
    Typ planu hostingu Wybierz pozycję Bezpłatna.
    Źródło wdrożenia Wybierz pozycję GitHub.
    Organizacja Wybieranie konta usługi GitHub
    Repozytorium Wyszukaj i wybierz pozycję mslearn-advocates.azure-functions-and-signalr.
    Oddział 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 pozycję Podgląd pliku przepływu pracy, 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 zaczekaj na ukończenie wdrażania.

  6. Wybierz pozycję Przejdź do zasobu, aby otworzyć nowy zasób usługi Azure Static Web App.

  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ą BACKEND_URL środowiskową ustawioną na wdrożony podstawowy adres URL aplikacji usługi Azure Functions z lekcji 5.

  1. W przeglądarce rozwidlenia przykładowego repozytorium GitHub wybierz pozycję Ustawienia — Zabezpieczenia —>> Wpisy tajne i zmienne —> Akcje.

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

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

    Nazwa/nazwisko Wartość
    BACKEND_URL Podstawowy adres URL wdrożonej aplikacji usługi Azure Functions. Adres URL powinien być w formacie 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 pobierz nowy plik przepływu pracy z rozwidlenia (źródła).

    git pull origin main

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

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

  4. Edytuj krok Kompiluj i wdróż , aby dodać właściwość env dla zmiennej środowiskowej 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

  6. Otwórz kartę Akcje w repozytorium rozwidlenia usługi GitHub, aby obejrzeć wdrożenie.

Aktualizowanie mechanizmu CORS w aplikacji funkcji

Domyślnie aplikacje funkcji nie zezwalają na żądania CORS. Należy zaktualizować aplikację funkcji, 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 wybierz pozycję INTERFEJS API —> CORS.

  3. Wybierz pozycję Włącz kontrolę dostępu-allow-credentials.

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

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

  5. Wybierz pozycję Zapisz , aby zapisać ustawienia mechanizmu 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, aby obejrzeć konsolę, aby zobaczyć, kiedy są odbierane dane usługi SignalR dotyczące zaktualizowanej akcji. Pamiętaj, że nie są to żądania HTTP, więc nie będą one widoczne na karcie Sieć.

Gratulacje! Twoja aplikacja stockowa została ulepszona za pomocą usługi SignalR!