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 inženýr Tailwind Traders musíte aktualizovat kód klienta a nasadit podporu pro přicházející zprávy SignalR 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, který naslouchá 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 DIVu s ID 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>

    Tento kód zahrnuje přechodový prvek, který umožňuje Vue.js spustit drobnou animaci při změnách burzovních dat. Po aktualizaci akcie dlaždice zmizí a rychle se znovu objeví. Pokud je stránka plná dat akcií, můžou uživatelé snadno zjistit, 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. Vytvořte soubor proměnných prostředí ve složce start/client s názvem .env.

  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 Azure portal a vytvořte nový prostředek služby Azure Static Web Apps.

  2. Použijte následující informace k dokončení vytváření zdroje na záložce Základy .

    Jméno Hodnota
    Předplatné Vyberte své předplatné.
    Skupina prostředků Použijte skupinu prostředků stock-prototype.
    Název statické webové aplikace Přidejte své jméno k client. Například client-jamie.
    Typ plánu hostování Vyberte Zdarma.
    Zdroj nasazení Vyberte GitHub .
    Organizace Vyberte svůj účet GitHubu.
    Repozitář Vyhledejte a vyberte mslearn-advocates.azure-functions-and-signalr.
    Pobočka Vyberte hlavní větev.
    Předvolby 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 náhled souboru pracovního postupu 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 Zavřít změnu uložte.

  5. Vyberte Zkontrolovat a vytvořit, poté zvolte Vytvořit pro vytvoření prostředku. Než budete pokračovat, počkejte na dokončení nasazení.

  6. Výběr Přejděte na prostředek a otevřete nový prostředek Azure Static Web App.

  7. Na stránce přehledu 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 proměnnou prostředí BACKEND_URL 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é –> Actions.

  2. Vyberte Proměnnéa pak vyberte nová proměnná repozitáře.

  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. Vyberte Přidat proměnnou, abyste uložili proměnnou do úložiště.

Úprava pracovního postupu nasazení GitHubu

  1. V terminálu Visual Studio Code stáhněte nový soubor pracovního postupu ze svého forku.

    git pull origin main

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

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

  4. Upravte krok Sestavení a nasazení, abyste přidali vlastnost env pro proměnné prostředí 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. Uložte a nasdílejte změny do úložiště.

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

  6. Otevřete na GitHubu v úložišti forku kartu Actions a sledujte průběh 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 povolitaccess-control-allow-credentials .

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

    Vlastnost Hodnota
    Povolené původy Základní adresa URL nasazené statické webové aplikace

  5. Zvolte Uložit pro uložení nastavení CORS.

Otestujte 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íť.

Blahopřejeme! Nasadili jste aplikaci pro burzovní akcie vylepšenou pomocí SignalR!