Cvičení – použití účtu úložiště k hostování statického webu

  • 15 min

Teď, když je rozhraní API nasazené do cloudu, jako technik tailwind Traders, musíte aktualizovat kód klienta a nasadit ho pro podporu zpráv SignalR přicházejících pro Azure Functions.

Aktualizace klientské aplikace

  1. V editoru Visual Studio Code otevřete ./start/client/src/index.js a nahraďte veškerý kód pro naslouchání zpráv signalR. Kód získá počáteční skladový seznam s požadavkem HTTP a pak naslouchá aktualizacím z připojení SignalR. Po aktualizaci akcií klient aktualizuje cenu akcií v uživatelském rozhraní.

    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. Otevřete ./start/client/index.html a vložte následující kód místo aktuálního div s ID aplikace.

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

    Tento kód zahrnuje přechodový prvek, který umožňuje Vue.js spustit drobnou animaci při změnách burzovních dat. Když se akcie aktualizuje, dlaždice postupně zeslábne a rychle se znovu zobrazí. Uživatelé tak na stránce plné údajů jednoduše uvidí, které akcie se změnily.

  3. Přidejte následující blok skriptu těsně nad odkaz na bundle.js , aby zahrnoval sadu SignalR SDK.

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

Aktualizace klienta .env

  1. Ve složce s názvem .envvytvořte soubor start/client proměnných prostředí .

  2. Přidejte proměnnou s názvem BACKEND_URL a přidejte její hodnotu, kterou jste zkopírovali z lekce 5.

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

Vytvoření prostředku Azure Static Web Apps a nasazení klienta

  1. Otevřete web Azure Portal a vytvořte nový prostředek Azure Static Web Apps.

  2. Pomocí následujících informací dokončete kartu Základy vytváření prostředků.

    Jméno Hodnota
    Předplatné Vyberte své předplatné.
    Skupina prostředků Použijte skupinu stock-prototypeprostředků .
    Název statické webové aplikace Posaďte své jméno na client. Například client-jamie.
    Typ plánu hostování Vyberte Free.
    Zdroj nasazení Vyberte GitHub.
    Organizace Vyberte svůj účet GitHubu.
    Repository Vyhledejte a vyberte mslearn-advocates.azure-functions-and-signalr.
    Pobočka Vyberte hlavní větev.
    Přednastavení sestavení Vyberte Vue.js.
    Umístění aplikace Zadejte /start/client.
    Umístění rozhraní API Nechte prázdné.
    Výstupní umístění Zadejte dist.

  3. Vyberte soubor pracovního postupu náhledu a zkontrolujte nastavení nasazení. Krok Sestavení a nasazení by měl vypadat takto:

    - 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. Výběrem možnosti Zavřít uložte změnu.

  5. Vyberte Zkontrolovat a vytvořit a pak vyberte Vytvořit a vytvořte prostředek. Než budete pokračovat, počkejte, dokud nasazování neskončí.

  6. Výběrem možnosti Přejít k prostředku otevřete nový prostředek Azure Static Web App.

  7. Na stránce Přehled zkopírujte hodnotu adresy URL. Toto je základní adresa URL nasazené statické webové aplikace.

Přidání proměnné BACKEND_URL do úložiště

Pracovní postup musí mít BACKEND_URL proměnnou prostředí nastavenou na nasazenou základní adresu URL aplikace Azure Functions z lekce 5.

  1. V prohlížeči pro váš fork GitHubu ukázkového úložiště vyberte Nastavení – Zabezpečení –>> Tajné kódy a proměnné –> Akce.

  2. Vyberte Proměnné a pak vyberte Nová proměnná úložiště.

  3. Pomocí následující tabulky vytvořte proměnnou:

    Jméno Hodnota
    BACKEND_URL Základní adresa URL nasazené aplikace Azure Functions Adresa URL by měla být ve formátu https://<FUNCTIONS-RESOURCE-NAME>.azurewebsites.net

  4. Výběrem možnosti Přidat proměnnou uložte proměnnou do úložiště.

Úprava pracovního postupu nasazení GitHubu

  1. V terminálu editoru Visual Studio Code stáhněte nový soubor pracovního postupu z forku (origin).

    git pull origin main

  2. Otevřete soubor .github/workflows/azure-static-web-apps-*.yml.

  3. name Změňte hodnotu v horní části souboru na Client.

  4. Upravte krok Sestavení a nasazení a přidejte vlastnost env pro proměnnou BACKEND_URL prostředí.

    ```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. Uložte a nasdílejte změny do úložiště.

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

  6. Otevřete kartu Akce v úložišti forku GitHubu a sledujte nasazení.

Aktualizace CORS v aplikaci funkcí

Aplikace funkcí ve výchozím nastavení nepovolují žádosti CORS. Aplikaci funkcí je potřeba aktualizovat tak, aby umožňovala požadavky ze statické webové aplikace.

  1. Na webu Azure Portal přejděte k aplikaci Azure Functions vytvořenou v lekci 5.

  2. V nabídce vlevo vyberte rozhraní API –> CORS.

  3. Vyberte Povolit přístup-Control-Allow-Credentials.

  4. Přidejte hodnotu, kterou jste zkopírovali pro adresu URL prostředku Static Web Apps.

    Vlastnost Hodnota
    Povolené zdroje Základní adresa URL nasazené statické webové aplikace

  5. Výběrem možnosti Uložit uložte nastavení CORS.

Otestování nasazení klienta

  1. V prohlížeči otevřete klienta pomocí adresy URL nasazené statické webové aplikace.
  2. Otevřete vývojářské nástroje a sledujte konzolu, abyste viděli, kdy se obdrží data SignalR pro aktualizované akcie. Mějte na paměti, že nejsou požadavky HTTP, takže je neuvidíte na kartě Síť.

Gratulujeme! Nasadili jste stock aplikaci vylepšenou pomocí SignalR!